Accessibility rule: Link without a text alternative, explained

• Who is impacted by this?
• How does the check work?
• Common Mistakes

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.

You can read more about the best practices for accessible links here.

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.

You can read more about this check in the technical documentation for Alfa, Siteimprove’s open-source accessibility conformance testing engine.

Common Mistakes

Mistake:

Using an alt="…" attribute on an <a> element.

Explanation 

The alt="…" attribute is a good way to add alt text to an <img> element, but not an <a> element. It doesn’t work on <a> elements because the alt attribute is only allowed on <img> elements, according to the HTML standard.

Fix 

Where you were going to write <a alt="...">, write <a aria-label="..."> instead. 

Mistake:

Not checking the source HTML for invisible <a> elements.

Explanation 

Many users don’t know that the link that Siteimprove is flagging is even there. 

Even if most users don't see them when they browse a page, invisible links in HTML source files can still show up for some users of assistive technologies.

Invisible <a> elements are frequently found next to visible <a> elements. So it’s easy to think that Siteimprove is flagging the visible <a> element when it’s really flagging the invisible <a> element in the source HTML right next to it.

Invisible links can be created accidentally by your Content Management System (CMS) when you create a link and then delete it. So, while invisible links often show up in other places, it's especially common for them to appear in code near their visible counterparts for this reason. 

Fix 

Look at the source HTML to see if this invisible link is really where Siteimprove says it is. The source HTML can be reviewed in either of two ways: 

• Using the Siteimprove page report with the “HTML view” or “Show HTML” buttons 
• With Browser DevTools