Các phần tử HTML5 như main, nav và aside đóng vai trò là điểm mốc,
hoặc các khu vực đặc biệt trên trang
trình đọc màn hình và các công nghệ hỗ trợ khác có thể chuyển đổi.
Bằng cách sử dụng các phần tử mốc,
bạn có thể cải thiện đáng kể trải nghiệm điều hướng trên trang web của mình
đối với người dùng công nghệ hỗ trợ.
Tìm hiểu thêm trong chương trình
Mốc HTML 5 và ARIA.
Cách kiểm tra điểm mốc theo cách thủ công
Sử dụng danh sách các phần tử mốc của W3C để kiểm tra xem từng phần chính trên trang của bạn có nằm trong phần tử điểm mốc hay không. Ví dụ:
<header>
<p>Put product name and logo here</p>
</header>
<nav>
<ul>
<li>Put navigation here</li>
</ul>
</nav>
<main>
<p>Put main content here</p>
</main>
<footer>
<p>Put copyright info, supplemental links, etc. here</p>
</footer>
Bạn cũng có thể sử dụng các công cụ như Phần mở rộng về Thông tin chi tiết về khả năng hỗ trợ tiếp cận để hình ảnh hóa cấu trúc trang của bạn và nắm bắt các phần không có trong điểm mốc:
Cách sử dụng địa danh hiệu quả
- Dùng phần tử mốc để xác định các phần chính trên trang
thay vì dựa vào các phần tử chung chung như
<div>hoặc<span>. - Dùng điểm mốc để thể hiện cấu trúc của trang.
Ví dụ: phần tử
<main>phải bao gồm tất cả nội dung liên quan trực tiếp với ý tưởng chính của trang, do đó chỉ nên có một mã trên mỗi trang. Xem bản tóm tắt của MDN về các phần tử phân phần nội dung để tìm hiểu cách sử dụng từng mốc. - Sử dụng điểm mốc một cách thận trọng. Có quá nhiều điểm mốc thực sự có thể khiến người dùng công nghệ hỗ trợ khó điều hướng hơn vì ngăn không cho họ dễ dàng chuyển sang phần nội dung mong muốn.
Xem bài đăng Tiêu đề và địa danh để biết thêm thông tin.