Keyboard navigation: test and fix your site without a mouse

The ten-minute test

1. Open your home page and click in the browser's address bar, then put the mouse away.
2. Press Tab. The first stop should be a “Skip to main content” link, or at least the first menu item.
3. Keep pressing Tab. Every link, button and field should get a clearly visible outline or highlight, in a sensible order.
4. Open the main menu and any dropdowns with Enter or Space. Close them with Escape.
5. Use Shift+Tab to go backwards. Use the arrow keys inside radio buttons, sliders and select boxes.
6. Complete your most important task, like placing an order or sending the contact form, without touching the mouse.

Write down every place where you lost track of focus, got stuck, or couldn't reach something.

Problem: you can't see where focus is

This is the most common keyboard failure, and often comes from one line of CSS, outline: none, added to remove the browser's default ring. WCAG 2.4.7 asks that focus is always visible.

/* Remove any blanket "outline: none", then: */
:focus-visible {
  outline: 3px solid #1a56db;
  outline-offset: 2px;
}

Problem: focus hides behind a sticky header

If a fixed header or cookie banner covers the focused element, keyboard users can't see what they're on. WCAG 2.2 added a criterion for this (2.4.11). Set scroll-padding-top on the html element to the header's height, and make banners easy to dismiss.

Problem: things you can't reach

Clickable divs and spans aren't in the tab order and don't respond to Enter. Replace them with real buttons and links. Avoid positive tabindex values like tabindex="3": they rearrange the tab order for the whole page. Use tabindex="0" only when you truly must make a custom element focusable, and tabindex="-1" for elements you move focus to with script.

Problem: keyboard traps

A trap is a place you can tab into but not out of: an embedded map, a video player, a chat widget or a modal dialog. WCAG 2.1.2 forbids it. A dialog should hold focus while it's open, but Escape or a close button must let you out, and focus should return to the button that opened it.

Problem: no way to skip the menu

Without a skip link, a keyboard user tabs through every menu item on every page. Add a link as the first item in the page that jumps to the main content. It can stay hidden until it receives focus.

<a class="skip-link" href="#main">Skip to main content</a>
…
<main id="main" tabindex="-1">…</main>

Practical takeaways

• Never remove focus outlines without putting a better one in their place.
• Use native buttons, links and form controls; they're keyboard-ready.
• Keep the tab order the same as the visual reading order.
• Test dropdown menus, dialogs and carousels by keyboard after every theme or plugin update.

Sources

• W3C: Understanding 2.1.1 Keyboard
• W3C: Understanding 2.4.7 Focus Visible
• W3C: Easy checks, keyboard access and visual focus