# Keyboard navigation — Web Accessibility (A11y)

Source: https://www.geekswithgeeks.com/en/accessibility/a11y-keyboard

> 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.

```javascript
// 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.