Overview
Not all users rely on a mouse or touchpad. Some prefer the keyboard for speed, while others, including users with motor disabilities, low vision, or temporary impairments, depend on it entirely.
If an interface is not fully operable by keyboard, these users are excluded. WCAG requires that all interactive elements must be reachable and usable via keyboard alone. This includes links, buttons, inputs, menus, and dialogs.
Designing proper keyboard navigation improves accessibility, speeds up workflows, and strengthens usability for everyone.
Best practices
Guidelines for designing keyboard navigation.
Ensure all interactive elements are focusable
Links, buttons, form inputs, toggles, and other controls must be reachable via the Tab key in a logical order.
References:
Provide visible focus indicators
Users must always know which element is currently focused. Do not remove default outlines unless replaced with a clear, high-contrast custom style.
References:
Support logical focus order
Focus should follow the visual reading order (left to right, top to bottom). Avoid unexpected jumps that confuse users.
Enable keyboard interaction for all components
Complex widgets like dropdowns, accordions, sliders, and modals must be fully operable by keyboard (for example: arrow keys, space, enter, escape).
References:
Allow skipping repetitive content
Provide skip links to jump directly to main content, especially for screen reader and keyboard-only users.
References:
Common mistakes
Frequent mistakes in keyboard navigation design.
Removing focus outlines for aesthetic reasons
Without visible focus, users navigating by keyboard lose track of where they are.
Unreachable custom components
Custom dropdowns, modals, or sliders that don’t support keyboard input block users completely.
Illogical focus order
Tab order that doesn’t follow visual layout frustrates and confuses.
Trapping users in modals
Failing to manage focus in modals prevents users from escaping or continuing navigation.
Summary
Key takeaways for keyboard navigation.
- All interactive elements must be operable by keyboard.
- Provide visible, high-contrast focus indicators.
- Maintain logical focus order following the visual structure.
- Ensure custom components are fully accessible via keyboard.
- Include skip links to reduce repetitive navigation.
Good keyboard navigation improves accessibility and efficiency for everyone. Poor keyboard support locks users out entirely.
