Khi lỗi này xuất hiện, screen reader có thể chỉ đọc: “link, link, link” mà không cung cấp bất kỳ thông tin nào về mục đích của liên kết. Đây là một lỗi nhỏ về mặt code, nhưng hậu quả lại lớn về accessibility và SEO.
Discernible name của link là gì
Discernible name là tên mà công nghệ hỗ trợ có thể nhận diện và đọc được để mô tả mục đích của một liên kết. Nói đơn giản, khi screen reader gặp một link, nó cần biết:
- Link này dẫn đi đâu
- Người dùng sẽ nhận được gì khi bấm vào
Tên của link có thể đến từ:
- Nội dung text bên trong thẻ
<a> - Thuộc tính
aria-label - Thuộc tính
aria-labelledby
Nếu không có bất kỳ nguồn nào ở trên, link sẽ bị coi là không có tên rõ ràng.
Nguyên nhân phổ biến gây ra lỗi
Lỗi này xuất hiện rất nhiều trong các thiết kế hiện đại, đặc biệt là UI thiên về icon.
- Link chỉ chứa icon, không có text
- Thẻ
<a>rỗng hoặc chỉ dùng cho click - Link được tạo bằng CSS background image
- Icon social, icon menu không có nhãn mô tả
Về mặt thị giác, người dùng vẫn hiểu được nhờ icon. Nhưng screen reader thì không.
Những vị trí dễ dính lỗi nhất
- Menu icon trên mobile
- Social media icons
- Icon “search”, “close”, “back”
- CTA dạng icon-only
- Custom navigation bằng JavaScript
Ví dụ sai thường gặp
<a href="/home">
<svg></svg>
</a>
Với screen reader, link trên gần như không có ý nghĩa gì.
Ví dụ đúng chuẩn accessibility
Cách đơn giản nhất là thêm text mô tả:
<a href="/home">
Trang chủ
</a>
Nếu buộc phải dùng icon-only link, cần thêm nhãn bằng ARIA:
<a href="/home" aria-label="Trang chủ">
<svg></svg>
</a>
Cách này giữ nguyên UI nhưng vẫn đảm bảo link có tên rõ ràng.
Liên quan gì đến SEO
Link không có tên rõ ràng không chỉ gây hại cho accessibility mà còn ảnh hưởng đến SEO.
- Công cụ tìm kiếm khó hiểu mục đích liên kết
- Anchor text không có giá trị ngữ nghĩa
- Internal link mất cơ hội truyền ngữ cảnh
Một link tốt cần vừa rõ nghĩa với người dùng, vừa rõ nghĩa với máy.
Những sai lầm cần tránh
- Dùng icon nhưng không thêm aria-label
- Dùng aria-label chung chung như “link” hoặc “button”
- Lạm dụng ARIA thay vì dùng text thật
- Ẩn text bằng CSS nhưng quên kiểm tra screen reader
Lợi ích khi sửa lỗi này
Khi mỗi link đều có tên rõ ràng, bạn sẽ thấy:
- Trải nghiệm screen reader tốt hơn rõ rệt
- Điểm accessibility trong Lighthouse tăng
- Internal linking rõ ràng và hiệu quả hơn
- Code HTML sạch và có ngữ nghĩa hơn
Kết luận
Lỗi Links do not have a discernible name thường không bị phát hiện bằng mắt thường, nhưng lại gây ảnh hưởng lớn đến accessibility và SEO. Chỉ cần đảm bảo mỗi thẻ <a> đều có nội dung mô tả rõ ràng — bằng text hoặc ARIA phù hợp — bạn đã giải quyết triệt để vấn đề này mà không cần thay đổi giao diện.
Bình luận