Frontend · interactive
Keyboard and focus
Many people never touch a mouse: screen reader users, power users, people with motor impairments. They move with Tab. Every interactive element must be reachable, show where focus is, and dialogs must keep focus inside and give it back on close. Press Tab through this page.
- Skip to content
- Search
- Product 1
- (can't reach Open filters: a div isn't focusable)
- — dialog opens —
- Close ✕
- Price slider
- Apply
- Product 1 (behind the dialog!)
- — dialog closes —
- <body> (focus lost: start over)
outline: none: you can barely tell which item has focus.
0 keyboard traps or dead ends so far
Tab moves focus in DOM order.
Use real interactive elements
<button> and <a href> are focusable and work with Enter and Space for free. A clickable div is neither.
tabindex="0" plus key handlers is the hard way.
Never remove the focus ring
Style it with :focus-visible instead of deleting it.
:focus-visible { outline: 2px solid; }
Trap focus while open
Tab cycles within the dialog; Escape closes it; the page behind is inert.
<dialog> with showModal() does this natively.
Restore focus
Send focus back to the button that opened it, so the user carries on where they were.
Test by unplugging your mouse for ten minutes.
In production
Tools and technologies
Keyboard access is a baseline accessibility requirement.
Not tied to one language — use these names when you search docs or design a system.