• Success Criterion 4.1.2
  • Conformance level A
  • W3C reference F89

Icon-Only Control With No Name Exposed to Assistive Tech

4.1.2 — Name, Role, Value

Scenario

Setting

A crowdfunding platform's campaign page

What’s wrong

A link or button whose only content is an image has no accessible name — screen readers announce 'link' with no clue where it goes.

Example 

<a href="/campaigns/142/share/twitter">
  <img src="twitter-icon.svg">
</a>
<!-- the image has no alt attribute, so the link has no accessible name at all -->

Why it matters

A backer using a screen reader hears just "link" and cannot tell which social network it shares to.

How to test

Inspect an image-only link/button in DevTools: if its accessible name is empty, it fails.

How to fix

Every icon-only link needs alt text, an aria-label, or visually-hidden text describing its destination.

<a href="/campaigns/142/share/twitter">
  <img src="twitter-icon.svg" alt="Share this campaign on Twitter">
</a>

Outcome

A backer picks the Twitter icon by name and shares the campaign in one tap.

Who is affected

Screen reader users wanting to share a campaign cannot distinguish the Twitter icon from Facebook or email.

Learn more

Related scenarios