a11y/control-name

Dlaczego

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.

Poprawka

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.

Przykłady

<!-- 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>

Źródła

• 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

Przeczytaj w terminalu

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