Warninga11y.keyboard-walkthrough

Someone has been through the site with a keyboard

Why it matters

Everything this pack checks automatically can pass on a site nobody can use without a mouse. Whether focus is visible, whether it goes in a sensible order, whether a dropdown can be opened and closed, whether a dialog traps focus inside it and Escape gets you out, whether a "skip to content" link appears when you Tab — none of that can be read out of HTML. It takes ten minutes and a keyboard.

It is also the check that finds the worst problems, because a custom component built out of <div>s usually works beautifully with a mouse and not at all without one. And it is not a minority: people with tremors, RSI or low vision navigate this way, and so does anyone whose trackpad has just died.

Source: WCAG 2.2, 2.1.1 Keyboard and 2.4.7 Focus Visible.

How to fix it

Put the mouse down. Start at the top of the home page and press Tab through to the bottom, then do it on the busiest template — a product page, a form, whatever your visitors actually use. Watch for:

- Can you see where you are? There must be a visible focus ring at every step. If your CSS has outline: none anywhere, that is why. - Does the order make sense? It should follow the page as it reads. - Can you do everything? Open the menu, work the carousel, send the form, close the cookie banner and the dialog — all with Tab, Enter, Space, the arrow keys and Escape. - Can you get out? Once a dialog is open, Escape should close it and focus should come back to where you were. - Does anything trap you? If Tab takes you into something you can't Tab out of, that is the most serious thing on this list.

Tick this when someone has done it on the home page and the busiest template, and written down what they found.