Vai trò của ngữ nghĩa trong việc điều hướng trang
Bạn đã tìm hiểu về các đặc điểm hữu dụng, 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 trải nghiệm thay thế cho người dùng. Bạn có thể thấy rằng việc viết HTML có ngữ nghĩa, biểu cảm sẽ giúp bạn có được nhiều tính năng hỗ trợ tiếp cận mà không tốn nhiều công sức, vì nhiều phần tử chuẩn có cả ngữ nghĩa và hành vi hỗ trợ 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 thao tác điều hướng. Trong một trang đơn giản có nhiều thành phần đ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 có nhiều nội dung, chẳng hạn như một mục trên Wikipedia hoặc một trang tổng hợp tin tức, bạn không thể đọc hết mọi nội dung từ trên xuống dưới; bạn cần một cách để di chuyển 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 khi sử dụng, hoặc mọi thứ trên màn hình đều phải có thể lấy tiêu điểm để trình đọc màn hình có thể tìm thấy. 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 đề để xác định vị trí thông tin. Hầu hết trình đọc màn hình đều có cách dễ dàng để tách riêng và quét danh sách tiêu đề trang, một tính năng quan trọng được gọi là rotor (bộ quét). Hãy xem cách chúng ta có thể sử dụng tiêu đề HTML một cách hiệu quả để hỗ trợ tính năng này.
Sử dụng tiêu đề hiệu quả
Trước tiên, hãy nhắc lại một điểm trước đó: Thứ tự DOM rất quan trọng, 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 hầu hết các trình đọc màn hình. 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 dựa trên cây DOM, nên thứ tự mà trình đọc màn hình nhận thấy trực tiếp dựa trên thứ tự DOM. Điều này có nghĩa là cấu trúc tiêu đề phù hợp quan trọng hơn bao giờ hết.
Trong hầu hết các trang có cấu trúc tốt, các cấp tiêu đề được lồng để 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 liên tục đề cập đến kỹ thuật này.
- 1.3.1 đề cập đến "Tiêu đề được đánh dấu bằng mã ngữ nghĩa"
- 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ố 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 đề, 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 một kỹ thuật cố ý đặt một số tiêu đề ra khỏi màn hình để chỉ cho phép duy nhất trình đọc màn hình và các công nghệ hỗ trợ khác truy cập 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à cách hay để chứa 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 tuỳ chọn điều hướng 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, nhưng họ cũng có thể sử dụng các thành phần khác để di chuyển trên trang, bao gồm đường liên kết, các thành phần đ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 con lăn 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 tiêu đề trang) để truy cập vào danh sách đường liên kết trên trang. Đôi khi, như trên một trang wiki, có nhiều đường liên kết, vì vậy người đọc có thể tìm kiếm một từ khoá trong các đường liên kết đó. Điều này giới hạn số lượt truy cập vào 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 của đường liên kết có ý nghĩa. Ví dụ: sau đây là một số mẫu phổ biến khiến bạn khó tìm thấy đường liên kết.
- Thẻ neo 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 một trang. - 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 đường liên kết và chức năng của nút bị mất. Đối với các trường hợp này, hãy thay thế thẻ neo bằng một nút thực và tạo kiểu cho nút đó sao cho phù hợp.
- Hình ảnh được dùng làm nội dung đường liên kết. Đôi khi, trình đọc màn hình không thể sử dụng các hình ảnh được liên kết khi cần. Để đảm bảo rằng đườ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 không phù hợp 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 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.
Rotor cũng có thể truy xuất danh sách thành phần điều khiển biểu mẫu. Khi sử dụng danh sách này, người đọc 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 thường gặp của trình đọc màn hình là phát âm. Ví dụ: một 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 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 đã quen với sự cố này và cân nhắc đến điều này.
Một số nhà phát triển cố gắng cải thiện tình huống 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 âm vị học. Dưới đây là một quy tắc đơn giản về cách viết phiên âm: đừng làm như vậy; việc này 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, từ sẽ được viết sai chính tả, dẫn đến sự nhầm lẫn. Trình đọc màn hình cho phép đọc to các từ, vì vậy, hãy để trình đọc 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 con quay để 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 tập hợp các điểm đánh dấu điều hướng do các phần tử điểm đá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 cung cấp cụ thể các gợi ý về cấu trúc trong trang mà không buộc phải áp dụng bất kỳ kiểu tích hợp nào (mà 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 và cung cấp cách rõ ràng hơn, mô tả hơn để thể hiện trực quan cấu trúc trang cho cả tác giả và người đọc.