a11y/no-click-on-static

Dlaczego

A div or span with a click handler cannot be reached with Tab, does not react to Enter or Space, and is announced as plain text, so keyboard and screen reader users cannot use it.

Poprawka

Use <button type="button"> for an action and <a href> for navigation; both are focusable, keyboard operable and announced correctly for free. Only when that is impossible, add role="button", tabindex="0" and a key handler that runs the action on Enter and Space.

Przykłady

// bad
<div onClick={save}>Save</div>
// good
<button type="button" onClick={save}>Save</button>

Źródła

• WCAG 2.2, Understanding SC 2.1.1 Keyboard
• WCAG 2.2, Understanding SC 4.1.2 Name, Role, Value
• WAI-ARIA Authoring Practices, Button pattern

Przeczytaj w terminalu

npx github:dawidolko/frontend-skills explain a11y/no-click-on-static