Lỗi "Links do not have a discernible name" trong Lighthouse

Trong quá trình kiểm tra website của bạn với các công cụ như Lighthouse hoặc PageSpeed Insights, bạn có thể nhận được cảnh báo "Links do not have a discernible name". Trong bài viết này, chúng ta sẽ tìm hiểu về lỗi này và cách sửa chúng để tăng cường trải nghiệm người dùng và cải thiện điểm số của website trên các công cụ đo lường hiệu suất.

Lỗi "Links do not have a discernible name" là gì?

Lỗi "Links do not have a discernible name" là một trong những lỗi phổ biến nhất được báo cáo trong các công cụ đo lường hiệu suất như Lighthouse và PageSpeed Insights. Nó thường xuất hiện khi một liên kết không có nội dung văn bản hoặc chỉ chứa các ký tự không đáng kể như "click here".

Một lỗi liên quan đến Accessibility (trải nghiệm người dùng, khả năng truy cập) trong Lighthouse / PageSpeed ​​Insights.

Trong trường hợp này lỗi do hình ảnh không có alt (văn bản thay thế). Mục đích để khi hình ảnh, button, icon bị lỗi không load được thì văn bản thay thế đó sẽ được hiển thị.

Cách khắc phục

Để sửa lỗi "Links do not have a discernible name", bạn cần đảm bảo rằng mỗi liên kết trên trang web của bạn có nội dung văn bản rõ ràng và mô tả chính xác nội dung của liên kết đó. Dưới đây là một số cách để sửa lỗi này:

1. Đặt tên cho liên kết theo nội dung của nó: Sử dụng các từ hoặc cụm từ mô tả chính xác nội dung của liên kết để tạo tên cho liên kết đó. Ví dụ: "Đọc thêm về sản phẩm X" thay vì "Nhấp vào đây để đọc thêm".
2. Sử dụng các thuộc tính "title" và "aria-label": Sử dụng các thuộc tính này để cung cấp thêm thông tin về nội dung của liên kết cho người dùng khi họ di chuột qua liên kết mà không nhấp vào.
   Ví dụ: <a href="#" title="Đọc thêm về sản phẩm X">Đọc thêm</a>.
3. Nếu bạn sử dụng các hình ảnh hoặc biểu tượng để tạo liên kết, đảm bảo rằng chúng có các thuộc tính "alt" và "aria-label" để cung cấp thông tin cho người dùng về nội dung của liên kết đó.

Mình sử dụng Wordpress nên chỉ cần vào "media" -> "edit" -> điền "Alternative Text" là được.

<img alt='alt image'>
<a aria-label='aria label icon'></a>
<button aria-label="aria label button"></button>

Tham khảo thêm tại: Labels and text alternatives.

Kết luận

Lỗi "Links do not have a discernible name" có thể ảnh hưởng đến trải nghiệm người dùng và gây giảm điểm số của website trên các công cụ đo lường hiệu suất. Tuy nhiên, nó có thể dễ dàng được sửa chữa bằng cách đặt tên cho các liên kết theo nội dung của chúng hoặc sử dụng các thuộc tính "title" và "aria-label" để cung cấp thêm thông tin cho người dùng. Qua bài viết này, hy vọng bạn đã hiểu rõ về lỗi "Links do not have a discernible name" và cách sửa chúng.