Quick answer: Keyboard navigation accessibility means every link, button, form field and menu on your site can be reached and used with a keyboard alone, in a sensible order, with a clear visible marker showing where you are. You can test it yourself in about fifteen minutes: put the mouse aside, press Tab to move forward, Shift and Tab to move back, Enter and Space to activate things, and Escape to close pop-ups. If you get stuck, lose track of where focus is, or cannot reach something, you have found a problem that real visitors face every day.
Who relies on a keyboard
Plenty of people browse without a mouse or trackpad. They include:
- People with motor impairments, tremors or repetitive strain injuries
- Blind and low-vision users who use screen readers, which are driven by keyboard commands
- People using switch devices, sip-and-puff controls or voice software that mimics key presses
- Power users who simply prefer the keyboard because it is faster
- Anyone whose trackpad has just stopped working
If a visitor cannot open your menu or submit your contact form with a keyboard, that visitor cannot become a customer. Keyboard access is also part of accessibility law in many places, and it is a core requirement of the Web Content Accessibility Guidelines (WCAG) 2.1.
The WCAG rules that apply
You do not need to memorise the guidelines, but it helps to know the main success criteria behind a keyboard test:
- 2.1.1 Keyboard: all functionality is available from a keyboard.
- 2.1.2 No Keyboard Trap: if you can move focus into something, you can move it out again with the keyboard.
- 2.4.1 Bypass Blocks: there is a way to skip repeated content, such as a “skip to content” link.
- 2.4.3 Focus Order: focus moves in an order that preserves meaning.
- 2.4.7 Focus Visible: you can always see which element has focus.
These are Level A and AA criteria, the levels most organisations aim for.
The keys you need
| Key | What it does |
|---|---|
| Tab | Move to the next link, button or field |
| Shift + Tab | Move to the previous one |
| Enter | Follow a link or press a button |
| Space | Press a button, tick a checkbox, scroll the page |
| Arrow keys | Move within radio buttons, select menus, tabs and sliders |
| Escape | Close a dialog, menu or pop-up |
On a Mac, Safari skips links when tabbing by default. Turn on “Press Tab to highlight each item on a webpage” in Safari’s Advanced preferences, or test in Chrome or Firefox instead.
A fifteen-minute keyboard test
Pick your most important pages: the home page, a service or product page, your contact page and your checkout or booking flow if you have one. Then work through these steps.
1. Start at the top
Click in the browser address bar, then press Tab. The first thing that receives focus should be a “skip to main content” link, often hidden until focused. Press Enter and check that focus jumps past the header and navigation to the main content.
2. Watch the focus indicator
Keep pressing Tab. At every step you should see a clear outline, underline or colour change on the focused element. If focus disappears, even briefly, note where. The most common cause is CSS like outline: none added to remove the default outline because someone found it ugly.
3. Check the order
Focus should follow the visual reading order: left to right, top to bottom for English pages. Jumps from the header to the footer and back, or into hidden content, suggest problems with positive tabindex values or with the order elements appear in the HTML.
4. Open the navigation
Can you open dropdown menus and reach every submenu item? Menus that only open on hover are a classic failure. On mobile layouts, check that the hamburger menu button can be reached, opened with Enter or Space, and closed with Escape.
5. Use every interactive component
Try sliders and carousels, tabs, accordions, video players, image galleries, date pickers and maps. Each should work with keys and never leave you stuck. If you can tab into an embedded map or video and cannot tab out again, that is a keyboard trap.
6. Test pop-ups and modals
When a dialog opens, focus should move into it. While it is open, Tab should cycle through the dialog’s controls only, not the page behind it. Escape should close it, and focus should return to the button that opened it. Newsletter pop-ups and cookie notices often fail all of these at once.
7. Complete a form
Fill in and submit your contact or quote form using only the keyboard. Check that labels are clear, required fields are announced, and error messages appear near the field with focus moved to the first error. Our guide to form error messages explains how to write errors people can act on.
8. Finish a purchase or booking
If you sell online, add a product to the cart and go as far as you can through checkout. Custom-styled checkboxes, quantity selectors and payment fields inside iframes are frequent trouble spots.
Write down each problem with the page, the element and what happened. That list becomes your developer’s to-do list.
Common failures and how developers fix them
Removed focus outlines
Problem: outline: none or outline: 0 in the stylesheet hides focus.
Fix: Restore a visible focus style. It can match your brand, for example a thick outline or a strong background change, as long as it has enough contrast against its surroundings. Our post on colour contrast for accessibility covers contrast checks.
Clickable divs and spans
Problem: Elements built with div or span and a click handler cannot receive focus or respond to Enter.
Fix: Use real button and a elements. Native HTML elements come with keyboard support built in. If a custom element is truly needed, it must get tabindex="0", a suitable ARIA role and handlers for Enter and Space.
Positive tabindex values
Problem: tabindex="1" or higher forces elements to the front of the tab order and scrambles it.
Fix: Remove positive values. Use tabindex="0" to add an element to the natural order and tabindex="-1" to allow focus by script only.
Hover-only menus
Problem: Submenus appear on mouse hover but not on keyboard focus.
Fix: Make the parent item a button that toggles the submenu, with aria-expanded showing its state. Accessible menu patterns are widely documented, and many well-built themes already include them.
Hidden content that still takes focus
Problem: Off-screen menus or collapsed panels still contain focusable links, so focus vanishes into invisible content.
Fix: Hide closed panels with display: none or the hidden attribute, or remove their links from the tab order until opened.
Modals without focus management
Problem: Focus stays behind the dialog or escapes it.
Fix: Move focus into the dialog when it opens, keep it there while open, close on Escape and return focus afterwards.
Will an accessibility plugin fix this?
Some toolbars and overlays promise to fix accessibility with one line of code. They cannot rewrite how your menus, forms and widgets are built, which is where most keyboard problems live. We cover the trade-offs in our article on accessibility overlays. Automated checkers are useful for catching missing labels and contrast issues, but a manual keyboard test is still the only reliable way to find traps and focus problems.
Making keyboard testing a habit
- Add a keyboard pass to your launch checklist for every new page template
- Retest after installing plugins that add pop-ups, sliders or chat widgets
- Include a keyboard user, or a screen reader user, in user testing sessions when you can
- Ask developers to check focus styles whenever they change the stylesheet
FAQ
Is keyboard accessibility a legal requirement?
In many countries, accessibility laws and public sector rules refer to WCAG, and keyboard access is part of WCAG Level A. Requirements vary by country and sector, so check what applies to you.
Do I need to test on mobile too?
Yes, if you can. Some people pair keyboards with tablets and phones. At minimum, test your responsive layout at a narrow window width on desktop.
What if my theme fails the test?
Small issues like focus styles are often quick CSS fixes. Broken menus and modals may need theme changes or a replacement component.
Build pages everyone can use
A site that works by keyboard is easier for everyone, and it removes barriers between visitors and the action you want them to take. If you would like your key pages tested and fixed, see how we help businesses turn visitors into customers.
