Dostępność
a11y/aria-label-generic
aria-label and aria-labelledby go on controls, landmarks and named roles, never on a plain div, span or p.
poważnastatyczneWCAG 4.1.2 · Afe-a11y-aria
Dlaczego
ARIA forbids a name on generic elements, so screen readers ignore it or read it inconsistently. The developer believes the icon or the region is labelled; the user hears nothing.
Poprawka
Move the label to the thing people interact with (the <button> around the icon), use a landmark element (<section aria-label>, <nav aria-label>), or give the element a role that takes a name (role="img" for a status dot, role="region" for a named area).
Przykłady
<!-- bad -->
<span class="dot" aria-label="Online"></span>
<!-- good -->
<span class="dot" role="img" aria-label="Online"></span>Źródła
Fakty
- Identyfikator
a11y/aria-label-generic- Waga
- poważna
- Sprawdzanie
- statyczne sprawdzane w kodzie źródłowym przez
audit - Dotyczy plików
htmlangularvuesvelteastrojsx- WCAG 2.2
- 4.1.2, poziom A
- Ten sam problem w
- axe-core
aria-prohibited-attr - Uczy jej skill
fe-a11y-ariaARIA, names and live regions- Od wersji
- 0.1.0
Przeczytaj w terminalu
npx github:dawidolko/frontend-skills explain a11y/aria-label-generic