a11y/no-click-on-static

Why

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.

Fix

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.

Examples

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

Sources

• 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

Read it in the terminal

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