a11y/aria-valid

Dlaczego

Browsers ignore an unknown role or attribute without any error. The widget then has no role, no name or no state for assistive technology, while the code looks finished.

Poprawka

Use the role names of WAI-ARIA 1.2 (tablist, not tabs) and the exact attribute names (aria-labelledby, aria-describedby). Better still, use the native element that carries the role. Lint JSX with eslint-plugin-jsx-a11y to catch these while typing.

Przykłady

<!-- bad -->
<div role="tabs"><button aria-labeledby="t1">One</button></div>
<!-- good -->
<div role="tablist"><button role="tab" aria-labelledby="t1">One</button></div>

Źródła

• W3C, WAI-ARIA 1.2 (roles and states and properties)
• WCAG 2.2, Understanding SC 4.1.2 Name, Role, Value

Przeczytaj w terminalu

npx github:dawidolko/frontend-skills explain a11y/aria-valid