Cấu trúc landmark: trình đọc màn hình điều hướng trang như thế nào

Người dùng trình đọc màn hình không đọc một trang từ trên xuống dưới như cuộn một tài liệu, họ nhảy giữa các vùng có tên, phần đầu trang, điều hướng, nội dung chính, chân trang, giống như mắt người nhìn thấy được nhảy thẳng đến thanh menu mà không đọc mọi thứ phía trên. Những vùng đó được gọi là landmark (điểm mốc), và nếu thiếu chúng, người dùng trình đọc màn hình bị kẹt phải đọc mọi thứ theo thứ tự, không có cách nào bỏ qua để đến thẳng thứ họ thực sự cần.

Những điểm chính

• Landmark là các vùng HTML ngữ nghĩa, <header>, <nav>, <main>, <footer>, <aside>, tạo cho trang một bản đồ vô hình. Trình đọc màn hình có thể nhảy thẳng giữa chúng.
• Không có landmark, người dùng trình đọc màn hình phải nghe mọi thứ theo thứ tự: cùng một menu điều hướng lặp lại ở mọi trang, mỗi lần, không có cách nào bỏ qua.
• Một trang nên có đúng một <main>. Nhiều hơn một sẽ gây rối điều hướng landmark và không đạt ngay khi quét tự động.
• Nhiều phần tử <nav> cần nhãn để phân biệt. Hai vùng điều hướng đều chỉ được đọc là "navigation" không giúp người dùng biết cái nào là cái nào.
• Bọc mọi thứ trong thẻ <div> chung chung thay vì phần tử ngữ nghĩa sẽ xóa sạch bản đồ. <div> không có vai trò, nên trình đọc màn hình không có gì để nhảy tới.

Thông báo lỗi chính xác và cách sửa

Nếu một công cụ quét đưa bạn đến đây, đây là các thông báo mà axe-core, bộ máy mã nguồn mở đứng sau hầu hết các công cụ kiểm tra khả năng tiếp cận tự động, báo cáo cho các vấn đề landmark. Nội dung khớp với axe-core 4.11 và được giữ nguyên tiếng Anh như xuất hiện trong báo cáo.

"Document does not have a main landmark"

Đây là quy tắc landmark-one-main ("tài liệu nên có một landmark main"). Trang không có phần tử <main> và cũng không có role="main". Hãy bọc nội dung chính của trang trong một <main> duy nhất, và để phần đầu trang và chân trang của site nằm ngoài nó.

"All page content should be contained by landmarks"

Đây là quy tắc region; trên phần tử bị lỗi nó ghi "Some page content is not contained by landmarks". Văn bản, hình ảnh hoặc điều khiển nằm ngoài mọi <header>, <nav>, <main> và <footer>. Hãy chuyển từng thứ vào landmark mà nó thuộc về, thường nhất là <main>.

"Document should not have more than one main landmark"

Đây là quy tắc landmark-no-duplicate-main. Hai phần tử trên trang đang đóng vai <main>, dù bằng thẻ hay bằng role="main". Giữ phần tử chứa nội dung thật của trang và đổi phần tử còn lại thành <div> hoặc <section> có nhãn.

"Landmarks should have a unique role or role/label/title (i.e. accessible name) combination"

Đây là quy tắc landmark-unique. Hai landmark cùng loại, thường là hai phần tử <nav>, không có tên hoặc có cùng tên. Hãy đặt cho mỗi cái một aria-label riêng, chẳng hạn aria-label="Main" và aria-label="Footer".

"Main landmark should not be contained in another landmark"

Đây là quy tắc landmark-main-is-top-level. Một <main> bị lồng bên trong <header>, <nav>, <aside> hoặc <footer>. Hãy đưa nó ra để nằm ở cấp cao nhất của trang.

Axeazy tự động sửa những lỗi nào và lỗi nào chờ bạn phê duyệt được nêu trong phần "Axeazy có thể sửa gì ở đây" bên dưới. Landmark là một trong hai cách người dùng trình đọc màn hình di chuyển quanh trang; cách còn lại là tiêu đề, được đề cập trong các lỗi cấu trúc tiêu đề phá vỡ khả năng tiếp cận.

Landmark thực sự làm gì

Landmark là các phần tử HTML ngữ nghĩa đánh dấu những vùng chính của trang: <header> cho khu vực đầu trang, <nav> cho menu điều hướng, <main> cho nội dung thực sự mà người ta đến để đọc, <footer> cho phần ở cuối, và <aside> cho nội dung liên quan gián tiếp như thanh bên.

Mỗi phần tử mang một vai trò ngầm định mà trình đọc màn hình tự động nhận ra. Chính điều đó biến chúng thành landmark chứ không chỉ là các vùng chứa: trình đọc màn hình có thể liệt kê mọi landmark trên trang và cho phép người dùng nhảy thẳng đến bất kỳ cái nào, cùng lối tắt mà người nhìn thấy được có sẵn chỉ bằng việc liếc qua bố cục trực quan của trang.

Phím tắt của trình đọc màn hình khác nhau tùy phần mềm nhưng ý tưởng giống nhau ở mọi nơi: người dùng NVDA chuyển qua các landmark bằng phím D, người dùng JAWS bằng R, người dùng VoiceOver qua rotor. Cả ba cho phép bỏ qua phần đầu trang và menu điều hướng lặp lại để đến nội dung thật, chính cái menu họ đã nghe ở mọi trang khác của site.

Vì sao điều này quan trọng hơn vẻ ngoài

Hãy tưởng tượng nghe mọi website được đọc cho bạn trong một dòng liền mạch, logo, toàn bộ menu điều hướng, các biểu ngữ thông báo, rồi cuối cùng mới đến nội dung thật của trang, ở mọi trang, không có cách nào bỏ qua. Đó là trải nghiệm khi không có landmark. Ai đó xem mười trang sản phẩm trên một cửa hàng trực tuyến phải nghe toàn bộ phần đầu trang và điều hướng mười lần riêng biệt trước khi đến được thứ họ thực sự muốn so sánh.

Landmark biến điều đó thành một bản đồ thật thay vì một đường thẳng. Đây là WCAG 1.3.1, Thông tin và Mối quan hệ, ở Cấp độ A: cấu trúc và mối quan hệ của trang phải xác định được bằng chương trình, chứ không chỉ hiển nhiên về mặt thị giác. Nó cũng liên quan đến 2.4.1, Bỏ qua khối, yêu cầu người dùng phải có cách nào đó để bỏ qua nội dung lặp lại; landmark là một trong những cách tiêu chuẩn để đáp ứng.

Những lỗi phổ biến phá vỡ bản đồ

Bọc mọi thứ trong <div> thay vì phần tử ngữ nghĩa. <div> không mang vai trò nào cả. Về mặt hình ảnh nó có thể giống hệt một <header> hay <nav> đúng chuẩn, nhưng trình đọc màn hình không có gì để nhảy tới, landmark đơn giản là không tồn tại.

<!-- Lỗi: trông như phần đầu trang nhưng vô hình với điều hướng landmark -->
<div class="header">
  <div class="logo">Site Name</div>
</div>

<!-- Đạt: landmark thật mà trình đọc màn hình có thể nhảy tới -->
<header>
  <a href="/vi" class="logo">Site Name</a>
</header>

Nhiều hơn một <main> trên một trang. Đặc tả HTML cho phép đúng một. Cái thứ hai không chỉ làm sai quy tắc, nó còn gây rối điều hướng landmark và không đạt khi quét tự động.

Nhiều phần tử <nav> không có nhãn. Nếu một trang có menu điều hướng chính và một điều hướng chân trang riêng, trình đọc màn hình đọc cả hai đơn giản là "navigation", không có cách phân biệt, trừ khi mỗi cái có một nhãn khác biệt.

<!-- Lỗi: cả hai được đọc giống hệt nhau, là "navigation" không nhãn -->
<nav>...</nav>
<nav>...</nav>

<!-- Đạt: mỗi cái được đọc khác biệt -->
<nav aria-label="Main">...</nav>
<nav aria-label="Footer">...</nav>

Lồng <header> hoặc <footer> bên trong <article> hoặc <section>. Chúng mất hoàn toàn vai trò landmark khi lồng như vậy; chúng chỉ được nhận là landmark cấp trang khi ở cấp cao nhất của tài liệu, không phải bên trong một vùng nội dung khác.

Dùng <section> không có nhãn. Một <section> chỉ trở thành landmark thật khi được đặt tên truy cập được qua aria-label hoặc aria-labelledby. Một <section> không nhãn hoàn toàn không được ghi nhận là landmark.

Cách kiểm tra website của bạn

Bạn không cần cài trình đọc màn hình để phát hiện phần lớn các lỗi này.

1. Xem mã nguồn trang hoặc mở bảng Elements của DevTools. Tìm <div class="header"> hoặc tương tự, các vùng chứa chung chung thay chỗ cho phần tử landmark thật là lỗi phổ biến nhất.
2. Đếm số phần tử <main>. Phải có đúng một trên mỗi trang.
3. Kiểm tra mỗi <nav> có nhãn không, nếu có nhiều hơn một trên trang.
4. Hoặc chạy quét thay vì kiểm tra từng phần tử. Lượt quét miễn phí của Axeazy kiểm tra toàn bộ cấu trúc landmark của một trang trong khoảng 60 giây, cùng với các nhóm sửa lỗi khác mà nó bao quát.

Axeazy có thể sửa gì ở đây

Nhóm này chia gọn thành hai loại thay đổi, và chỉ một loại có thể diễn ra mà không cần hỏi trước.

Thêm nhãn còn thiếu là việc chỉ bổ sung: không có gì bị di chuyển, không gì bị đổi tên, nên Axeazy sửa tự động: một vùng nội dung mồ côi không nhãn được gắn nhãn tạo từ id, class hoặc tên thẻ của nó, và các landmark trùng lặp thiếu nhãn phân biệt được thêm một nhãn. Cả hai đều là bản sửa tự động thật, hoạt động được.

Tái cấu trúc một landmark hiện có, đổi một <header> trùng thành <div> thường, đưa một <main> bị lồng ra cấp cao nhất, sửa một <nav> bị chôn ở nơi không nên, là thay đổi cấu trúc nhìn thấy được, không phải bổ sung thầm lặng. Axeazy tính ra bản sửa đúng cho các trường hợp này, nhưng không có gì được ghi cho đến khi bạn hoặc lập trình viên của bạn phê duyệt rõ ràng trong bảng điều khiển. Đó là ranh giới có chủ ý: thêm một nhãn vô hình không cần chấp thuận, còn thay đổi cấu trúc thực của trang thì cần.

Câu hỏi thường gặp

Một trang nên có bao nhiêu phần tử <main>?

Đúng một. Đặc tả HTML chỉ cho phép một, và có nhiều hơn một làm hỏng điều hướng landmark cho người dùng trình đọc màn hình và không đạt khi quét khả năng tiếp cận tự động.

Tôi có cần gắn nhãn mọi <nav> trên trang không?

Chỉ khi có nhiều hơn một. Một vùng điều hướng duy nhất không cần nhãn, trình đọc màn hình đọc là "navigation" và điều đó không mơ hồ. Khi có hai trở lên, mỗi cái cần một nhãn khác biệt như aria-label="Main" hoặc aria-label="Footer" để người dùng phân biệt được.

Dùng <section> có tự động tạo ra landmark không?

Không. Một <section> chỉ trở thành landmark khi có tên truy cập được, đặt qua aria-label hoặc aria-labelledby. Nếu không có, nó chỉ là vùng chứa chung chung, không khác <div> về mặt landmark.

Tôi có thể lồng <header> trong <article> không?

Có thể, nhưng nó mất vai trò landmark cấp trang khi lồng như vậy. <header> hoặc <footer> chỉ được nhận là landmark cấp cao nhất khi nằm trực tiếp ở cấp trang, không phải bên trong một vùng nội dung khác.

Chỉ sửa landmark có làm website dễ điều hướng không?

Không có bản sửa đơn lẻ nào bao quát mọi thứ. Landmark giải quyết một vấn đề cụ thể, cho phép người dùng nhảy giữa các vùng chính thay vì đọc mọi thứ theo thứ tự. Một trang vẫn có thể có các vấn đề điều hướng khác, cấu trúc tiêu đề hỏng hoặc thứ tự phím Tab gây rối, cần được kiểm tra riêng.

Nguồn

• W3C: Tìm hiểu SC 1.3.1, Thông tin và Mối quan hệ
• W3C: Tìm hiểu SC 2.4.1, Bỏ qua khối