Keyboard Navigation

What is keyboard navigation?

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.

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.

Related guides