Build clear link names from nearby headings
aria-labelledby takes a list of ids and stitches their text together into one accessible name, which lets a Read more link borrow the headline sitting above it. W3C lists ARIA7 as sufficient for 2.4.4 Link Purpose in Context, on the path where the link text combines with context software can determine. Note which criterion that is, because it explains the shape of the technique. ARIA7 stitches in context, so it satisfies the in-context rule and not the harder link-only one, while its sibling ARIA8 gives a link a complete name and satisfies both. Put the link's own id first in the list, so the visible words stay at the front of the name. Keep the heading a real heading too, because the pattern reads as clumsy padding when the borrowed text is not a headline.
How we find it in an audit
A scanner gives us the repeated Read more links and the aria-labelledby values pointing at ids that do not exist. Whether the stitched name reads as a sentence is a listening job. We pull the links list in a screen reader and read what comes out, in order, because a name assembled backwards is a new problem rather than a fix.
How affected users experience it
In a links list, this is the difference between a page and a wall. Ten teasers with bare Read more links give 10 identical entries. The same 10 with stitched names give Read more Board election results, Read more Q3 results published, and a person picks the one they wanted in a second. That list is how a lot of screen-reader users navigate, and it is the one view where surrounding context does not exist.
Passes vs. fails
Passes
<h3 id="news1-h">Board election results</h3>
<p>Turnout was the highest since 2019.</p>
<a id="news1-a" href="/news/board" aria-labelledby="news1-a news1-h">Read more</a>Fails
<h3>Board election results</h3>
<p>Turnout was the highest since 2019.</p>
<a href="/news/board">Read more</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
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 identifying the purpose of a link using link text combined with programmatically determined link context, so the condition is part of the test rather than a footnote to it.
- ARIA8sufficientFix vague link text with aria-label
- C7sufficientAdd hidden text to clarify short links
- G53sufficientLet the sentence around a link explain it
- G91sufficientWrite link text that states its purpose
- G189sufficientOffer a switch to self-describing link text
- H24sufficientAdd alt text to every image map area
This guide is our interpretation of W3C technique ARIA7: Using aria-labelledby for link purpose. 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.