Does the link have programmatically-discernable text?

Goal

Ensure that there’s some text associated with a link so that when assistive technology such as a screen reader communicates the link to the user, it has something to say.

Why this matters

If a link has no name associated with it, the screen reader will attempt to read the link’s destination in the href attribute instead. Nobody wants to listen to a URL string.

How to implement

Follow the instructions in <a>: The Anchor Element on MDN’s website.

Note that the name of a link is calculated in the following order of precedence by screen readers:

1. aria-labelledby
2. aria-label
3. The text between the <a> and</a> elements including alt text on images.
4. The title attribute as a last resort. (This is unreliable.)

Whenever possible, use option 3 as it is the native HTML method.

If the native text is repetitive (multiple “Read more…” links or multiple “View…” links, for example) the aria-label attribute can be used to provide a descriptive link.

Example of an aria-label override:

<a href="http://kirabug.com" 
  aria-label="Read more about 
  kirabug's idea files"> 
    Read More... 
</a>

How to test

Screen reader testing

Use a screen reader to listen to the page and confirm that the expected text is read aloud for the link name.