Accessibility rule: Link without a text alternative, explained
This check makes sure that all types of links that assistive technology users might encounter have an accessible name. Screen reader users need a good text description of the link, they are about to click.
Who is impacted by this?
If an image link is missing an accessible name, screen reader users will not know what the link is supposed to do. In this case, many screen readers will read the URL of the link instead.
Note: Here we check for the presence of an accessible name. It does not check how suitable the link text is.
How does the check work?
This rule checks that links, such as <a> elements, <area> elements, and elements with a role=link attribute, have an accessible name.
Many users try to fix this issue by using the technique they’re familiar with for adding “alt text” to an image: the alt=”…” attribute. That generally won’t work here, because the alt attribute is only allowed on <img> elements - not on <a> elements.
Instead, here are some techniques that will work:
<a href="http://facebook.com">Text alternative goes here.</a>
<a href="http://facebook.com" aria-label="Text alternative goes here."></a>
<a href="http://facebook.com"><img src="facebook.png" alt="Text alternative goes here."/></a> (This works because the alt attribute is on the<img> element, not the <a> element.)
Please note that “accessible name” and “text alternative” mean the same thing.
Did you find it helpful?Send feedback