• Success Criterion 1.3.3
  • Conformance level A

Instruction Naming an Icon’s Shape Instead of Its Function

1.3.3 — Sensory Characteristics

Scenario

Setting

A public library's catalog search

What’s wrong

Icon-shape references: "tap the hamburger / the gear" without those controls having visible text or the instruction naming their function.

Example 

<p>Tap the hamburger icon to open the menu, then the gear to adjust your search settings.</p>
<button class="icon-menu"><svg class="icon-hamburger"></svg></button>
<button class="icon-settings"><svg class="icon-gear"></svg></button>

Why it matters

A screen reader user has never seen a hamburger or gear shape and hears two unlabeled buttons with no way to tell which opens the menu.

How to test

Read icon-shape references ('tap the hamburger', 'the gear icon') alone: check whether those controls also have visible text or an accessible name stating their function.

How to fix

Name each icon button by its function, and reference that function in instructions instead of the icon's shape.

<p>Tap "Menu" to open the menu, then "Search Settings" to adjust your search.</p>
<button class="icon-menu" aria-label="Menu"><svg class="icon-hamburger" aria-hidden="true"></svg></button>
<button class="icon-settings" aria-label="Search Settings"><svg class="icon-gear" aria-hidden="true"></svg></button>

Outcome

Told to tap "Menu" or "Search Settings," a screen reader user knows exactly which button does what.

Who is affected

Screen reader users and people unfamiliar with icon conventions cannot map "hamburger" or "gear" shapes to unlabeled buttons.

Learn more

Related scenarios