Trình đọc màn hình có các lệnh để chuyển nhanh giữa các tiêu đề hoặc sang các địa danh. Trên thực tế, một khảo sát về người dùng trình đọc màn hình nhận thấy rằng họ thường điều hướng đến một trang lạ bằng cách khám phá tiêu đề.
Bằng cách sử dụng các phần tử tiêu đề và mốc chính xác, bạn có thể cải thiện trải nghiệm điều hướng trên trang web của bạn 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ử từ h1 đến h6 để tạo dàn ý cấu trúc cho trang. Mục tiêu là
để tạo bộ khung hoặc bộ khung của trang sao cho bất kỳ ai điều hướng
tiêu đề có thể hình thành
một bức tranh trong tâm trí.
Một phương pháp phổ biến là sử dụng một h1 duy nhất cho dòng tiêu đề hoặc biểu trưng chính 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ác cấp tiêu đề
Nhà phát triển thường bỏ qua 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 bị coi là phản mẫu vì nó làm hỏng mô hình bố cục.
Thay vì phụ thuộc 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à "TRONG TIN TỨC", theo sau là hai dòng tiêu đề:
Tiêu đề phần "TRONG TIN TỨC", có thể là h2 và
dòng tiêu đề có thể là cả hai phần tử h3.
Vì font-size cho "IN THE NEWS" nhỏ hơn so với dòng tiêu đề, thì
muốn đặt tiêu đề cho tin bài đầu tiên thành h2 và
"TIN TỨC" h3. Mặc dù kiểu đó có thể phù hợp với kiểu mặc định của trình duyệt,
nó sẽ phá vỡ bố cục được truyền tải đế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 bạn có bỏ qua bất kỳ cấp tiêu đề nào hay không. Chạy Kiểm tra khả năng hỗ trợ tiếp cận (Lighthouse > Tuỳ chọn > Hỗ trợ tiếp cận) và giao diện để biết kết quả của bài kiểm tra Tiêu đề không bỏ qua cấp độ.
Sử dụng địa danh để hỗ trợ tìm đường
Các phần tử HTML5 như main, nav và aside đóng vai trò là điểm mốc hoặc
các vùng đặc biệt trên trang mà trình đọc màn hình có thể chuyển tới.
Dùng thẻ mốc để xác định các phần chính trên trang, thay vì dựa vào
div giây. Hãy cẩn thận để không vượt qua vì có quá nhiều mốc có thể
quá tải. Ví dụ: chỉ dùng một phần tử main thay vì 3 hoặc
4 điểm.
Lighthouse khuyên bạn nên kiểm tra trang web theo cách thủ công để kiểm tra xem "Điểm mốc HTML5" được dùng để cải thiện khả năng điều hướng." Bạn có thể dùng danh sách mốc này phần tử để kiểm tra trang của bạn.
Bỏ qua nội dung lặp lại bằng đường liên kết bỏ qua
Nhiều trang web chứa điều hướng lặp lại trong tiêu đề, điều này có thể gây khó chịu để khám phá 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, thẻ chứa một đường liên kết đến nội dung chính của trang. Vì phần tử đầu tiên trong DOM, chỉ cần một hành động duy nhất từ công nghệ hỗ trợ để tập trung và bỏ qua việ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 tất cả
chứa liên kết bỏ qua. Hãy thử truy cập vào các thiết bị đó và 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 Kiểm tra lại khả năng hỗ trợ tiếp cận và tìm kết quả của Trang chứa tiêu đề, bỏ qua đường liên kết hoặc kiểm tra khu vực mốc.