H2Sufficient technique WCAG 1.1.1 WCAG 2.4.4 WCAG 2.4.9 Level A Partly scanner-detectable

Combine adjacent image and text links into one

Two links pointing at the same page, one wrapped around a thumbnail and one around its caption, are one link doing the job twice. H2 merges them. Put the image inside the same anchor as the text and give the image an empty alt, so the words already in the link do the naming. W3C lists this as a sufficient technique for 1.1.1 Non-text Content, which means a correctly merged pair meets that rule for those links. For link purpose it counts as advisory help instead, so it improves what your link list sounds like without settling that rule on its own. And merging is not deleting. Keeping the icon next to the words helps people who read a picture faster than a sentence, which is why both versions were there in the first place.

How we find it in an audit

Two anchors pointing at the same URL, side by side, is a pattern a scanner lists in seconds, and that list is where we start. What it misses is the same pair split across wrapper divs, which is how most component libraries build a product card. So we walk listings and card grids by hand, because that is where the duplicate actually lives on nearly every store and news site we test.

How affected users experience it

Tab through a product grid built this way and every product costs two stops instead of one. The name arrives twice, once from the picture link and once from the text link, and where the picture link has no alt text the filename lands in between. A grid of 40 products means 80 tab presses and 40 filenames read aloud. Merging the pair halves the tabbing and drops the filenames entirely.

Passes vs. fails

Passes: alt text names the product. Fails: the file name is all there is.

Passes

<a href="/shoe"><img src="shoe.jpg" alt=""> Blue running shoe</a>

Fails

<a href="/shoe"><img src="shoe.jpg" alt="Blue running shoe"></a>
<a href="/shoe">Blue running shoe</a>

How this gets tested

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

Element marked as decorative is not exposedA tool can check this
Image accessible name is descriptiveA tool finds candidates, you decide
Image button has non-empty accessible nameA tool can check this
Image has non-empty accessible nameA tool can check this
Link has non-empty accessible nameA tool can check this
Object element rendering non-text content has non-empty accessible nameA tool can check this
SVG element with explicit role has non-empty accessible nameA tool can check this
Image not in the accessibility tree is decorativeA 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

39 guides on this site are filed under 1.1.1 Non-text Content. W3C lists this one as sufficient for that rule on its own. Implement it correctly, in a way your readers' software actually supports, and the rule is met.

This guide is our interpretation of W3C technique H2: Combining adjacent image and text links for the same resource. 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.