Back to blog

How to Test Keyboard Navigation on a Website

Try your website without a mouse to find links, buttons, menus, and forms that are hard to reach or use with a keyboard.

4 min read
Person testing website navigation with the keyboard on a laptop

A website may look fine and work well with a mouse, yet become difficult to use when someone relies on a keyboard. A short manual test can uncover controls that cannot be reached, menus that cannot be exited, and forms where it is hard to tell which field is active.

This review does not certify conformance or replace a full evaluation. It does provide a straightforward way to find problems before launch or after a change. The W3C’s WCAG 2.2 includes criteria related to keyboard use and focus. To determine whether applicable requirements are met, review the full standard and your website’s context.

Set up a simple test

Open a representative page, such as one with the main navigation, links, a button, and a form. Disconnect the mouse or simply avoid using it. In most browsers, Tab moves forward among interactive controls and Shift+Tab moves backward. Arrow keys, Enter, the space bar, and Escape may work differently depending on the control and browser.

Do not assume every key should behave the same way in every component. Observe what each control does and whether the interaction makes sense. If the page has a menu, accordion, or dialog, test it separately. Note the browser, page, and exact step where each difficulty occurs; this makes the issue easier to reproduce.

Track focus and check that it stays visible

Press Tab from the beginning and watch each step. Focus is often indicated by an outline or another visual change. If it disappears against a background, is covered by a fixed header, or jumps to an unexpected area, a user may lose track of their position.

Focus should move in an order that supports reading and using the page. The sequence need not match every visual detail of the design, but people should be able to tell which element is active and move to the next without surprises. Repeat the test with Shift+Tab to check whether you can move backward. WAI recommends evaluating accessibility early and throughout development; checking regularly can help surface barriers while they are still easier to fix.

Diagram of a webpage with the focus indicator moving across its controls
A manual review helps check whether focus reaches controls and is clearly visible.

Test the controls, not just the path

Reaching a control is not enough: it must also be usable. On each page, check the following:

  • Links and buttons: Can you activate them with the keyboard? Is their purpose understandable from their text or context?
  • Menus: Can you open and close the menu, move through its options, and leave it without getting stuck?
  • Forms: Can you complete each field, change options, and submit the form? If an error appears, can you find and correct it?
  • Dialogs: When a dialog opens over the page, does focus move into it and return to a logical place when it closes?
  • Expandable or interactive items: Can the keyboard reach and select all available options?

This checklist helps you find behavior that needs attention; it is not a declaration that a specific criterion has been met. Expected behavior depends on the component and the techniques used to build the site.

Look for common obstacles

Watch for these signs: focus is not visible; an important control responds only to a mouse; the sequence jumps unpredictably; a menu stays open with no clear way to close it; a dialog traps focus; or focus disappears after content updates.

Also consider whether controls have understandable labels. An icon without a clear name may be difficult to interpret even if you can reach it. When you find a problem, write down a specific sequence, such as: “On the contact page, Tab reaches the Submit button but never reaches the file attachment option.” Avoid noting only “it does not work”: details make an issue reproducible and help you verify a fix.

Use tools as a supplement

A browser extension or analyzer may help identify some issues, but it does not replace manual testing. WAI explains that evaluation tools can identify potential barriers, but some aspects require human intervention and judgment. A page with no tool warnings therefore does not prove that everyone can complete its tasks.

Repeat the test on important pages and flows, especially after changing navigation, forms, or components. For a broader review, combine this check with other testing methods and an expert evaluation when appropriate.

A useful test is not about rushing through a page; it is about checking whether each task can be completed without losing your place.

Start today: choose a key task, such as sending an inquiry. Go through the entire flow with Tab, Shift+Tab, and the keys needed to operate the controls. Note each point where you get stuck, fix one issue at a time, and test again. This turns a general impression into specific, verifiable findings.