Accessibility Insights

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-label attribute

Better

  • aria-labelledby attribute

Best

  • Link text that’s available to assistive technologies (not marked with display: none or aria-hidden="true" )

Each link’s accessible name should concisely describe its unique purpose.

Example

 

Fail

This link at a gourmet foods website contains an image of a coffee cup, but it has no accessible name. People who use assistive technologies can't determine its purpose.

<a href="https://mycompany.com/coffee.htm"><img src="//4/45/coffee.jpg" height="25" width="25"></a>
 

Pass

An 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-label attribute
  • Element has an aria-labelledby attribute that references elements that are visible to screen readers
  • Element has text that is visible to screen readers

More examples