Lesson 5 / 25

Keyboard navigation

Every interaction must work with keyboard alone.

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 wisely (0 for natural, avoid positive values). Invisible elements get skip via tabindex="-1".

Menu navigation

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