1. Home
  2. :
  3. WCAG Guidelines
  4. :
  5. 2.4.4 Link Purpose (In Context)...
  6. :
  7. Does the link have programmatically-discernable...

Does the link have programmatically-discernable text?


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... 

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.