How to test keyboard navigation on your website in ten minutes

You do not need an accessibility consultant or paid software to find the worst keyboard problems on your site. You need a browser, a notepad and ten minutes. This routine shows you how to test keyboard navigation one key at a time, what correct behaviour looks like for each key, and what a failure looks like so you can record it clearly for whoever fixes your site.

Pick one representative page to start, ideally one with a menu, a form and some interactive element such as a slider, tabs or a popup. A product page or contact page usually works well.

Before you start: two minutes of setup

1. Use a desktop browser such as Chrome, Edge or Firefox. On a Mac, Safari needs “Press Tab to highlight each item on a webpage” switched on in its settings before Tab reaches links, so Chrome or Firefox is simpler for this test.
2. Move the mouse away and do not touch it or the touchpad until you finish. Hovering can hide problems.
3. Click in the address bar once, type the page URL and press Enter, so focus starts at the top of the browser.
4. Open a notes file with three columns in mind: page, what you did, what went wrong.

Minute 2 to 4: Tab and Shift+Tab through the page

Press Tab slowly, pausing after each press. Then press Shift+Tab to move back through a few elements.

What should happen

• The first stop is ideally a “Skip to main content” link, which may only appear when it receives focus.
• Every link, button and form field receives focus in a sensible reading order, usually left to right and top to bottom.
• You can always see which element has focus, through an outline, underline or colour change.
• Shift+Tab retraces the same path in reverse.

What failure looks like

• Focus vanishes: you press Tab and nothing visibly changes. Either the focus style was removed or focus went into hidden content such as a closed mobile menu.
• Focus jumps around: from the header to the footer and back to the middle.
• Things are skipped: an icon button, “Add to cart” or a filter never receives focus.
• Stuck in a loop: focus cycles inside a widget and cannot escape. Note this as a high-priority keyboard trap.

Record how many Tab presses it takes to reach the main content. If it is dozens, a skip link would help.

Minute 4 to 6: Enter and Space on controls

Tab to each control type and activate it. The expected keys differ slightly by element:

• Links: Enter follows the link.
• Buttons: both Enter and Space should activate them.
• Checkboxes: Space toggles them on and off.
• Radio buttons: focus moves into the group; Space selects if nothing is chosen yet.
• Dropdown select boxes: Space or Alt+Down Arrow opens the list in most browsers.

What failure looks like

A control that has focus but does nothing on Enter or Space is usually a div styled as a button. A button that works with Enter but not Space suggests custom scripting that only listens for one key. Pressing Space on a fake button may simply scroll the page down, which is a telltale sign.

Minute 6 to 8: Escape and arrow keys in menus and popups

Dropdown menus

Tab to a menu item with a submenu. Press Enter, Space or Down Arrow, depending on how it is built, and check that the submenu opens and its items can be reached. Then press Escape: the submenu should close and focus should stay on the parent item.

Modals and popups

Trigger a popup such as a newsletter form, quick view or cookie settings panel. Check that:

1. Focus moves into the popup when it opens.
2. Tab stays within the popup while it is open, rather than wandering to the page behind.
3. Escape closes it, and there is also a close button you can reach.
4. After closing, focus returns to the button that opened it, not the top of the page.

Arrow key widgets

Tabs, radio groups, sliders, carousels and some menus use arrow keys to move between options. Tab to the widget and try Left, Right, Up and Down. Arrow keys should move between options within the group, and Tab should move out of the group entirely. If arrow keys scroll the whole page instead, the widget likely lacks keyboard support.

Minute 8 to 10: complete one real task

Now put the pieces together. Using only the keyboard, complete the page’s main goal:

• Fill in and submit the contact form, deliberately leaving a required field empty first to see if you can reach and understand the error.
• Or choose a product variant, change quantity, add to cart and reach the checkout button.
• Or search the site and open a result.

Pay attention to anything that appears after an action: error messages, a mini-cart slide-out, a toast notification, a WhatsApp chat bubble. Can you reach it, use it and dismiss it?

Recording failures so they get fixed

Vague notes like “menu broken” slow everyone down. Write each issue with enough detail to reproduce it:

1. Page URL
2. Element, such as “Search icon in header” or “Size selector on product page”
3. Keys pressed, for example “Tab x 14, then Enter”
4. Expected result
5. Actual result
6. Severity: blocker (cannot complete task), serious (possible but confusing), minor

Fix blockers first, particularly traps and unreachable checkout or form controls.

Repeat the routine on your key templates

Once one page is done, run the same ten-minute test on your home page, a listing page, the cart and checkout, and any booking or quote form. Re-run it after theme updates or new plugins, since those often introduce regressions. If your notes reveal problems in custom components you cannot fix yourself, send them to our support team and we can work through the list with you.

Frequently asked questions

Can automated tools test keyboard navigation for me?

Tools like Lighthouse catch some related issues, such as missing labels, but they cannot judge whether focus order makes sense or whether a widget traps focus. A manual test is still needed.

Why can’t I tab to links in Safari?

By default Safari’s Tab key moves only between form controls. Enable the option to highlight each item with Tab in Safari’s advanced settings, or use Option+Tab.

How often should I run a keyboard test?

Run it after any design change, new plugin or feature launch, and as part of a periodic review of your most important pages.