Landmark là gì và chúng giúp người dùng screen reader như thế nào?

Landmark là các vùng có tên của một trang mà người dùng screen reader có thể liệt kê và nhảy giữa chúng, thay vì đọc mọi thứ từ đầu. Chúng giống như bản đồ của bố cục.

Hầu hết có sẵn từ HTML ngữ nghĩa:

• <header> (cấp trang) tương ứng banner.
• <nav> tương ứng navigation.
• <main> tương ứng main: nội dung chính, dùng một lần mỗi trang.
• <aside> tương ứng complementary.
• <footer> (cấp trang) tương ứng contentinfo.
• <search> hoặc role="search" đánh dấu vùng tìm kiếm.
• <section> và <form> chỉ trở thành landmark region và form khi có accessible name.

<nav aria-label="Primary">...</nav>
<main>...</main>
<nav aria-label="Footer">...</nav>

Quy tắc:

• Dùng một <main>.
• Khi một loại landmark xuất hiện nhiều lần, hãy đặt label riêng biệt cho từng cái, như hai phần tử nav.
• <header> bên trong <article> không phải banner của trang.
• Đừng biến mọi thứ thành landmark; quá nhiều sẽ làm danh sách rối.

Landmark cho cấu trúc gần như miễn phí, nên hãy ưu tiên các phần tử native.