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 mốc cụ thể. Trên thực tế, một cuộc khảo sát người dùng trình đọc màn hình cho thấy họ thường điều hướng một trang lạ bằng cách khám phá các tiêu đề.
Bằng cách sử dụng tiêu đề và phần tử điểm đánh dấu chính xá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ạch ra nội dung trang
Sử dụng các phần tử h1 – h6 để tạo một dàn ý có cấu trúc cho trang của bạn. Mục tiêu là tạo một bộ khung hoặc cấu trúc của trang để bất kỳ ai điều hướng theo tiêu đề đều có thể hình dung được.
Một phương pháp phổ biến là sử dụng một h1 cho tiêu đề chính hoặc biểu trưng 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 phần phụ 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 đề
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 sao cho phù hợp với thiết kế của họ. Đây được coi là một phản mẫu vì nó phá vỡ mô hình phác thảo.
Thay vì dựa vào kích thước phông 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à đừng bỏ qua các cấp độ.
Ví dụ: trang web này có một phần gọi là "TIN NỔI BẬT", theo sau là 2 tiêu đề:
Tiêu đề của phần "TIN TỨC" có thể là h2 và tiêu đề phụ có thể là phần tử h3.
Vì font-size cho "IN THE NEWS" (TIN TỨC) nhỏ hơn dòng tiêu đề, nên bạn có thể muốn đặt dòng tiêu đề cho câu chuyện đầu tiên là h2 và đặt "IN THE NEWS" là h3. Mặc dù có thể phù hợp với kiểu mặc định của trình duyệt, nhưng điều đó sẽ làm hỏng đường viền được truyền tải đến người dùng trình đọc màn hình!
Mặc dù điều này có vẻ không hợp lý, nhưng không quan trọng nếu về mặt hình ảnh, các phần tử h3 và h4 lớn hơn các phần tử h2 hoặc h1 tương ứng.
Điều quan trọng là bố cục được truyền tải bằng các phần tử và thứ tự của các phần tử.
Bạn có thể sử dụng Lighthouse để kiểm tra xem trang của mình có bỏ qua cấp tiêu đề nào hay không. Chạy bài kiểm tra Hỗ trợ tiếp cận (Lighthouse > Tuỳ chọn > Hỗ trợ tiếp cận) và xem kết quả của bài kiểm tra Tiêu đề không bỏ qua cấp độ.
Sử dụng điểm mốc để hỗ trợ việc điều hướng
Các phần tử HTML5 như main, nav và aside đóng vai trò là đ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.
Sử dụng thẻ điểm đánh dấu để xác định các phần chính trên trang thay vì dựa vào div. Hãy cẩn thận đừng thêm quá nhiều địa điểm nổi bật vì điều này có thể gây khó chịu. Ví dụ: chỉ sử dụng một phần tử main thay vì 3 hoặc 4 phần tử.
Lighthouse đề xuất bạn kiểm tra trang web theo cách thủ công để đảm bảo rằng "Các phần tử HTML5 landmark được dùng để cải thiện hoạt độ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 trùng lặp bằng đường liên kết bỏ qua
Nhiều trang web có phần đ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 điểm neo ngoài màn hình, luôn là mục đầu tiên có thể đặt tiêu điểm trong DOM. Thông thường, phần 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 công nghệ hỗ trợ chỉ cần một thao tác duy nhất để lấy tiêu điểm và bỏ qua thao tác điều hướng lặp đi 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 có đường liên kết bỏ qua. Hãy thử truy cập vào các trang web này và nhấn phím TAB trên bàn phím 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 khả năng tiếp cận và xem kết quả của quy trình kiểm tra Trang này chứa tiêu đề, phần tử liên kết bỏ qua hoặc vùng mốc.