Trình đọc màn hình có các lệnh để nhanh chóng chuyển đổi giữa các tiêu đề hoặc đến các khu vực điểm đánh dấu cụ thể. Trên thực tế, một cuộc khảo sát về người dùng trình đọc màn hình cho thấy rằng họ thường di chuyển trên một trang lạ bằng cách khám phá các tiêu đề.
Bằng cách sử dụng các phần tử điểm mốc và tiê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ợ.
Dùng tiêu đề để trình bày bố cục 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 khung hoặc giàn đỡ 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 dòng tiêu đề chính hoặc biểu trưng trên 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ấp tiêu đề
Nhà phát triển thường bỏ qua các cấp tiêu đề để sử dụng các 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à phản mẫu vì nó phá vỡ mô hình đường viền.
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à không bỏ qua các cấp.
Ví dụ: trang web này có một mục có tên là "TIN TỨC", theo sau là hai tiêu đề:
Tiêu đề phần "TIN TỨC" có thể là h2 và các dòng tiêu đề phụ có thể là phần tử h3.
Vì font-size cho "TIN TỨC" nhỏ hơn so với dòng tiêu đề, nên bạn có thể đặt dòng tiêu đề cho tin bài đầu tiên là h2 và đặt "TIN TỨC" là h3. Mặc dù điều đó 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 cấp tiêu đề nào hay không. Chạy quy trình kiểm tra Hỗ trợ tiếp cận (Lighthouse > Options > Accessibility (Lighthouse > Tuỳ chọn > Hỗ trợ tiếp cận)) rồi xem kết quả của quy trình kiểm tra Headings don't skip levels (Tiêu đề không bỏ qua cấp).
Sử dụng các địa điểm nổi bật để hỗ trợ đ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 quá đà vì việc có quá nhiều điểm đánh dấu 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 đề 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ử điểm đánh dấu HTML5 được dùng để cải thiện khả năng điều hướng". Bạn có thể sử dụng danh sách các phần tử điểm tham chiếu 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 chứa các thành 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 có thể làm tâm điểm đầu tiên trong DOM. Thường thì thẻ 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 để lấy tiêu điểm 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 New York Times và Wikipedia đều chứa đường liên kết bỏ qua. Hãy thử truy cập vào các thiết bị đó rồi 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 mình 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ả 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.