Keyboard Navigation Tester

What is Keyboard Navigation?

Keyboard navigation allows users to interact with web content without a mouse. This is essential for users with motor disabilities, power users, and anyone using assistive technology. WCAG 2.1 Success Criterion 2.1.1 requires all functionality to be operable through a keyboard interface.

What This Tool Checks

• Tab order: The sequence in which focusable elements receive focus, including the effect of tabindex attributes
• Interactive elements: Whether clickable elements like buttons and links are keyboard-reachable
• Keyboard traps: Elements with tabindex that could create navigation traps or confusing focus order
• Missing semantics: Divs or spans with click handlers that lack proper roles and keyboard support
• Focus indicators: Checks for CSS that removes or hides focus outlines

Common Keyboard Accessibility Issues

• Non-focusable interactive elements: Using div/span with onclick instead of button/a elements
• Positive tabindex values: Using tabindex="1" or higher disrupts natural tab order
• Hidden focus outlines: CSS like outline: none without a visible alternative removes focus indicators
• Missing keyboard handlers: Elements with click handlers but no keydown/keypress handlers
• Disabled elements in tab order: Disabled elements should not receive focus

Best Practices

• Use native HTML elements (button, a, input) which have built-in keyboard support
• Avoid positive tabindex values; use tabindex="0" to add elements to natural tab order
• Use tabindex="-1" for elements that should be programmatically focusable but not in tab order
• Always provide visible focus indicators (outline, border, or background change)
• Ensure all mouse-operable actions are also keyboard-operable
• Test with Tab, Shift+Tab, Enter, Space, Escape, and arrow keys

You can embed this util on your own site as a widget. Adding ?embed=1 to the URL loads a compact version with just the tool itself; no header, menu, or documentation. Paste this snippet into your HTML:

Copy snippet Adjust the height to taste.