Using a page with the keyboard

Unplug the mouse and press Tab: every link, button and field should light up in turn, in the order you read the page.

Who uses the keyboard

Many people never touch a mouse. Some cannot hold one steady; some use a switch, a mouth stick or speech recognition that sends key presses; screen reader users mostly move with the keyboard too. WCAG 2.2 success criterion 2.1.1 Keyboard, at level A, says everything on the page must work from a keyboard. Criterion 2.1.2 No Keyboard Trap adds that if focus can move into a part of the page, it must be able to move out again with the keyboard.

Use elements that already work

Links with an href, button, input, select and textarea are focusable out of the box and respond to the right keys. A div with a click handler is not: it cannot be reached with Tab, Enter does nothing, and a screen reader does not announce it as a button. MDN's advice is plain. Do not use tabindex to make a div act like a button; use the button element, which comes with its role and keyboard behaviour built in.

Focus order and tabindex

The Tab order follows the order of elements in the HTML source. Criterion 2.4.3 Focus Order asks that this order keeps the meaning and use of the page intact, so the simplest fix for a strange order is to rearrange the HTML. MDN lists three kinds of tabindex value. Zero puts an element into the normal order. A negative value, usually -1, takes it out of the Tab order but still lets a script call focus() on it, which is useful for a dialog or an error message. A positive value forces the element ahead of everything else, and MDN recommends using only 0 and -1, because positive values make the order hard to follow.

Seeing where you are

Keyboard users need to see which element has focus. Criterion 2.4.7 Focus Visible, at level AA, asks for a visible focus indicator, so a stylesheet rule like outline: none with nothing in its place is a failure. WCAG 2.2 added two related criteria. 2.4.11 Focus Not Obscured (Minimum), at level AA, says the focused item must not be completely hidden behind something the author added, such as a sticky footer or a cookie banner. 2.5.8 Target Size (Minimum), also AA, asks that things you click or tap are at least 24 by 24 CSS pixels, or have enough space around them.

One more pattern helps a great deal: the skip link. A site with a long menu makes keyboard users press Tab through every menu item on every page. A link placed first in the page, pointing to the main content, lets them jump past it in one key press. It can be visually hidden until it receives focus.

Testing takes two minutes. Click in the address bar, then press Tab repeatedly through the whole page. Check that every control can be reached, that the order matches the reading order, that you can always see where focus is, and that Enter and Space do what a mouse click would. Then press Shift+Tab to come back. Any control you cannot reach, or any place where focus disappears, is a bug.