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, 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 thay thế cho người dùng. Bạn có thể thấy rằng việc viết HTML ngữ nghĩa, biểu đạt sẽ giúp bạn dễ tiếp cận mà không mất nhiều công sức, vì nhiều phần tử chuẩn có cả mặt 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 hơn nhưng rất quan trọng đối với người dùng trình đọc màn hình, đặc biệt là liên quan đến tính năng điều hướng. Trong một trang đơn giản có rất nhiều chế độ điều khiển 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 mình cần. Tuy nhiên, trên một trang nhiều nội dung, chẳng hạn như một mục nhập Wikipedia hoặc một trình tổng hợp tin tức, không dễ để đọc hết mọi thứ từ trên xuống; bạn cần một cách để di chuyển hiệu quả giữa các nội dung.
Các nhà phát triển thường hiểu lầm rằng trình đọc màn hình rất tẻ nhạt và sử dụng chậm, hoặc trình đọc màn hình phải đặt mọi nội dung trên màn hình làm tâm điểm thì mới tìm được nội dung đó. Thường không phải như vậy.
Người dùng trình đọc màn hình thường dựa vào danh sách các tiêu đề để tìm thông tin. Hầu hết các trình đọc màn hình đều dễ dàng tách biệt và quét danh sách tiêu đề trang, một tính năng quan trọng được gọi là rotor. Hãy xem cách chúng ta có thể 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 một điểm trước đó: thứ tự DOM, không chỉ đối với thứ tự lấy nét mà còn đối với thứ tự của trình đọc màn hình. Khi thử nghiệm với trình đọc màn hình như VoiceOver, NVDA, JAWS và ChromeVox, bạn sẽ thấy danh sách tiêu đề tuân theo thứ tự DOM thay vì thứ tự hình ảnh.
Điều này đúng đối với 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 lại dựa trên cây DOM, nên thứ tự mà trình đọc màn hình nhận thấy sẽ trực tiếp dựa trên thứ tự DOM. Điều này đồng nghĩa với việc cấu trúc tiêu đề phù hợp quan trọng hơn bao giờ hết.
Trên hầu hết các trang có cấu trúc hợp lý, cấp tiêu đề được lồng vào để cho biết mối quan hệ mẹ con giữa các khối nội dung. Danh sách kiểm tra WebAIM đề cập nhiều lần đến kỹ thuật này.
- 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 đề là một kỹ thuật để bỏ qua các khối nội dung
- 2.4.6 thảo luận một số thông tin 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 tiêu đề, khi thích hợp"
Không phải tiêu đề nào cũng phải xuất hiện trên màn hình. Chẳng hạn, Wikipedia sử dụng kỹ thuật chủ ý đặt một số tiêu đề ngoài màn hình để cụ thể khiến trình đọc màn hình và công nghệ hỗ trợ khác chỉ có thể truy cập vào những tiêu đề đó.
<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à cách hay để điều chỉnh tiêu đề khi thiết kế hình ảnh không yêu cầu hoặc không có chỗ cho tiêu đề hiển thị.
Các cách di chuyển khác
Mặc dù các trang có tiêu đề phù hợp sẽ giúp người dùng trình đọc màn hình dễ dàng di chuyển, nhưng trình đọc màn hình cũng có thể sử dụng các thành phần khác để di chuyển xung quanh trang, bao gồm cả đường liên kết, chế độ điều khiển biểu mẫu và điểm đánh dấu.
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, giống như trên wiki, có rất nhiều đường liên kết nên người đọc có thể tìm kiếm một thuật ngữ trong các đường liên kết đó. Điều này sẽ giới hạn lượt truy cập đến các đường liên kết thực sự chứa cụm từ đó, 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à văn bản liên kết có ý nghĩa. Ví dụ: dưới đây là một số mẫu phổ biến khiến việc tìm đường liên kết trở nên khó khăn.
- Thẻ liên kết không có thuộc tính
href. Thường được dùng trong các ứng dụng trang đơn, các đích liên kết này gây ra sự cố cho trình đọc màn hình. Bạn có thể đọc thêm trong bài viết này về ứng dụng trang đơn. - Các nút được triển khai cùng đường liên kết. Các thao tác này khiến trình đọc màn hình hiểu nội dung là một đường liên kết và chức năng của nút bị mất. Đối với 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 thẻ đó sao cho phù hợp.
- Hình ảnh được dùng làm nội dung liên kết. Đôi khi, trình đọc màn hình có thể không sử dụng được hình ảnh được liên kết khi cần thiết. Để đảm bảo đường liên kết 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.
Một vấn đề khác là văn bản liên kết kém. Văn bản có thể nhấp vào 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ề vị trí của đường liên kết. 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 hướng dẫn về canvas này" để 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 kiểm soát biểu mẫu. Khi sử dụng danh sách này, độc giả có thể tìm kiếm các mục cụ thể và chuyển thẳng đến những 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ụ: trình đọc màn hình có thể phát âm "Udacity" là "oo-dacity" hoặc đọc số điện thoại dưới dạng một số nguyên lớn hoặc đọc văn bản 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 đã khá quen thuộc với điều lạ lùng này và hãy cân nhắc.
Một số nhà phát triển cố gắng cải thiện trường hợp này bằng cách cung cấp văn bản chỉ dành cho trình đọc màn hình được đánh vần theo ngữ âm. Sau đây là một quy tắc đơn giản về đánh vần phiên âm: đừng làm; điều này chỉ khiến vấn đề thêm nghiêm trọng! Chẳng hạn, nếu người dùng đang sử dụng màn hình chữ nổi, từ đó sẽ bị viết sai chính tả, dẫn đến sự nhầm lẫn nhiều hơn. Trình đọc màn hình cho phép đọc từ ngữ thành tiếng, vì vậy, hãy để trình đọc màn hình tự 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ô-bốt để xem danh sách điểm mốc. Danh sách này giúp người đọc tìm thấy nội dung chính và một tập hợp các địa danh điều hướng do các phần tử đánh dấu HTML cung cấp.
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. Các phần tử này cụ thể cung cấp gợi ý về cấu trúc trong trang mà không buộc phải tạo kiểu tích hợp nào (bạn vẫn nên thực hiện với CSS).
Các phần tử cấu trúc ngữ nghĩa thay thế nhiều khối div lặp lại, đồng thời cung cấp một cách rõ ràng, 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.