Icon buttons need an accessible name
Aliases: accessible name · aria-label · unlabeled control
What it is
Even when a sighted user can guess an icon button, screen readers, voice control, and switch access still need an accessible name. The name is the string assistive technology uses to mention, focus, and activate the control. It is not a tooltip that appears on hover, and it is not pixels in the drawing. Without a name, the utterance becomes “button” or a filename; a voice user cannot say which one to click; a switch user can only tab and hope. An icon button has removed the visible label, so the name has to be supplied another way.
Why it happens
Assistive technology does not read bitmaps. It reads name, role, and state on the accessibility tree. A text button’s name is usually those words. Once an icon button takes the words away, name computation falls through to empty, to a meaningless SVG title, or to CSS-generated content. Voice control addresses controls with “click + name”; a nameless button never appears in the speakable list. A tooltip appears on pointer hover, is often unreachable from keyboard or touch, and is not guaranteed to be read—it is not a stand-in for a name. Visibility and accessibility fork here: a graphic that is seen can still be a control that has no name.
Studying it
Use screen-reader walkthroughs and spoken voice-control commands, not identification rates from sighted participants. Log the string spoken for each icon button, and whether commands such as “click Save” or “click Search” hit.
Independent variables: name source (aria-label, adjacent visible text, SVG title, none), presence of a tooltip. Dependent variables: whether the utterance is understandable, voice hit rate, time, accidental activation of a neighbor.
Counting a tooltip as “has a label” produces false passes. Tests must complete the same task with hover disabled, using only keyboard or voice.
Where it stops holding
If visible text already sits beside the control and is merged into the same accessible name, stacking another aria-label will double the utterance. Decorative graphics are not buttons and should be dropped from the tree rather than named. The name should describe the action (“Delete this comment”), not the appearance (“red trash can”). Names must switch with locale; a correct string in the source language and an empty translation is a nameless button again.
Applying it
- Give every icon button a human-understandable action name on the accessibility tree. Prefer visible text; use an explicit name attribute only when the text cannot be shown.
- Do not treat a tooltip as the name. The tooltip may repeat the phrase; it cannot be the only source.
- Run the main toolbar once with a screen reader and once with voice control’s “show numbers / click X.”
- Verify by listening to the toolbar with the display off. “Button,” “image,” “untitled,” or a filename means that icon button has no accessible name.