a11y/control-name

Why

A button with only an icon is announced as "button" and nothing else. Screen reader and voice control users cannot tell what it does or say its name to activate it.

Fix

Prefer visible text. For an icon-only control, add text that is hidden visually but read (<span class="sr-only">Close</span>) or aria-label="Close", and mark the icon aria-hidden="true". A linked image names the link through its alt. Use the same word people see in tooltips and elsewhere on the site.

Examples

<!-- bad -->
<button type="button"><svg aria-hidden="true">…</svg></button>
<!-- good -->
<button type="button" aria-label="Close"><svg aria-hidden="true">…</svg></button>
<button type="button"><svg aria-hidden="true">…</svg><span class="sr-only">Close</span></button>

Sources

• WCAG 2.2, Understanding SC 4.1.2 Name, Role, Value
• WCAG 2.2, Understanding SC 2.4.4 Link Purpose (In Context)
• W3C, Accessible Name and Description Computation 1.2

Read it in the terminal

npx github:dawidolko/frontend-skills explain a11y/control-name