a11y/aria-valid

Why

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.

Fix

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.

Examples

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

Sources

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

Read it in the terminal

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