Clickable divs (use a button)

A common UI bug: something looks like a button, but it’s implemented as a plain <div> with a click handler.

That can break keyboard access: a plain <div> is not focusable by default, so a keyboard user can’t reach it with Tab. (It’s also missing built-in semantics that assistive tech expects.)

Open the demo Auto demo

The fix: use a real `<button>` (or `<a>`)

If it triggers an action (Save, Close, Apply): use <button type="button">.
If it navigates to another page: use a real link <a href="...">.

Native controls come with keyboard behavior for free: Tab focus, Enter/Space activation, and default semantics.

If you absolutely must use a non-native element, you need to add focusability and keyboard handling (e.g., tabindex="0" and Enter/Space handlers), but in most cases the simplest and most reliable fix is: use a real button.

Notes

Always test with keyboard only: Tab, Shift+Tab, Enter, Space, Escape.
If you can’t reach a control with Tab, it’s effectively unusable for many players.
Once a control is focusable, make sure the focus ring is visible (see the focus ring demo).

The fix: use a real <button> (or <a>)

Notes

The fix: use a real `<button>` (or `<a>`)