Hướng dẫn WCAG 2.2 ‘2.4.4 Mục đích của liên kết (trong ngữ cảnh)’ Mức A
Mở đầu
Tiêu chí “2.4.4 Mục đích của liên kết (trong ngữ cảnh)” trong WCAG 2.2 yêu cầu mục đích của liên kết phải có thể hiểu được từ văn bản liên kết đơn lẻ hoặc sự kết hợp giữa văn bản liên kết và ngữ cảnh của nó. Tiêu chí này nhằm giúp người dùng, đặc biệt là những người sử dụng phần mềm đọc màn hình hoặc thao tác bằng bàn phím, có thể hiểu chính xác mục đích của liên kết.
1. Tổng quan về tiêu chuẩn
Yêu cầu
- Mục đích của liên kết phải được làm rõ ràng từ văn bản liên kết đơn lẻ hoặc sự kết hợp giữa văn bản liên kết và ngữ cảnh của nó (có thể xác định được một cách lập trình).
- Trừ khi mục đích của liên kết không rõ ràng, hãy cung cấp liên kết có mục đích rõ ràng và dễ hiểu.
2. Phương pháp triển khai
a. Rõ ràng làm rõ mục đích của liên kết trong văn bản liên kết
Ví dụ về văn bản liên kết phù hợp
HTML
<a href="/contact">Liên hệ với chúng tôi tại đây</a>
- Với liên kết này, mục đích của liên kết được làm rõ chỉ từ văn bản liên kết.
Ví dụ về văn bản liên kết không phù hợp
<a href="/contact">Ở đây</a>
- Chỉ với ‘ở đây’, mục đích của liên kết không rõ ràng
b. Thêm thông tin bổ sung về mục đích trong ngữ cảnh của liên kết
Khi văn bản liên kết đơn lẻ không đủ, sử dụng ngữ cảnh xung quanh để làm rõ mục đích của liên kết.
Ví dụ sử dụng ngữ cảnh
HTML
<p>Vui lòng xem chi tiết sản phẩm <a href="/product">tại đây</a></p>
- Nhờ vào ngữ cảnh của ‘chi tiết sản phẩm’, mục đích của liên kết được làm rõ
c. Sử dụng thuộc tính ARIA để làm rõ mục đích của liên kết
Sử dụng aria-label hoặc aria-labelledby để bổ sung thông tin không hiển thị trực quan, giúp người dùng phần mềm đọc màn hình hiểu được mục đích của liên kết.
Ví dụ: Sử dụng aria-label
HTML
<a href="/download" aria-label="Tải xuống catalog mới nhất</a>
- Về mặt thị giác chỉ hiển thị ‘Tải xuống’, nhưng phần mềm đọc màn hình sẽ đọc to mô tả chi tiết.
Ví dụ: Sử dụng aria-labelledby
HTML
<p id="catalogDesc">Tải xuống catalog mới nhất</p>
<a href="/download" aria-labelledby="catalogDesc">Ở đây</a>
- Văn bản liên kết ‘ở đây’ được bổ sung ngữ cảnh bằng aria-labelledby.
d. Cung cấp thông tin bổ sung bằng thuộc tính title.
Sử dụng thuộc tính title để cung cấp thông tin bổ sung về liên kết.
Ví dụ: Sử dụng thuộc tính title
HTML
<a href="/help" title="Liên kết đến trang trợ giúp</a>
3. Các ví dụ thất bại thường gặp và cách khắc phục
a. Văn bản liên kết không rõ ràng
Ví dụ thất bại
<a href="/details">Xem thêm</a>
Vấn đề
- Chỉ với ‘Xem thêm’, không thể biết được liên kết dẫn đến đâu hoặc chứa nội dung gì
Ví dụ cải thiện
<a href="/details">Xem thêm chi tiết sản phẩm</a>
b. Ngữ cảnh không thể được xác định một cách lập trình
Ví dụ thất bại
<p>Vui lòng xem chi tiết dưới đây</p>
<a href="/info">Ở đây</a>
Vấn đề
- Văn bản liên kết ‘ở đây’ sẽ mất đi ý nghĩa nếu tách ra khỏi ngữ cảnh
Ví dụ cải thiện
- Sử dụng văn bản liên kết rõ ràng hoặc bổ sung thông tin bằng aria-label.
<a href="/info" aria-label="Chi tiết thông tin sản phẩm">Ở đây</a>
4. Lợi ích của khả năng tiếp cận
a. Chú ý đến người dùng phần mềm đọc màn hình
- Nếu mục đích của liên kết rõ ràng, người dùng phần mềm đọc màn hình có thể điều hướng trang một cách hiệu quả.
b. Ngăn ngừa thao tác sai
- Văn bản liên kết rõ ràng giúp giảm thiểu rủi ro người dùng nhấp vào liên kết sai.
c. Cải thiện trải nghiệm người dùng
- Người dùng thông thường cũng sẽ dễ dàng hiểu được mục đích của liên kết, từ đó cung cấp nội dung đáng tin cậy hơn.
5. Phương pháp kiểm tra
a. Kiểm tra thủ công
- Kiểm tra từng văn bản liên kết và xác nhận xem mục đích của liên kết có rõ ràng hay không, cả khi nhìn riêng lẻ hay trong ngữ cảnh.
- Kiểm tra xem văn bản liên kết có được đọc đúng cách bởi phần mềm đọc màn hình không.
b. Công cụ kiểm tra tự động
- Sử dụng Axe hoặc WAVE để kiểm tra tính phù hợp của văn bản liên kết.
Tóm tắt
Tiêu chí “2.4.4 Mục đích của liên kết (trong ngữ cảnh)” trong WCAG 2.2 nhằm làm rõ mục đích của liên kết để ngăn ngừa sự nhầm lẫn của người dùng và giúp thao tác hiệu quả hơn.
Điểm cần chú ý khi triển khai
- Rõ ràng làm rõ mục đích của liên kết trong văn bản liên kết.
- Cung cấp thông tin bổ sung qua ngữ cảnh hoặc thuộc tính ARIA.
- Tránh sử dụng văn bản liên kết mơ hồ (ví dụ: ‘ở đây’, ‘xem thêm’).
Bằng cách thực hiện những điều này, bạn có thể cung cấp nội dung web dễ sử dụng cho tất cả người dùng.
Chúng tôi đã phát hành UUU Web Accessibility Widget Tool, công cụ giúp dễ dàng triển khai khả năng truy cập web. Nếu bạn quan tâm đến việc cải thiện khả năng truy cập, hãy xem thêm thông tin chi tiết.