• Success Criterion 2.5.3
  • Conformance level A

Accessible Name Built From an Icon Instead of Visible Text

2.5.3 — Label in Name

Scenario

Setting

A public library's catalog search

What’s wrong

Visible text present but name built only from icon alt / hidden text that differs.

Example 

<button type="submit">
  <img src="icon-search.svg" alt="Magnifying glass icon">
  <span aria-hidden="true">Search</span>
</button>

Why it matters

The visible 'Search' text is hidden from assistive tech, so the button's real name is only 'Magnifying glass icon.'

How to test

Inspect a control's accessible name: if it's built only from an icon's alt text or hidden text that differs from the visible label, it fails.

How to fix

Make the icon decorative with an empty alt, and let the visible word carry the accessible name.

<button type="submit">
  <img src="icon-search.svg" alt="">
  Search
</button>

Outcome

A patron says 'click Search' at the catalog and the button responds as expected.

Who is affected

Voice-control users at the library catalog, and screen reader users who hear an icon description instead of a word they can act on.

Learn more

Related scenarios