Keyboard Navigation & Focus
Learn how keyboard users navigate the web, how tab order works, and how to build skip links and visible focus indicators.
Why keyboard navigation matters
Not everyone uses a mouse. People with motor disabilities, repetitive strain injuries, or vision impairments often navigate entirely by keyboard. Some use specialized devices like switch controls, sip-and-puff devices, or eye-tracking systems that all ultimately translate to keyboard-like interactions. Even power users frequently prefer keyboard shortcuts — try watching a developer work and you will see them reach for the keyboard far more than the mouse.
Every interactive element on your page must be reachable and operable by keyboard alone. If a user cannot tab to a button, activate a link, or fill out a form without a mouse, your site has a critical accessibility barrier.
The basic keyboard navigation model works like this:
- Tab moves focus forward to the next interactive element (links, buttons, form inputs). - Shift + Tab moves focus backward to the previous interactive element. - Enter activates links and buttons. - Space activates buttons, toggles checkboxes, and opens select dropdowns. - Arrow keys navigate within groups — radio buttons, select options, tabs, menu items. - Escape closes modals, dropdowns, and tooltips.
Native HTML interactive elements — ,