The 2-minute keyboard test every website owner can do

Many people use the web without a mouse: people who are blind and use a screen reader, people with tremors or limited hand movement, people who use a switch or voice control, and plenty of power users. All of them depend on the keyboard working.

The good news: you can test this yourself in two minutes, with no tools.

How to do the test

1. Open your website in a desktop browser.
2. Click once in the address bar, then put the mouse aside.
3. Press Tab to move forward through the links, buttons and form fields. Shift + Tab goes back.
4. Press Enter to follow a link or press a button, and Space to tick a checkbox. Use the arrow keys in menus, radio buttons and dropdowns, and Escape to close pop-ups.
5. Try to do the one thing your site is for: buy a product, book a table, send the contact form.

On a Mac, Safari skips links by default. Turn on Settings → Advanced → Press Tab to highlight each item on a webpage, or use Chrome or Firefox for the test.

What to look for

1. Can you see where you are?

Every time you press Tab, something on the page should be clearly highlighted: an outline, an underline or a change of colour. If the highlight disappears, someone using a keyboard is lost. This is called a visible focus (WCAG 2.4.7).

A common cause is CSS that removes the browser's outline. The fix is to bring a clear one back:

See focus that isn't visible.

2. Is the focused element hidden?

Sticky headers, cookie banners and chat buttons can cover the element that has focus. WCAG 2.2 added a rule for this (2.4.11). If you can't see what's focused, add scroll-padding-top for a sticky header, or move the banner so it doesn't cover the content.

3. Does the order make sense?

Focus should move in the order you read: top to bottom, left to right. If it jumps from the header to the footer and back, the cause is often a positive tabindex or a layout built with CSS that doesn't match the HTML order. Remove tabindex values above 0 and put the HTML in reading order.

4. Can you reach and use everything?

Menus, dropdowns, sliders, tabs and "add to cart" buttons must all work with the keyboard. The usual culprit is a clickable div instead of a real button:

5. Do you get stuck?

If Tab keeps going round inside a video player, a map or a pop-up and you can't get out, that's a keyboard trap (WCAG 2.1.2). Pop-ups should move focus inside when they open, close with Escape, and return focus to the button that opened them.

A skip link helps everyone

If your header has 30 links, a keyboard user has to press Tab 30 times on every page before reaching the content. A skip link fixes that: the first Tab shows a "Skip to content" link.

See adding a skip link.

What next

Write down every place where you got lost or stuck, then fix them in your templates, so every page gets the fix. Our free checker above finds many related problems automatically, such as buttons without a name and controls inside other controls, but only a person pressing Tab can tell whether the order makes sense and the site is usable.

Tried it on your site? Share what you found in our Website Accessibility Help group.