Keyboard accessibility: test it in five minutes, fix it for good

Screen reader users, people with tremors or paralysis, switch and voice-control users, and power users all depend on the keyboard (or devices that act like one). If something can’t be done with a keyboard, a lot of people can’t do it at all.

The five-minute test

1. Click in the browser address bar, then press Tab to move into the page.
2. Keep pressing Tab through the whole page. Use Shift+Tab to go back.
3. Activate links with Enter and buttons with Enter or Space.
4. Use arrow keys inside menus, tabs, radio groups and sliders.
5. Press Esc to close menus and dialogs.

At every step ask: Can I see where I am? Can I reach it? Can I use it? Can I get out?

The six most common failures — and the fixes

1. Invisible focus

Designers often remove the browser’s focus outline because it “looks ugly.” Without it, keyboard users are lost.

Fix: never use outline: none without a replacement. Use a strong :focus-visible style with at least 3:1 contrast:

:focus-visible {
  outline: 3px solid #B0121E;
  outline-offset: 3px;
}

2. Clickable things that aren’t buttons or links

A <div onclick> can’t be reached with Tab or activated with Enter.

Fix: use <button> for actions and <a href> for navigation. They’re focusable and keyboard-operable for free.

3. Illogical focus order

Focus jumps from the header to the footer, then back to the middle — usually from positive tabindex values or CSS that visually reorders content.

Fix: remove tabindex values greater than 0 and make the source order match the visual order.

4. Keyboard traps

Focus goes into an embedded video, map or widget and can’t get out.

Fix: make sure Tab and Shift+Tab can always leave. For modal dialogs, keep focus inside while it’s open — but make Esc and a visible close button return focus to the element that opened it.

5. Focus hidden behind sticky elements (new in WCAG 2.2)

Sticky headers, cookie banners and chat buttons can cover the element that has focus, so keyboard users can’t see where they are.

Fix: use scroll-padding-top equal to your sticky header’s height, keep banners from covering content, or avoid sticky elements.

6. Mouse-only interactions

Menus that open only on hover, drag-and-drop with no alternative, and custom sliders that ignore arrow keys.

Fix: open menus on click or Enter as well as hover; provide buttons alongside drag-and-drop (WCAG 2.5.7); follow the WAI-ARIA Authoring Practices keyboard patterns for custom widgets.

Skip links

A “Skip to main content” link should be the first thing a keyboard user reaches. It can be visually hidden until it receives focus — but it must become visible when focused.