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ác công nghệ hỗ trợ sử dụng cây hỗ trợ tiếp cận để tạo ra một 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 có ngữ nghĩa và biểu đạt mang lại cho bạn nhiều khả năng hỗ trợ 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ó sẵn cả ngữ nghĩa và hành vi hỗ trợ.
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, 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 hoạt động điều hướng. Trong một trang đơn giản có nhiều tuỳ chọ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 thông tin mình 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 trang tổng hợp tin tức, việc đọc từ trên xuống dưới không phải là việc thiết thực. Bạn cần có một cách để điều hướng hiệu quả qua nội dung.
Các nhà phát triển thường có quan niệm sai lầm rằng trình đọc màn hình rất tẻ nhạt và chậm sử dụng, hoặc rằng trình đọc màn hình phải lấy tiêu điểm để trình đọc màn hình tìm được mọi nội dung trên màn hình. 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. Hầu hết trình đọc màn hình đều có những cách đơn giản để tách riêng và quét danh sách các tiêu đề trang, một tính năng quan trọng có tên 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, không chỉ đối với thứ tự tiêu điểm mà còn đối với thứ tự trình đọc màn hình. Khi thử nghiệm với các 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 với các trình đọc màn hình nói chung. Do 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 dựa trên cây DOM, nên thứ tự mà trình đọc màn hình nhận biết sẽ dựa trên thứ tự DOM. Điều này đồng nghĩa với việc một 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 nhau để biểu thị mối quan hệ mẹ con giữa các khối nội dung. Danh sách kiểm tra WebAIM nhiều lần đề cập đế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 đề như 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õ "từng phần nội dung được chỉ định bằng tiêu đề, nếu 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 đề ra ngoài màn hình để trình đọc màn hình và công nghệ hỗ trợ khác chỉ truy cập được vào các 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à một cách hay để chứa tiêu đề khi 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 di chuyển trong trang, nhưng vẫn có những thành phần khác mà họ có thể dùng để di chuyển trên trang, trong đó có đường liên kết, thanh điều khiển biểu mẫu và dấu 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 riêng và quét danh sách các tiêu đề trang) để truy cập vào danh sách các đường liên kết trên trang. Đôi khi, như trên wiki có nhiều đường liên kết để người đọc có thể tìm kiếm thuật ngữ trong các đường liên kết đó. Điều này 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ụ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, những đích đến đường 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 về ứng dụng trang đơn này. - Các nút được triển khai bằng đường liên kết. Các điều 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ẻ ký tự liên kết bằng một nút thực và tạo kiểu 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 dùng được cho trình đọc màn hình. Để đả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.
Văn bản liên kết kém cũng là một vấn đề khác. Văn bản nhấp vào được, 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ề 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 đ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à chuyển thẳng đến 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ụ: trình đọc màn hình có thể phát âm "Udacity" là "oo-dacity", hoặc đọc một 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. Mộ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 này và họ đang xem xét nó.
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 văn bản viết đúng ngữ âm chỉ dành cho trình đọc màn hình. Dưới đây là một quy tắc đơn giản cho lỗi đánh vần phiên âm: đừng làm vậy; điều này chỉ khiến vấn đề trở nên tệ hơn! Chẳng hạn, nếu người dùng đang sử dụng màn hình chữ nổi, thì từ đó sẽ bị viết sai chính tả và khiến người dùng nhầm lẫn hơn. Trình đọc màn hình cho phép viết thành tiếng các từ, vì vậy, hãy để người đọc kiểm soát trải nghiệm của họ và quyết định khi nào 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 người đọc tìm thấy nội dung chính và một nhóm các địa danh điều hướng do các phần tử dấu mốc 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 các gợi ý về cấu trúc trong trang mà không buộc bất kỳ kiểu nào tích hợp sẵn (bạn vẫn nên làm 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 thức rõ ràng, mô tả cụ thể 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.