How a page becomes usable with the keyboard

How it works

The Tab key moves the focus from one control to the next: links, buttons, form fields. Enter follows a link; Space or Enter press a button. This is how people who can't use a mouse work, along with screen reader users and many who simply type faster than they click.

For this to work it takes three things: every control can be reached by keyboard, the order follows what you see, and the element that has the focus is visibly highlighted, usually by an outline.

WCAG 2.2 requires keyboard operation (success criterion 2.1.1) without a trap you can't get out of (2.1.2), a meaningful focus order (2.4.3), a visible focus (2.4.7), and that the focus is not entirely hidden by other content, such as a sticky header (2.4.11).

What matters

• No tabindex above 0. A value such as tabindex="3" pulls an element ahead of all others. The order then no longer follows the page. tabindex="0" (join the natural order) and tabindex="-1" (focusable by script only) are fine.
• Order through the code. The tab order follows the HTML. If it is wrong, reorder the HTML rather than moving elements around visually with CSS.
• A visible focus. outline: none without a replacement means operating the page blind. A clear focus outline is enough, see below.
• Real controls. a, button, input and select are focusable and operable out of the box. A div with a click handler is not.
• Menus, dialogs and sliders can be opened, operated and closed with Escape; while a dialog is open, the focus stays inside it.

A focus outline that appears when using the keyboard, not on a mouse click:

:focus-visible {
  outline: 3px solid #1a5fb4;
  outline-offset: 2px;
}

Pick a colour that stands out from the background. For the visible focus, bytereport presses Tab up to 40 times in the browser and compares, for each element reached, its outline, shadow, border, background and text colour and underline with and without focus.

How to set it up

Focus styles and tab order live in the theme: in its CSS and in the templates for menus, sliders and pop-ups. Many themes and CSS resets remove the focus outline; whoever maintains the theme replaces it with a style of their own. Try it yourself: click into the address bar, press Tab repeatedly and check that you can always see where you are, and that you reach everything you can reach with the mouse.