Back to Info and Examples for Accessibility Insights for Web
link-name
Links must have accessible names.
Why it matters
An accessible name is a word or phrase coded in a way that assistive technologies can associate it with a specific user interface object. Assistive technologies can then refer to the object by name, not just by type. When a link doesn’t have an accessible name, people who use assistive technologies have no way of knowing its purpose.
How to fix
For each link, provide an accessible name using one of the following methods.
Good
aria-labelattribute
Better
aria-labelledbyattribute
Best
- Link text that’s available to assistive technologies (not marked with
display: noneoraria-hidden="true")
Each link’s accessible name should concisely describe its unique purpose.
Example
Fail
<a href="https://mycompany.com/coffee.htm"><img src="//4/45/coffee.jpg" height="25" width="25"></a>
Pass
aria-label attribute provides an accessible name that describes the link's purpose.
Everyone can tell what the link does.<a href="https://mycompany.com/coffee.htm"><img src="//4/45/coffee.jpg" height="25" width="25" aria-label="Browse our coffee products"></a
About this rule
This rule passes if ANY of the following are true:
- Element has a non-empty
aria-labelattribute - Element has an
aria-labelledbyattribute that references elements that are visible to screen readers - Element has text that is visible to screen readers