Keyboard Navigation

Keyboard navigation refers to the ability to browse and use a web interface using only keyboard keys, without a mouse. It is the primary mode of interaction for people who cannot use a pointing device, and a basic test to verify a website's accessibility.

Unplug your mouse and try using your website. Tab to move forward, Shift+Tab to move backward, Enter to activate a link, Space to check a box. If you get stuck after three Tab clicks, your keyboard users are too.

#How it works

The browser maintains an invisible cursor, the focus, which moves from one interactive element to another. Native HTML elements (<a>, <button>, <input>, <select>) receive focus automatically, in source code order.

The basic keys:

  • Tab: next element
  • Shift+Tab: previous element
  • Enter: activate a link or button
  • Space: check a box, open a dropdown menu
  • Arrow keys: navigate menus, tabs, grids
  • Escape: close a modal or menu

WCAG criterion 2.1.1 (level A) sums up the requirement: any functionality usable with the mouse must be usable with the keyboard. Only interactions that depend on movement tracking (freehand drawing, for example) are exempt.

#The mistake everyone makes

Replacing a <button> with a <div onclick="...">. The div does not receive focus. It does not listen to Tab, Enter, or Space. For a keyboard user, this button does not exist.

The minimal fix requires tabindex="0", a role="button", and a keydown handler for Enter and Space. Three additions instead of zero with a native <button>.

<!-- Inaccessible via keyboard -->
<div onclick="submit()">Submit</div>
 
<!-- Accessible natively -->
<button type="button" onclick="submit()">Submit</button>

Another common pitfall: tabindex="5" or any positive value. The W3C APG formally advises against it. A positive value creates a parallel tab order, unpredictable and nearly impossible to maintain on a complex page.

#In summary

Use native HTML elements. Test with the keyboard before delivery. And if a custom component does not respond to Tab, fix it before you handle anything else. A website inaccessible via keyboard is unusable for millions of people.

Back to glossary
Share this article

Learn more

Focus

Focus refers to the state of a web page element when it receives keyboard attention. A visual indicator, often an outline, signals which element is active. Without this indicator, keyboard navigation becomes impossible.

Tab order

Tab order is the sequence in which interactive elements on a page receive focus when the Tab key is pressed. By default, it follows the order of the HTML code. If this order does not match the visual order of the page, keyboard users become disoriented.

Keyboard Accessible and Activatable

A component is « keyboard accessible » when you can select it with Tab, and « activatable » when you can trigger its action with Enter or Space. Native HTML elements like <a>, <button> and <input> are by default. A <div> with an onclick, is not.