Các phần tử mốc HTML5 được dùng để cải thiện khả năng điều hướng

Các phần tử HTML5 như main, nav và aside đóng vai trò là mốc hoặc vùng đặc biệt trên trang mà trình đọc màn hình và các công nghệ hỗ trợ khác có thể chuyển đến. Khi sử dụng các phần tử mốc, bạn có thể cải thiện đáng kể trải nghiệm thao tác trên trang web của mình cho người dùng công nghệ hỗ trợ. Tìm hiểu thêm trong bài viết HTML 5 và ARIA của ARIA của Đại học Deque.

Cách kiểm tra địa danh theo cách thủ công

Sử dụng danh sách các yếu tố mốc trong W3C để kiểm tra nhằm đảm bảo mỗi phần chính trên trang của bạn có nằm trong phần tử 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ư tiện ích Thông tin chi tiết về khả năng hỗ trợ tiếp cận của Microsoft để trực quan hoá cấu trúc trang và nắm bắt các phần không có trong mốc:

Ảnh chụp màn hình web.dev với các điểm mốc được làm nổi bật trong tiện ích Thông tin chi tiết về hỗ trợ tiếp cận

Cách sử dụng địa danh sao cho hiệu quả

  • Sử dụng các 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>.
  • Sử dụng các 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 đến ý tưởng chính của trang. Vì vậy, mỗi trang chỉ được có một phần tử. Xem bản tóm tắt của MNN về các thành phần phân mục nội dung để tìm hiểu cách sử dụng từng mốc.
  • Hãy thận trọng khi sử dụng các địa danh. Thực tế, việc có quá nhiều điểm mốc có thể khiến người dùng công nghệ hỗ trợ khó di chuyển hơn vì điều này sẽ khiến họ không dễ dàng bỏ qua phần nội dung mong muốn.

Xem bài đăng Tiêu đề và điểm mốc để biết thêm thông tin.

Tài nguyên