Trình đọc màn hình có các lệnh để chuyển nhanh giữa các tiêu đề hoặc đến các vùng đánh dấu cụ thể. Trên thực tế, một khảo sát về người dùng trình đọc màn hình cho thấy rằng họ thường khám phá các tiêu đề trên một trang mới lạ.
Bằng cách sử dụng đúng phần tử tiêu đề và 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 cho người dùng công nghệ hỗ trợ.
Sử dụng tiêu đề để vẽ đường viền trang
Sử dụng các phần tử h1-h6 để tạo đường viền theo cấu trúc cho trang của bạn. Mục tiêu là tạo một bộ khung hoặc giàn giáo của trang để bất kỳ ai điều hướng theo tiêu đề cũng có thể tạo ra một bức tranh trong đầu.
Có một cách phổ biến là sử dụng một h1 duy nhất cho tiêu đề hoặc biểu trưng chính trên một trang, các phần tử h2 để chỉ định các phần chính và các phần tử h3 trong các tiểu mục hỗ trợ:
<h1>Company name</h1>
<section>
<h2>Section Heading</h2>
…
<h3>Sub-section Heading</h3>
</section>
Không bỏ qua các cấp độ tiêu đề
Các nhà phát triển thường bỏ qua các cấp độ tiêu đề để sử dụng kiểu mặc định của trình duyệt phù hợp với thiết kế của họ. Đây được coi là kháng mẫu vì nó phá vỡ mô hình đường viền.
Thay vì dựa vào cỡ chữ mặc định của trình duyệt cho tiêu đề, hãy sử dụng CSS của riêng bạn và không bỏ qua các cấp độ.
Ví dụ: trang web này có một phần tên là "IN THE NEWS", theo sau là hai dòng tiêu đề:
Tiêu đề mục "IN THE NEWS" có thể là h2 và cả hai dòng tiêu đề hỗ trợ đều có thể là phần tử h3.
Vì font-size của "IN THE NEWS" nhỏ hơn so với dòng tiêu đề, nên bạn có thể muốn đặt dòng tiêu đề cho tin bài đầu tiên thành h2 và biến tính năng "TRONG TIN TỨC" thành h3. Mặc dù kiểu này có thể khớp với kiểu mặc định của trình duyệt, nhưng sẽ làm hỏng đường viền được truyền đến người dùng trình đọc màn hình!
Bạn có thể sử dụng Lighthouse để kiểm tra xem trang của mình có bỏ qua bất kỳ cấp tiêu đề nào hay không. Chạy bài kiểm tra về Khả năng hỗ trợ tiếp cận (Lighthouse > Tuỳ chọn > Hỗ trợ tiếp cận) và tìm kết quả của bài kiểm tra Tiêu đề không bỏ qua cấp độ.
Sử dụng các điểm mốc để hỗ trợ việc chỉ đường
Các phần tử HTML5 như main, nav và aside đóng vai trò là các điểm đánh dấu hoặc các vùng đặc biệt trên trang mà trình đọc màn hình có thể chuyển đến.
Hãy dùng thẻ mốc để xác định các phần chính của trang, thay vì dựa vào div. Hãy cẩn thận để không đi quá đà vì việc có quá nhiều điểm mốc có thể gây choáng ngợp. Ví dụ: chỉ sử dụng một phần tử main thay vì 3 hoặc 4.
Lighthouse khuyên bạn nên kiểm tra trang web của mình theo cách thủ công để kiểm tra xem "các phần tử mốc HTML5 được sử dụng để cải thiện tính năng điều hướng". Bạn có thể sử dụng danh sách các phần tử mốc này để kiểm tra trang của mình.
Bỏ qua nội dung lặp lại bằng đường liên kết bỏ qua
Nhiều trang web chứa tính năng điều hướng lặp lại trong tiêu đề, điều này có thể gây khó chịu khi điều hướng bằng công nghệ hỗ trợ. Sử dụng đường liên kết bỏ qua để cho phép người dùng bỏ qua nội dung này.
Đường liên kết bỏ qua là một đường liên kết ngoài màn hình luôn là mục có thể làm tâm điểm đầu tiên trong DOM. Thông thường, URL này chứa một đường liên kết trong trang đến nội dung chính của trang. Vì đây là phần tử đầu tiên trong DOM, nên bạn chỉ cần thực hiện một hành động duy nhất từ công nghệ hỗ trợ để lấy tiêu điểm vào phần tử đó và bỏ qua thao tác điều hướng lặp lại.
<!-- index.html -->
<a class="skip-link" href="#main">Skip to main</a>
…
<main id="main">
[Main content]
</main>
/* style.css */
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: #000000;
color: white;
padding: 8px;
z-index: 100;
}
.skip-link:focus {
top: 0;
}
Nhiều trang web phổ biến như GitHub, The NY Times và Wikipedia đều chứa đường liên kết bỏ qua. Hãy thử truy cập vào các cửa sổ đó rồi nhấn phím TAB trên bàn phím một vài lần.
Lighthouse có thể giúp bạn kiểm tra xem trang của bạn có chứa đường liên kết bỏ qua hay không. Chạy lại quy trình kiểm tra Hỗ trợ tiếp cận và tìm kết quả kiểm tra Trang chứa tiêu đề, đường liên kết bỏ qua hoặc vùng mốc.