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:
- The text between the
</a>elements including alt text on images.
titleattribute as a last resort. (This is unreliable.)
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.