Accessibility
a11y/aria-label-generic
aria-label and aria-labelledby go on controls, landmarks and named roles, never on a plain div, span or p.
seriousstaticWCAG 4.1.2 · Afe-a11y-aria
Why
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.
Fix
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).
Examples
<!-- bad -->
<span class="dot" aria-label="Online"></span>
<!-- good -->
<span class="dot" role="img" aria-label="Online"></span>Sources
Facts
- Id
a11y/aria-label-generic- Severity
- serious
- Check
- static checked in the source by
audit - Applies to
htmlangularvuesvelteastrojsx- WCAG 2.2
- 4.1.2, level A
- Same problem in
- axe-core
aria-prohibited-attr - Taught by the skill
fe-a11y-ariaARIA, names and live regions- Since version
- 0.1.0
Read it in the terminal
npx github:dawidolko/frontend-skills explain a11y/aria-label-generic