Sử dụng các mốc để cung cấp cấu trúc trang rõ ràng

Cột mốc là các thẻ ngữ nghĩa giúp người dùng khiếm thị điều hướng trang web bằng trình đọc màn hình. Với các mốc, thật dễ dàng để xác định các phần khác nhau của trang web. Trang web của Apple sử dụng Cột mốc.

Hình ảnh trên cho thấy bốn điểm mốc khác nhau. Bạn có thể sử dụng tiện ích Thông tin chi tiết về khả năng tiếp cận để trực quan hóa các mốc này.

Trong hình ảnh, chúng ta có thể suy ra một <điều hướng> ở trên cùng, một chứa một và một <điều hướng> yếu tố. Đáng chú ý, hình ảnh cho thấy “dẫn đường”, “vùng đất”Và “thông tin nội dung”. Chúng được gọi là các vai trò mà chúng ta sẽ xem xét sau.

Bất cứ khi nào bạn phải sử dụng nhiều mốc cho một trang, hãy luôn phân biệt chúng bằng nhãn. Ví dụ, nếu bạn sử dụng nhiều <điều hướng> các yếu tố như Apple có, bạn phải gắn nhãn cho chúng. Bạn nên gắn nhãn chúng với aria-nhãn thuộc tính. Vì vậy, bạn có thể viết một cái gì đó giống như bất kỳ trong số này:

 <nav aria-label = "global">
<nav aria-label = "local navigation">
<nav aria-label = "apple directory">
 

Việc sử dụng nhãn có thể giúp trình đọc màn hình bỏ qua bất kỳ điều hướng nào.

Sử dụng các thuộc tính vai trò, tên và giá trị

Đôi khi, có thể không sử dụng được các thành phần HTML với các tính năng trợ năng được tích hợp sẵn. Những trường hợp như vậy có thể là một trong hai trường hợp sau:

1. Không có phần tử HTML riêng cho những gì bạn muốn đạt được. Ví dụ, nếu bạn phải sử dụng một
   bởi vì không có yếu tố nào khác có vẻ phù hợp với vai trò.
2. Bạn không thể sử dụng các phần tử ngữ nghĩa do sự cố kỹ thuật. Nếu bạn sử dụng một khung sử dụng khi nó sẽ tốt hơn để sử dụng <điều hướng>nhiệm vụ của bạn là xác định điều khiển tùy chỉnh.

Vai trò

Theo mặc định, một <điều hướng> phần tử có vai trò điều hướng, trong khi một phần tử có vai trò biểu ngữ. Bạn chỉ nên sử dụng các phần tử này cho các mục đích dự kiến ​​của chúng để giúp các công nghệ hỗ trợ hiểu được cấu trúc của trang web. Nếu bạn phải sử dụng cái này thay cho cái kia, bạn nên chỉ định vai trò như sau:

 <header role = "navigation">
<nav role = "banner">
<div role = "navigation">
 

Tên

Tên là một văn bản mô tả hoặc nhãn được liên kết với một phần tử HTML. Hình thức đơn giản nhất của tên là văn bản của một phần tử. Đây là một ví dụ:

 <div role = "button">Click me!</div>
 

Trong đoạn trích trên, “Nhấp vào đây!” là tên của

yếu tố. Nó còn được gọi là tên có thể truy cập.

Đối với các phần tử như điều hướng, trình đơn thả xuống, v.v., việc gán tên phức tạp hơn so với ví dụ trước. Nó khác bởi vì các phần tử này có các phần tử con trong đó. Để gán tên cho điều hướng ở trên, hãy sử dụng aria-nhãn thuộc tính. Nhìn vào ví dụ này:

 <nav role = "navigation" aria-label = "global-navigation">...</nav>
 

Bạn nên lưu ý rằng một tên thuộc tính khác với tên có thể truy cập. Đoạn mã này giúp hiểu rõ hơn:

 
<nav role = "navigation" name = "global-navigation">...</nav>

<nav role = "navigation" aria-label = "global-navigation">...</nav>
 

Xem bài viết về tên truy cập của TGPi để hiểu sâu hơn về điều này.

Giá trị

Trong HTML, thuộc tính giá trị có thể cung cấp thông tin bổ sung về một phần tử. Các giá trị cung cấp thông tin về trạng thái của thành phần cho các thành phần tùy chỉnh, chẳng hạn như đàn accordion. Ví dụ, một chiếc đàn accordion có thể được mở hoặc đóng.

Bạn có thể thêm giá trị cho các yếu tố của mình theo nhiều cách. Đoạn mã này cho thấy một số cách bạn có thể làm điều đó:

 
<button class="play-button" aria-label="Play audio" aria-valuenow="0"></button>
<audio src="audio-file.mp3"></audio>

<div role="button" aria-expanded="false">FAQ 1</div>

<input type="checkbox" name="product[]" value="1">
 

Ưu tiên khả năng truy cập web để có trải nghiệm trực tuyến toàn diện

Khả năng truy cập web nằm ngoài các quy tắc sau; đó cũng là việc đảm bảo rằng mọi người đều có quyền truy cập bình đẳng vào trang web của bạn. Việc kết hợp các yếu tố ngữ nghĩa, mốc và thuộc tính như vai trò, tên và giá trị vào HTML của bạn có thể giúp người khuyết tật dễ truy cập trang web của bạn hơn. Đừng nghĩ khả năng truy cập web là một tùy chọn; coi đó là một điều tất yếu.