• Success Criterion 1.3.3
  • Conformance level A
  • W3C reference F26

Instruction Given Only Through an Icon, With No Text Meaning

1.3.3 — Sensory Characteristics

Scenario

Setting

A real-estate marketplace's listing page

What’s wrong

An instruction is given only through a symbol or icon (an arrow, a checkmark) with no text — its meaning isn't available to screen reader users.

Example 

<span class="help-text">Tap the arrow icon to see similar homes.</span>
<button class="similar-btn"><svg class="icon-arrow"></svg></button>

Why it matters

A screen reader user hears an unlabeled button and has no way to connect it to "see similar homes," which was described only by pointing at an arrow icon.

How to test

Read any icon-only instruction: if the only way to know what to do is interpret a symbol with no accompanying text, it fails.

How to fix

Give the icon a real accessible name so its meaning does not depend on recognizing the shape.

<button class="similar-btn" aria-label="See similar homes"><svg class="icon-arrow" aria-hidden="true"></svg></button>

Outcome

A screen reader user now hears "See similar homes, button" and understands exactly what it does.

Who is affected

Screen reader users and users with low vision who cannot distinguish the icon cannot tell what action the arrow performs.

Learn more

Related scenarios