On each web page, does each link have a label?
A link without a title is a silent link for screen readers. When a user navigates by tabulation and encounters a link made up solely of an icon without alternative text, their screen reader announces "link" and nothing else. There is no way to know where this link leads.
Criterion 6.2 is binary: every link must contain a non-empty accessible title. This title can be visible text, text hidden visually with CSS, an aria-label attribute, an aria-labelledby pointing to real content, or the textual alternative (alt) of an image contained in the link. What matters is that the accessible name calculated by the browser is not empty.
No title, no usable link. This rule applies to any <a href> element and to any element bearing the role="link" attribute, regardless of its visual form.
Un test to assess the relevance of link labels
Presence of non-empty label on every link
- Identify all links on the page:
<a href>elements and elements withrole="link". - For each link, verify that its content produces a non-empty title. A valid title can be:
- visible text between the opening and closing tags,
- text hidden visually via CSS (
.sr-onlyclass or equivalent), - a non-empty
aria-labelattribute on the link, - an
aria-labelledbypointing to one or more elements whose cumulative text is non-empty, - the
altattribute of an image contained in the link.
- If at least one link produces no detectable title, the test fails.
Examples
❌ Non-compliant : Icon link without alternative text
<a href="https://twitter.com/exemple">
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1"/>
</svg>
</a>The SVG icon is hidden from assistive technologies with aria-hidden="true", but no text replaces it. The screen reader simply announces "link". The user does not know where this link leads. This is WCAG failure technique F89: removing the only accessible content from a link.
✅ Compliant : Icon link with visually hidden text
<a href="https://twitter.com/exemple">
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1"/>
</svg>
<span class="sr-only">Follow us on Twitter</span>
</a>The <span class="sr-only"> provides text read by screen readers, invisible visually. The user hears "link, Follow us on Twitter" and knows the link's destination. The visual design is not altered.
❌ Non-compliant : Image link without alt attribute
<a href="/accueil">
<img src="logo-exemple.png">
</a>An image without alt in a link leaves screen readers without a title. Depending on the browser and screen reader, the rendering varies from "logo-exemple.png" (filename) to nothing at all. In both cases, the link is unusable for a blind person.
✅ Compliant : Image link with alt serving as title
<a href="/accueil">
<img src="logo-exemple.png" alt="Home - Logo Exemple">
</a>The alt attribute here serves as the link's title. The screen reader announces "link, Home - Logo Exemple", clearly indicating the destination. Note that the alt must describe the function of the link, not the image itself.
Tips and pitfalls
⚠️ aria-hidden on the link's only content
This is the number one error in auditing iconic links. A developer adds aria-hidden="true" to the icon so it won't be read, but forgets to provide replacement text. The link ends up empty. WCAG failure technique F89 documents exactly this case and marks it as non-conformant.
💡 aria-label directly on the <a> rather than a hidden span
Both approaches are conformant, but aria-label on the <a> tag is more robust: <a href="/twitter" aria-label="Follow us on Twitter">. It avoids potential CSS issues with hidden text (some frameworks reset .sr-only styles) and reduces superfluous markup.
⚠️ aria-labelledby pointing to an empty or hidden element
aria-labelledby can reference multiple IDs, which is valid. But if all targeted elements have empty content or themselves bear aria-hidden="true", the calculated accessible name is empty and test 6.2.1 fails. Always verify that the chain of IDs produces real text by examining the browser's Accessibility panel.
⚠️ An <a> without href is not a link
An <a> element without an href attribute is treated as ordinary text by browsers: it is not focusable, not included in the link list. Criterion 6.2 does not apply. However, as soon as an href is present, even empty or equal to "#", the element becomes a link and must have a title.
💡 Use the browser's Accessibility panel to verify the calculated name
Firefox and Chrome display the calculated "accessible name" in their Accessibility panel. Select the link in the DOM inspector, look for the "Name" field: if it is empty, test 6.2.1 fails. This is more reliable than reading the source code because it accounts for all combined ARIA techniques.
Frequently asked questions
How do I make a link composed solely of a font icon conformant with RGAA 6.2?
Not unless a title is provided by another means. An icon inserted via CSS pseudo-element or Unicode character without alternative text produces an empty link. The simplest solution: add aria-label directly to the <a>, or insert a <span class="sr-only"> with text describing the destination.
How do RGAA criteria 6.1 and 6.2 differ on link titles?
Criterion 6.2 verifies that a title exists (non-empty). Criterion 6.1 verifies that this title is relevant and explicit. A link titled "Click here" passes 6.2 (it has a title) but fails 6.1 (the title is not sufficiently explicit). In an audit, 6.2 is therefore a prerequisite for 6.1.
How can I efficiently identify links without accessible title on a webpage?
Includdy automatically highlights empty links. In the browser console, document.querySelectorAll('a[href]') followed by filtering on el.accessibleName (or via the experimental AOM property) can spot cases. Always supplement with manual testing via keyboard and screen reader, because some cases of aria-labelledby pointing to empty elements escape automated tools.
What impact does alt="" on an image in a link have according to RGAA criterion 6.2?
None. If the image bears alt="", it is ignored by screen readers and provides no title to the link. The result is identical to an empty link. Either the image must receive an alt describing the link's destination, or text hidden or an aria-label must supplement the link by another means.