Link Name
Critical - WCAG Level A
The 'link-name' accessibility issue arises when a link does not have discernible text, meaning the link's purpose is not clear to users, particularly those relying on screen readers. This can occur when links are represented by images, icons, or empty anchor tags without accompanying text or accessible labels. For users with visual impairments, screen readers read out link text to convey the purpose of the link. If the text is missing or unclear, it can lead to confusion and hinder navigation.
To fix this issue:
Ensure that every link has a clear and descriptive text label. For links that use icons or other non-text content, use ARIA attributes like
aria-labeloraria-labelledbyto provide a descriptive label.Additionally, ensure that the link text is unique and descriptive enough to convey its purpose without relying solely on surrounding context.
Best practices:
Using meaningful link text that describes the destination or action, avoiding generic phrases like "click here" or "read more." Instead, specify what the user will find or what action will occur, such as "Download the annual report" or "Learn more about our services."
Ensure that links are visually distinguishable from surrounding text to aid all users in identifying them as interactive elements.
Common mistakes:
Using only an icon without a text label, relying on CSS to hide text that screen readers cannot access, and using the same link text for different destinations.
Always test your links with a screen reader to ensure they are announced correctly and provide the intended information.