C7Sufficient technique WCAG 2.4.4 WCAG 2.4.9 Level A Partly scanner-detectable

Add hidden text to clarify short links

C7 puts the missing words inside the link and hides them visually with CSS, so the design keeps its short label and the accessible name carries the full one. W3C lists it as sufficient for 2.4.4 Link Purpose in Context where the hidden text supplements the visible description, and as sufficient for the AAA link-only rule on the same terms. Supplemental is the operative word. The hidden text adds to the visible text rather than replacing it, which is what separates C7 from an aria-label. The hiding recipe is the part to get right. display none and visibility hidden remove the text from assistive technology as well as from the screen, so the clipping pattern is what the technique needs. The case it handles best is a list of the same document in several formats, where three links reading PDF, EPUB and HTML sit under one title.

How we find it in an audit

Repeated short link text is an automated inventory, and off-screen text is easy to grep for. What needs a person is checking the hiding method actually works. We read the accessible name in the browser's accessibility inspector rather than trusting the class name, because a visually-hidden class built on display none hides the words from everybody.

How affected users experience it

In a links list, PDF, EPUB, HTML repeated down the page is unusable, because the format is the only thing that survives and the title is gone. With hidden text the same links read Annual report 2025 PDF, Annual report 2025 EPUB, and choosing takes a second. Sighted users see the tidy version the designer wanted, and nothing about the layout changes.

Passes vs. fails

Passes: name, role, and state exposed. Fails: a control with no identity.

Passes

<style>.sr-only { position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); }</style>

<a href="/r25.pdf">PDF<span class="sr-only"> Annual report 2025</span></a>

Fails

<style>.sr-only { display: none; }</style>

<a href="/r25.pdf">PDF<span class="sr-only"> Annual report 2025</span></a>

How this gets tested

The W3C publishes test rules that define what a checker looks for here.

Link has non-empty accessible nameA tool can check this
Link in context is descriptiveA tool can check this
Links with identical accessible names and same context serve equivalent purposeA tool finds candidates, you decide
Link is descriptiveA tool can check this
Links with identical accessible names have equivalent purposeA tool can check this

Other ways to satisfy this rule

22 guides on this site are filed under 2.4.4 Link Purpose (In Context). W3C lists this one as sufficient for that rule when used for providing a supplemental description of the purpose of a link, so the condition is part of the test rather than a footnote to it.

This guide is our interpretation of W3C technique C7: Using CSS to hide a portion of the link text. W3C publishes its techniques as guidance rather than as the standard, and says so on every one of them. The success criterion is what conformance is measured against, and a technique is one documented way to meet it.