WCAG 2.2 Hướng dẫn ‘2.4.9 Mục đích của liên kết (liên kết đơn)’ Cấp AAA
Mở đầu
Trong “2.4.9 Mục đích của liên kết (liên kết đơn)” của WCAG 2.2, yêu cầu đảm bảo rằng mục đích của liên kết có thể được hiểu rõ chỉ từ văn bản của liên kết. Tiêu chí này nhằm mục đích cải thiện tính dễ hiểu của liên kết, đặc biệt là đối với người dùng trình đọc màn hình và người dùng điều khiển bằng bàn phím.
1. Khái quát tiêu chí
Yêu cầu
- Có thể xác định mục đích của liên kết chỉ từ văn bản của liên kết.
- Ngoại trừ trường hợp liên kết đến một địa chỉ không rõ ràng, cần phải đáp ứng tiêu chí này.
2. Phương pháp triển khai
a. Cung cấp văn bản liên kết rõ ràng
Đảm bảo rằng mục đích của liên kết có thể hiểu được chỉ từ văn bản của liên kết.
Ví dụ về văn bản liên kết phù hợp
HTML
<a href="/about">Tổng quan công ty</a>
- Chỉ với văn bản liên kết “Tổng quan công ty”, người dùng có thể hiểu được mục đích của liên kết.
Ví dụ về văn bản liên kết không phù hợp
<a href="/about">Nhấn vào đây</a>
- Với “Nhấn vào đây”, người dùng không thể hiểu được mục đích của liên kết.
b. Sử dụng thuộc tính ARIA để thêm thông tin bổ sung
Khi không thể thay đổi văn bản liên kết, sử dụng aria-label hoặc aria-labelledby để cung cấp thông tin bổ sung.
Ví dụ: Sử dụng aria-label
HTML
<a href="/download" aria-label="Tải về catalog mới nhất">Tải về</a>
- Về mặt thị giác, chỉ có “Tải về” được hiển thị, nhưng trình đọc màn hình sẽ đọc lên mô tả chi tiết.
Ví dụ: Sử dụng aria-labelledby
HTML
<p id="catalogDesc">Tải về catalog mới nhất tại đây</p>
<a href="/download" aria-labelledby="catalogDesc">Tải về</a>
- Sử dụng aria-labelledby để thêm thông tin bổ sung
c. Trong trường hợp liên kết hình ảnh, văn bản thay thế (alt text) có thể được sử dụng để mô tả mục đích của liên kết.
Khi liên kết là hình ảnh, hãy thiết lập thuộc tính alt một cách phù hợp
Ví dụ về liên kết hình ảnh phù hợp
HTML
<a href="/about">
<img src="about-icon.png" alt="Tổng quan công ty">
</a>
- Sử dụng thuộc tính alt để làm rõ mục đích của liên kết
d. Cho phép người dùng chọn độ dài của văn bản liên kết
Cung cấp cơ chế để người dùng có thể chọn dạng văn bản liên kết ngắn hoặc dài.
Ví dụ: Thay đổi văn bản liên kết bằng script
HTML
<a href="/products" id="link">Xem trang sản phẩm</a>
<button id="toggleLinkText">Rút ngắn văn bản liên kết</button>
JavaScript
const link = document.getElementById('link');
const toggleButton = document.getElementById('toggleLinkText');
toggleButton.addEventListener('click', () => {
if (link.textContent === 'Xem trang sản phẩm') {
link.textContent = 'Trang sản phẩm';
toggleButton.textContent = 'Kéo dài văn bản liên kết';
} else {
link.textContent = 'Xem trang sản phẩm';
toggleButton.textContent = 'Rút ngắn văn bản liên kết';
}
});
3. Các ví dụ thất bại phổ biến và biện pháp cải thiện
a. Văn bản liên kết không rõ ràng
Ví dụ thất bại
<a href="/details">Xem chi tiết tại đây</a>
Biện pháp cải thiện
<a href="/details">Xem chi tiết sản phẩm</a>
b. Liên kết hình ảnh không có thông tin bổ sung
Ví dụ thất bại
<a href="/download">
<img src="download-icon.png">
</a>
Biện pháp cải thiện
<a href="/download">
<img src="download-icon.png" alt="Tải về catalog">
</a>
4. Lợi ích của khả năng truy cập (accessibility)
a. Chú ý đến người dùng trình đọc màn hình
- Với văn bản liên kết rõ ràng, người dùng có thể dễ dàng hiểu được mục đích của liên kết.
b. Ngăn ngừa việc nhấn nhầm
- Vì mục đích của liên kết được làm rõ, khả năng người dùng nhấn nhầm vào liên kết sẽ giảm đi.
c. Cải thiện trải nghiệm người dùng
- Khi các liên kết trở nên trực quan và dễ hiểu, tính dễ sử dụng của toàn bộ trang web sẽ được cải thiện.
5. Phương pháp kiểm tra
a. Kiểm tra thủ công
- Kiểm tra xem văn bản liên kết có chỉ ra đúng mục đích của nó hay không
- Nếu có thông tin bổ sung, hãy kiểm tra xem trình đọc màn hình có đọc đúng thông tin đó không
b. Công cụ kiểm tra tự động
- Sử dụng các công cụ như 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
2.4.9 Mục đích của liên kết (liên kết đơn)" trong WCAG 2.2 nhằm làm rõ mục đích của liên kết chỉ thông qua văn bản của liên kết, từ đó tạo ra nội dung web dễ sử dụng cho tất cả người dùng.
Điểm cần lưu ý khi triển khai
- Làm cho văn bản liên kết ngắn gọn và dễ hiểu.
- Cung cấp thông tin bổ sung bằng thuộc tính ARIA khi cần thiết.
- Trong trường hợp liên kết hình ảnh, hãy thiết lập văn bản thay thế (alt text) phù hợp.
Điều này giúp cung cấp nội dung web dễ sử dụng và dễ truy cập 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.