The big idea: every icon is either decoration or information — decide which
Screen readers hit your icon and have exactly two useful options: skip it, or say something helpful. Most codebases choose a third option — announce garbage like "chevron dash right dot svg" — because nobody decided.
The decision is a two-question test:
1. If the icon vanished, would meaning be lost?
No → it's decorative. A checkmark next to the word "Done", the magnifier inside a labeled search field. Hide it:
aria-hidden="true". This is the right answer for most icons, and it's one attribute.Yes → it's meaningful. An icon-only delete button, a status dot with no text. It needs an accessible name:
role="img"+aria-label="Delete"on the SVG, or better, put the label on the interactive element itself (<button aria-label="Delete">).
2. Is it interactive? Then the control needs the name, not the SVG — and it needs a real focus style and a target of at least 24×24 CSS pixels (44×44 on touch). The pretty 16px icon can stay 16px; the hit area can't.
Clarification: WCAG’s minimum target is 24×24 CSS pixels, with an exception when smaller targets have enough spacing; 44×44 is a recommended, more forgiving touch target.
Two more that get missed:
Contrast applies to icons. WCAG requires 3:1 against the background for meaningful graphics. Your light-gray icon on white (that
#C0C0C0you love) is at about 1.9:1 — decorative-only territory.Don't rely on the icon alone. Red circle for error, green for success is unreadable for the ~8% of men with red-green color-vision deficiency. Pair color with shape: ✕ in the red one, ✓ in the green one. (This is why good icon families ship distinct filled/outline status glyphs.)
60-second tip
Tab through your app with your eyes closed to the mouse — keyboard only. Every icon button you can't reach or can't identify when focused is a bug you just found for free. Five minutes, no tooling required.
Steal this: the Icon A11y Checklist
A one-page printable: the decorative/meaningful flowchart, the attribute recipes for plain SVG, React, and Vue, target-size rules, and the contrast thresholds. Designed to be pinned next to your monitor or dropped in your PR template.
Get the editable Figma checklist: https://www.figma.com/community/file/1659207707404997193
Before you go
Honest question: does your team's definition of done include keyboard-testing icon buttons? Reply yes/no — we'll share the (anonymous) split next week, no names, no judgment.
How are you enjoying Iconic so far? Reply with one thing you want more of — or one thing we should change. We read every reply.