Links must have discernible text

Rule link-name · Links & buttons · impact serious · Static + live

↩ Back to the rules index · WCAG cross-reference

Why it matters#

A link with no accessible name (e.g. an icon-only or image link with no alt) is announced as "link" with no destination, and is useless to screen-reader and speech users.

How to fix#

Give the link a name that says where it goes — any of these works: visible text inside it; alt text on the image inside it; an <svg>``<title>…</title>``</svg>; visually-hidden text (an sr-only span); aria-label or aria-labelledby pointing at visible text. A title attribute also supplies a name but only as a tooltip, so prefer the options above. Icon fonts and CSS background images carry no text — add one of the above. A link that is a decorative duplicate (a cloned carousel slide, an image link beside an identical text link) should be hidden with aria-hidden="true" and tabindex="-1" rather than named; an anchor with no destination should not be a link at all.

Example#

<a href="/profile"><svg aria-hidden="true"></svg></a>

<a href="/profile" aria-label="Your profile"><svg aria-hidden="true"></svg></a>

Example#

<a href="/article"></a>

<div aria-hidden="true"><a href="/article" tabindex="-1">Read article</a></div>

Links inside an aria-hidden subtree (e.g. cloned carousel slides) are out of the accessibility tree and are not checked here.

WCAG success criteria#

2.4.4 Link Purpose (In Context) — Level A#

The purpose of each link should be clear from its text (or its programmatically-associated context).

Understanding 2.4.4

4.1.2 Name, Role, Value — Level A#

Every UI component must expose a correct name, role, and (where relevant) state/value to assistive technology.

Understanding 4.1.2

Standards#

This rule contributes to the following standards:

WCAG A EN 301 549 Section 508 Trusted Tester ACT

References#

• WCAG — Link Purpose