Keyboard Navigation & Focus

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 — , <button>, <input>, <select>, <textarea> — are keyboard-accessible by default. They receive focus when tabbed to, and they respond to Enter and Space keypresses. This is one of the biggest reasons to use native elements instead of divs with click handlers. A <div onclick="doSomething()"> is completely invisible to keyboard users — they cannot tab to it, and pressing Enter or Space does nothing. A <button onclick="doSomething()"> is fully keyboard-accessible without any extra code.

Try it right now: press Tab on this page and watch the focus move between interactive elements. Notice the visual indicator (usually a blue or black outline) that shows which element has focus. That indicator is essential — without it, keyboard users have no idea where they are on the page.