HTML2.4.4 Link Purpose (In Context) — mức A — yêu cầu đích đến của link phải suy ra được từ chữ trong link, hoặc từ ngữ cảnh chương trình đọc được (câu chứa nó, ô bảng, mục danh sách).
Vấn đề của "Xem thêm" nằm ở cách người dùng screen reader thật sự duyệt trang: họ mở danh sách toàn bộ link (phím K trong NVDA, rotor trong VoiceOver) để quét nhanh. Danh sách đó hiện ra mười dòng "Xem thêm" giống hệt nhau, tách khỏi mọi ngữ cảnh xung quanh.
<!-- yếu -->
<h3>Lộ trình Backend</h3>
<p>…</p>
<a href="/roadmap/backend">Xem thêm</a>
<!-- tốt: chữ link tự đứng được -->
<a href="/roadmap/backend">Xem lộ trình Backend</a>
<!-- hoặc giữ nhãn ngắn cho mắt, bổ nghĩa cho screen reader -->
<a href="/roadmap/backend">Xem thêm<span class="sr-only"> về lộ trình Backend</span></a>Lưu ý cách thứ ba giữ nguyên phần chữ nhìn thấy nên designer không phải đổi gì.
Link chỉ có icon thì bản thân nó không có chữ nào — phải cấp accessible name:
<a href="/gio-hang" aria-label="Giỏ hàng, 3 sản phẩm">
<ShoppingCart size={18} aria-hidden="true" />
</a>Icon phải aria-hidden="true" để screen reader không đọc trùng.
Hai điểm hay bị hỏi thêm:
- "Nhiều link cùng chữ nhưng khác đích" là lỗi nặng hơn "chữ chung chung": hai link "Tải xuống" trỏ hai file khác nhau khiến người dùng không cách nào chọn đúng.
- 2.4.4 chấp nhận ngữ cảnh xung quanh; muốn chữ link tự đứng một mình là tiêu chí 2.4.9, mức AAA — không bắt buộc cho dự án nhắm AA.