Testing Keyboard Navigation in Under Ten Minutes
August 10, 2026 · 2 min read
Photo by Michael Marais on Unsplash
A meaningful slice of accessibility problems can be caught with zero tools and zero specialized knowledge: put your mouse aside, and try to complete a core task on your site using only the Tab, Shift+Tab, Enter, and arrow keys.
What to actually check
Can you reach everything? Tab through the page from the top. Every interactive element — links, buttons, form fields, custom dropdowns — should get focus in a sensible order. If Tab silently skips past something clickable, a keyboard user can't reach it at all, full stop.
Can you see where you are? Every focused element needs a visible focus indicator — a border, outline, or highlight that makes it obvious which element is currently selected. A shocking number of sites disable the browser's default focus outline for aesthetic reasons and never replace it with anything, which means keyboard navigation becomes technically possible but practically unusable — you're navigating blind.
Can you escape what you opened? Open a modal, a dropdown menu, a mobile navigation drawer using only the keyboard, and confirm Escape (or a clearly indicated alternative) closes it and returns focus to a sensible place — usually back to the element that opened it, not stranded somewhere else on the page.
Does order match what you'd expect visually? Tab order should generally follow reading order — left to right, top to bottom for most layouts. CSS that visually repositions elements without a matching change to the underlying HTML order creates a confusing mismatch: what you see and what Tab does can diverge.
The most common failure
By far the most frequent issue in a ten-minute keyboard pass: a custom-built dropdown, modal, or accordion — something a developer built from scratch with <div>s and JavaScript instead of native HTML elements — that looks and works fine with a mouse but simply cannot be operated with a keyboard at all, because none of the necessary keyboard event handling was built in. Native <button>, <select>, and <a> elements get this behavior for free; custom-built equivalents have to earn it deliberately.