WCAG H30: Providing link text

Rule ID:: wcag/h30
Category:: Accessibility
Standards:: WCAG 2.2 (A)
WCAG 2.1 (A)
WCAG 2.0 (A)

WCAG H30 requires each <a href> anchor link to have a text describing the purpose of the text. The description may come from plain text or from an image with alternative text.

The purpose of this rule is to ensure users can distinguish the link from other links and determine whenever to follow the link or not. Assistive technology may also present a list of links in which case the description is the only thing the user will be presented with.

Links can be excluded from the accessibility tree with aria-hidden="true".

The rule recognizes the following patterns:

Text (non-whitespace) inside the link
Images with alt text (non-whitespace)
aria-label either on the link or at least one descendant.
aria-hidden on the link
<svg> with <title> or <desc>

Rule details

Examples of incorrect code for this rule:

<a href><img src="cat.gif"></a>

error: Anchor link must have a text describing its purpose (wcag/h30) at inline:1:2:
> 1 | <a href><img src="cat.gif"></a>
    |  ^


1 error found.

Examples of correct code for this rule:

<a href>lorem ipsum</a>
<a href><img src="cat.gif" alt="cat page"></a>
<a href aria-label="lorem ipsum"></a>
<a href aria-hidden="true"></a>

Version history

8.19.0 - Only validates <a> tags with the href attribute present.
7.10.0 - Handles when anchor (or a parent) is hidden.
6.6.0 - Handle text from SVG <title> and <desc>
0.24.0 - Rule added.