FeaturesPricingAudit GuideFree StatementDashboard →

Enable Full Keyboard Navigation

Learn how to ensure all page functionality is accessible via keyboard. Includes code examples and testing methods.

6 min read
critical severityWCAG Level AWCAG 2.1 Success Criterion 2.1.1Manual review needed

What Is It?

Keyboard navigation means all functionality available by mouse (clicking buttons, filling forms, playing videos, opening menus) must also work with keyboard (Tab, Enter, Space, Arrow keys).

Affected users: Motor disability users, Parkinson's users, tremor users, voice control users, switch users, users on mobile devices without mouse support

Why It Matters

People with motor disabilities, tremors, or other conditions cannot use a mouse effectively. Voice control users and switch users depend on keyboard events. Mobile users also benefit from keyboard shortcuts.

How to Detect This Issue

Test by navigating your entire site using only Tab, Shift+Tab, Enter, Space, and Arrow keys. Check that nothing is 'stuck' or unreachable. Use automated tools to find keyboard traps.

Automated detection: Run a free SiteArmor scan to automatically detect this issue across your entire website. Check your site →

Code Examples & Fixes

HTML / CSS

Before (inaccessible)
<div onclick="submitForm()">Submit</div>
After (accessible)
<button onclick="submitForm()">Submit</button>

Use semantic HTML. <button> elements are keyboard accessible by default. Only <button>, <a>, and form controls are keyboard navigable without additional JavaScript.

React / Next.js

Before
<div onClick={handleClick}>Click me</div>
After
<button onClick={handleClick} onKeyDown={(e) => e.key === "Enter" && handleClick()}>Click me</button>

Use <button> element, not div. If you must use div, add tabIndex={0} and handle Enter/Space keys with onKeyDown handler.

WordPress

Before
Custom menu built with <div> elements and JavaScript click handlers
After
Menu built with <ul>, <li>, <a> or using WordPress menu components with built-in keyboard support

Use semantic HTML lists for menus. WordPress themes should handle arrow key navigation in dropdowns automatically.

Shopify Liquid

Before
Product filters implemented as <div> elements with click handlers
After
Product filters implemented as proper form controls (<input>, <select>) or with aria-expanded and keydown handlers

Shopify liquid: use native form elements where possible. For custom interactions, add keyboard event handlers and ARIA attributes.

Common Mistakes

✗

Building interactive elements with <div> and JavaScript instead of semantic HTML

✗

Creating dropdown menus that close on click but don't work with keyboard arrow keys

✗

Focusing on Tab key but forgetting Enter, Space, and arrow keys

✗

Not testing that Tab order follows logical reading order

✗

Making elements focusable but not showing focus indicators

Frequently Asked Questions

What's the difference between Tab and arrow keys?
Tab moves between focusable elements. Arrow keys control options within a focused element (like moving between radio buttons or menu items). Both are required.
Should I use tabindex="-1"?
Yes, for elements you don't want in tab order. Use tabindex="0" to make non-semantic elements focusable, but prefer semantic HTML like <button>.
How do I test keyboard navigation?
Unplug your mouse. Navigate your entire site using only keyboard. Try Tab, Shift+Tab, Enter, Space. Can you access all features? Can you close all dialogs?
What about keyboard shortcuts?
Optional but helpful. If you add shortcuts like 'S' to search, document them and avoid conflicts with browser/OS shortcuts. Don't override standard shortcuts.

Check your website for free

Get your ADA, WCAG, privacy & security score in 90 seconds.

No credit card
WCAG 2.1
ADA
Privacy

Related guides