How to test your website with only a keyboard in 10 minutes

Put the mouse aside, click once in the browser's address bar, and use only Tab, Shift+Tab, Enter, Space, the arrow keys and Escape to do what a customer does: find a product, choose an option, add it to the cart and reach checkout. Watch for four things: whether you can reach every control, whether you can always see where you are, whether the order makes sense, and whether you ever get stuck. That is W3C's own quick keyboard check, and on a small store it takes about ten minutes.¹

It matters because WCAG 2.2 requires all functionality to be operable through a keyboard (2.1.1, level A), with no keyboard traps (2.1.2, level A).³ People who cannot use a mouse, including many screen reader users and people with tremors or limited hand movement, rely on it. The US Department of Justice names the lack of keyboard navigation among the barriers it sees on websites.⁸

Before you start (1 minute)

• On a Mac, turn on keyboard access to all controls in the system keyboard settings first; Windows does not need this.¹
• Pick three pages: the home page, one product page with options, and the cart. Add the contact page if you have a form there.
• Have a note open to jot down each problem with the page and what you were trying to do.

The keys you need

These are the conventions WebAIM lists for standard controls: links respond to Enter, buttons to Enter and Space, and radio buttons to the arrow keys.²

Minutes 1 to 3: the header and menu

1. Press Tab once. The first thing you reach should ideally be a "Skip to content" link, which appears when focused. WCAG 2.4.1 asks for a way to bypass blocks repeated on every page; a skip link is the usual way, and headings and landmarks are other accepted techniques.⁴
2. Keep tabbing through the header. Every link, the search button, the account link and the cart should get a visible outline or highlight as you reach it. If focus seems to vanish, the theme has probably removed the focus outline, which fails 2.4.7 Focus Visible (level AA).³
3. Open a dropdown menu. Shopify's own theme guidance is that Enter or Space opens a dropdown, Tab moves into it, and Escape closes it and returns focus to the button that opened it.⁷ If a submenu only opens when the mouse hovers over it, keyboard users cannot reach those pages.

Minutes 3 to 6: a product page

4. Choose a variant. Size and colour swatches should be reachable and selectable with the keyboard. A row of swatches built as plain coloured boxes, rather than buttons or radio inputs, is a common failure.
5. Change the quantity with the plus and minus buttons, or by typing in the field.
6. Use the image gallery. Can you move to the next image without a mouse? Can you open the zoom view and close it again with Escape?
7. Press Add to cart. If a cart drawer opens, focus should move into it. The usual pattern for a modal is that focus moves inside when it opens, Tab stays inside it, Escape closes it, and focus returns to the button that opened it.⁶

Minutes 6 to 9: cart, pop-ups and the rest

8. In the cart, change a quantity and remove an item using only the keyboard.
9. Tab to the checkout button and press it.
10. Trigger the pop-ups you use: newsletter, cookie banner, chat. Each must be possible to close from the keyboard. A pop-up you can tab into but not out of is a keyboard trap, which fails 2.1.2.³¹
11. Watch the sticky header. As you tab down the page, check that the focused item never disappears completely behind a sticky header, a cookie banner or a chat bubble. That fails 2.4.11 Focus Not Obscured (Minimum), new in WCAG 2.2.⁵

Minute 10: write down what you found

W3C's Easy Checks list what to look for, and they make a good set of notes:¹

• Reach: could you get to every link, field, button and media control?
• Escape: could you leave everything you entered?
• Order: did focus follow the reading order of the page? WCAG 2.4.3 asks that focus order preserves meaning and operability.³
• Visibility: could you always see which element had focus?
• Everything works: could you do every action that a mouse user can, including anything shown on hover?
• Dropdown lists: did arrowing through a select list's options trigger navigation or a page change before you chose? It should not.

The most common causes, and the fix for each

Shopify's theme guidance adds two rules worth checking in any theme: only use tabindex values of 0 or -1, and do not rely on hover to show content.⁷

What this test does not cover

A keyboard pass is quick and finds real barriers, but W3C is clear that its easy checks cover only a few issues and are not a full evaluation.¹ It will not tell you what a screen reader announces, whether contrast is adequate, or whether images have useful alt text. Pair it with an automated check, such as Jralo's free check, which tests your homepage and up to five linked pages against WCAG 2.2 A and AA and points you to the countries whose accessibility laws are likely relevant to you, and with a short screen reader test. Automated tools find many problems, not all, which is why a hands-on pass like this one is worth the ten minutes; see why automated testing finds some problems but not all.

Repeat the test after any theme update, new app or redesign, because those are when keyboard support breaks. For the screen reader and contrast passes, see how to check your website in 15 minutes.