Keyboard Navigation
What is keyboard navigation and why must every element be reachable?
What is keyboard navigation?
Keyboard navigation means that every interactive element on a page — links, buttons, form fields, menus, and custom widgets — can be reached and operated using only the keyboard (typically via the Tab, Enter, Space, and arrow keys). This is a fundamental accessibility requirement because many users cannot use a mouse.
Keyboard navigation is the ability to reach and operate every interactive element on a page using only the keyboard, typically via Tab, Enter, Space, and arrow keys. This is a fundamental WCAG requirement because users with motor disabilities or visual impairments often cannot use a mouse.
Why does keyboard navigation matter?
Users with motor disabilities, repetitive strain injuries, or visual impairments often rely entirely on keyboard input. If a button or link can only be activated with a mouse click, those users are completely locked out. Keyboard traps (where focus gets stuck in a component with no way to Tab out) are especially harmful and represent a critical WCAG failure.
Key statistics
An estimated 2.5 billion people worldwide need one or more assistive technology products, many of whom rely on keyboard-only navigation.
Source: World Health Organization
67% of screen reader users reported that not all functionality being available via keyboard is one of the most problematic issues they encounter.
Source: WebAIM Screen Reader Survey
How to fix it
-
1
Use native HTML interactive elements (<button>, <a>, <input>, <select>) whenever possible, since they have built-in keyboard support.
-
2
If you must use non-interactive elements like <div> or <span> as buttons, add tabindex="0", a role attribute (e.g., role="button"), and keydown event handlers for Enter and Space keys.
-
3
Test your entire site by unplugging your mouse and navigating with Tab, Shift+Tab, Enter, Space, and arrow keys. Ensure every interactive element is reachable and operable.
-
4
Eliminate keyboard traps by ensuring users can always Tab or Escape out of any component, including modals, dropdown menus, and date pickers.
-
5
Ensure the tab order follows a logical reading sequence (typically left-to-right, top-to-bottom) and avoid using positive tabindex values that override natural DOM order.
Frequently asked questions
Related topics
Focus Management
Focus management controls which element on the page currently receives keyboard input, indicated by a visible focus ring or outline. Proper focus management means interactive elements show a clear visual indicator when focused, focus moves logically through the page, and focus is programmatically moved to the right place when content changes (e.g., opening a modal should move focus into it).
ARIA Violations
ARIA (Accessible Rich Internet Applications) attributes provide extra semantic information to assistive technologies when native HTML elements are insufficient. ARIA violations occur when these attributes are used incorrectly — for example, applying an invalid role, using aria-labelledby to reference a non-existent ID, or adding redundant ARIA roles to elements that already have implicit semantics.
Form Labels
Form labels are HTML <label> elements that programmatically associate a text description with a form input (text field, checkbox, select, etc.) using the for attribute matched to the input's id. Without a label, screen readers announce a form field as just "edit text" or "checkbox" with no indication of what information the user should enter.
Scan your site for accessibility issues
eiSEO automatically detects and helps you fix issues like this across your entire site.