Give links context from the heading above them
A heading directly above a link can supply that link's purpose, which is the news teaser pattern. Read more, underneath a headline. W3C documents it and files it as advisory, meaning it helps and does not satisfy 2.4.4 on its own. That is the whole difference between H80 and its three siblings H77, H78 and H79, all of which are sufficient. The heading has to be a real h1 to h6 immediately preceding the link, so a styled div headline gives the technique nothing to stand on. There is a stronger version of the same idea. Give the heading an id and point the link's aria-labelledby at both the link and the heading, so the association is a real accessible name rather than mere adjacency and it survives being read out of context. Better still, take W3C's own advice on the same page and write link text that says where it goes.
How we find it in an audit
Every teaser and card pattern gets checked by hand against two questions. Whether the headline is a genuine heading element, and whether the headline and the link text together name the destination. A scanner supplies the inventory of repeated Read more links and none of the judgment.
How affected users experience it
There are two ways people read a page like this and the technique only works for one of them. Heading navigation reads the headline, so the context is there. The links list does not, so 10 teasers collapse into 10 identical Read more entries. Getting back to the context means moving backwards to the heading, one step at a time, for every link on the page. That is help. It is not the same as the link working.
Passes vs. fails
Passes
<h3 id="storm-h">Storm closes northern routes</h3>
<a id="storm-a" href="/news/storm" aria-labelledby="storm-a storm-h">Read more</a>Fails
<div class="card-title">Storm closes northern routes</div>
<a href="/news/storm">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
The other techniques filed under this rule
22 guides on this site are filed under 2.4.4 Link Purpose (In Context). W3C lists this one as advisory for that rule rather than sufficient, which means it helps real readers without being accepted as evidence you conformed.
- ARIA7sufficientBuild clear link names from nearby headings
- 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
This guide is our interpretation of W3C technique H80: Identifying the purpose of a link using link text combined with the preceding heading element. 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.