Keyboard navigation is the ability to browse and operate a website using only the keyboard (Tab, Enter, arrow keys) without a mouse. It is a fundamental requirement for users with limited motor skills and for screen reader users. WCAG requires all functionality to be operable by keyboard, the keyboard focus to be visible, and users never to get trapped inside a component.
WCAG's operable principle defines full keyboard operability as a fundamental requirement. It has two critical companions: a visible focus indicator that shows where the keyboard focus currently is, and the absence of keyboard traps that lock the user inside a component. Every interaction, including menus, modals, form steps and custom components, must be completable using only Tab, Shift+Tab, Enter, Space and the arrow keys. Problems usually appear in custom-built components: buttons made from div elements never enter the tab order, custom dropdowns ignore arrow keys, and focus gets lost when a modal closes.
Removing the focus outline with CSS is a common and harmful habit; without a focus indicator, keyboard users cannot tell where they are on the page. Skip links that bypass repeated menus help keyboard users reach the main content quickly on long pages. Testing requires no special tool: put your mouse aside and try to use your site end to end with the keyboard alone. You should be able to reach every interactive element, see where you are, and complete every flow such as sign-up, checkout and form submission. Automated scans detect part of the focus management issues; the rest surfaces in this short manual test. Fixes belong in the source code at component level.
Frequently asked questions
How do you test keyboard navigation?
Put the mouse aside and use the site with the keyboard only: move forward with Tab and back with Shift+Tab, activate with Enter and Space, and try the arrow keys in menus and tabs. Answer three questions: can I reach every interactive element, can I see where the focus is, and can I complete critical flows such as sign-up and checkout? Pay special attention to focus moving into a modal when it opens and returning when it closes.
Why does the focus indicator matter?
The focus indicator is the keyboard user's sense of position on the page: if you do not show which element is selected, the user navigates blindly. Resetting the outline property for design reasons is therefore a serious accessibility mistake. The right approach is not to remove the indicator but to design a high-contrast focus style that fits your brand. WCAG defines visible keyboard focus as an explicit requirement.
This content is for information only and is not legal advice.