Vai trò của ngữ nghĩa trong việc điều hướng trang
Bạn đã tìm hiểu về các thành phần tương tác, ngữ nghĩa và cách công nghệ hỗ trợ sử dụng cây hỗ trợ tiếp cận để tạo trải nghiệm người dùng khác cho người dùng. Bạn có thể thấy rằng việc viết HTML có ngữ nghĩa và có tính biểu đạt mang lại cho bạn rất nhiều khả năng tiếp cận mà không cần tốn nhiều công sức, vì nhiều phần tử tiêu chuẩn có cả ngữ nghĩa và hành vi hỗ trợ được tích hợp sẵn.
Trong bài học này, chúng ta sẽ đề cập đến một số ngữ nghĩa ít rõ ràng nhưng rất quan trọng cho người dùng trình đọc màn hình, đặc biệt là liên quan đến hoạt động điều hướng. Trong một trang đơn giản với nhiều quyền kiểm soát nhưng không có nhiều nội dung, bạn có thể dễ dàng quét trang để tìm nội dung bạn cần. Tuy nhiên, trên một trang có nhiều nội dung, chẳng hạn như mục nhập trên Wikipedia hoặc tin tức tổng hợp trang web, thì việc đọc từ trên xuống là không thiết thực; bạn cần cách khám phá nội dung hiệu quả.
Các nhà phát triển thường quan niệm sai lầm rằng trình đọc màn hình là công cụ tẻ nhạt và chậm chạp để sử dụng hoặc mọi nội dung trên màn hình phải lấy được làm tâm điểm cho màn hình độc giả tìm thấy nó. Thường thì không phải vậy.
Người dùng trình đọc màn hình thường dựa vào danh sách tiêu đề để tìm thông tin. Thường gặp nhất trình đọc màn hình có những cách đơn giản để tách riêng và quét danh sách tiêu đề trang, tính năng quan trọng được gọi là rotor. Hãy xem cách sử dụng tiêu đề HTML hiệu quả để hỗ trợ tính năng này.
Sử dụng tiêu đề một cách hiệu quả
Trước tiên, hãy nhắc lại điểm trước đó: Thứ tự DOM rất quan trọng, không chỉ đối với thứ tự tiêu điểm nhưng dành cho thứ tự trình đọc màn hình. Khi bạn thử nghiệm với trình đọc màn hình chẳng hạn như VoiceOver, NVDA, JAWS và ChromeVox, bạn sẽ thấy danh sách tiêu đề như sau thứ tự DOM thay vì thứ tự hình ảnh.
Điều này đúng với các trình đọc màn hình nói chung. Vì trình đọc màn hình tương tác với cây hỗ trợ tiếp cận và cây hỗ trợ tiếp cận đều dựa trên cây DOM, do đó, thứ tự mà trình đọc màn hình nhận biết được trực tiếp dựa trên thứ tự DOM. Chiến dịch này có nghĩa là cấu trúc tiêu đề phù hợp trở nên quan trọng hơn bao giờ hết.
Trong hầu hết các trang có cấu trúc hợp lý, các cấp tiêu đề được lồng vào nhau để cho biết mối quan hệ mẹ con giữa các khối nội dung. WebAIM danh sách kiểm tra đề cập đến nhiều lần kỹ thuật.
- 1.3.1 đề cập đến "Đánh dấu ngữ nghĩa được dùng để chỉ định tiêu đề"
- 2.4.1 đề cập đến cấu trúc tiêu đề như một kỹ thuật để bỏ qua các khối kiếm nhiều tiền nhất
- 2.4.6 thảo luận một số chi tiết để viết tiêu đề hữu ích
- 2.4.10 nêu rõ "các phần nội dung riêng lẻ được chỉ định bằng các tiêu đề, khi thích hợp"
Không phải tiêu đề nào cũng phải hiển thị trên màn hình. Ví dụ: Wikipedia sử dụng kỹ thuật cố ý đặt một số tiêu đề ngoài màn hình để làm cho chúng chỉ có thể truy cập đối với trình đọc màn hình và công nghệ hỗ trợ khác.
<style>
.sr-only {
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}
</style>
<h2 class="sr-only">This heading is offscreen.</h2>
Đối với các ứng dụng phức tạp, đây có thể là một cách hay để phù hợp với tiêu đề thiết kế hình ảnh không cần hoặc không có chỗ cho tiêu đề hiển thị.
Các tuỳ chọn di chuyển khác
Mặc dù các trang có tiêu đề phù hợp giúp người dùng trình đọc màn hình dễ dàng thao tác, nhưng các phần tử khác mà họ có thể sử dụng để di chuyển quanh trang, bao gồm đường liên kết, biểu mẫu kiểm soát và điểm mốc.
Người đọc có thể sử dụng tính năng rô-to của trình đọc màn hình (một cách dễ dàng để tách biệt và quét danh sách tiêu đề trang) để truy cập vào danh sách đường liên kết trên trang. Đôi khi, như trên wiki, có rất nhiều liên kết nên người đọc có thể tìm kiếm trong liên kết. Điều này giới hạn số lần truy cập vào các liên kết thực sự chứa thay vì mỗi lần xuất hiện của cụm từ đó trên trang.
Tính năng này chỉ hữu ích nếu trình đọc màn hình có thể tìm thấy các đường liên kết văn bản có ý nghĩa. Ví dụ: sau đây là một số mẫu phổ biến tạo ra đường liên kết khó tìm thấy.
- Thẻ liên kết không có thuộc tính
href. Thường được dùng trong một trang , các đích liên kết này sẽ gây ra sự cố cho trình đọc màn hình. Bạn có thể hãy đọc thêm trong bài viết này về ứng dụng trang đơn. - Các nút được triển khai bằng đường liên kết. Điều này khiến trình đọc màn hình diễn giải nội dung dưới dạng một đường liên kết và chức năng của nút bị mất. Cho trong những trường hợp này, hãy thay thế thẻ liên kết bằng một nút thực và tạo kiểu cho nó một cách phù hợp.
- Hình ảnh được dùng làm nội dung đường liên kết. Đôi khi, hình ảnh được liên kết có thể
không sử dụng được với trình đọc màn hình. Để đảm bảo rằng đường liên kết được hiển thị đúng cách với
công nghệ hỗ trợ, hãy đảm bảo hình ảnh có văn bản thuộc tính
alt.
Văn bản liên kết kém cũng là một vấn đề khác. Văn bản có thể nhấp vào, chẳng hạn như "tìm hiểu thêm" hoặc "nhấp vào đây" không cung cấp thông tin ngữ nghĩa về nơi liên kết đến. Thay vào đó, hãy sử dụng văn bản mô tả như "tìm hiểu thêm về thiết kế thích ứng" hoặc "xem canvas này hướng dẫn" để giúp trình đọc màn hình cung cấp ngữ cảnh có ý nghĩa về các đường liên kết.
Rô to cũng có thể truy xuất danh sách điều khiển biểu mẫu. Với danh sách này, độc giả có thể tìm kiếm các mục cụ thể và truy cập trực tiếp vào các mục đó.
Một lỗi phổ biến mà trình đọc màn hình mắc phải là phát âm. Ví dụ: màn hình người đọc có thể phát âm "Udacity" dưới dạng "oo-dacity" hoặc đọc số điện thoại dưới dạng số nguyên lớn hoặc đọc văn bản được viết hoa như thể đó là từ viết tắt. Điều thú vị là người dùng trình đọc màn hình đã quen thuộc với điều này và sẽ tìm hiểu sâu hơn cân nhắc.
Một số nhà phát triển cố gắng cải thiện tình trạng này bằng cách cung cấp chế độ chỉ có trình đọc màn hình văn bản được đánh vần theo ngữ âm. Dưới đây là quy tắc đơn giản cho đánh vần phiên âm: đừng làm việc này; mà chỉ khiến vấn đề trở nên tệ hơn! Ví dụ: nếu người dùng đang sử dụng màn hình chữ nổi thì từ đó sẽ bị đánh vần không chính xác, dẫn đến lỗi nhầm lẫn. Trình đọc màn hình cho phép viết to các từ, vì vậy, hãy để dành cho độc giả kiểm soát trải nghiệm của họ và quyết định thời điểm cần thiết.
Người đọc có thể sử dụng rô-to để xem danh sách địa danh. Danh sách này giúp độc giả tìm nội dung chính và một nhóm địa danh điều hướng do HTML cung cấp các phần tử mốc.
HTML5 đã giới thiệu một số phần tử mới giúp xác định cấu trúc ngữ nghĩa của
trang, bao gồm header, footer, nav, article, section, main và
aside. Những yếu tố này cung cấp các gợi ý cấu trúc cụ thể trong trang
mà không buộc bất kỳ kiểu tích hợp nào (bạn vẫn nên làm với CSS).
Các thành phần cấu trúc ngữ nghĩa thay thế nhiều khối div lặp lại, và
cung cấp một cách rõ ràng, có tính mô tả hơn để thể hiện cấu trúc trang một cách trực quan
cho cả tác giả và người đọc.