Lesson 6 / 26

Keyboard navigation

Make every interaction work with the keyboard alone using native controls, tabindex and sensible key handling.

Why keyboard matters

Motor disabilities, voice control, switch devices—users often can't use a mouse. Also, power users prefer keyboard speed. Test: close your trackpad and use your site with Tab, Enter, Arrow keys, Escape only.

Keyboard-accessible patterns

Use native <button>, <a>, <input>. Make custom controls focusable with tabindex="0". Handle key events.

// Handle Tab to focus next control (native)
<button onclick="doThing()">Click me</button>

// Custom control: handle Enter/Space to activate
<div role="button" tabindex="0" @keydown="onKeyDown">
  Activate me
</div>

const onKeyDown = (e) => {
  if (e.key === 'Enter' || e.key === ' ') {
    e.preventDefault();
    activate();
  }
};

Keyboard testing

Test Tab order by disabling mouse in DevTools. Check that focus is always visible. Ensure Escape closes modals. Test arrow keys in menus.

Focus order matters

Tab order follows HTML source order by default. Use tabindex carefully: 0 for natural order, avoid positive values. Elements with tabindex="-1" can be focused by script but are skipped by Tab.

Menu navigation

Arrow keys navigate menus. Enter/Space activates. Escape closes.