# Keyboard navigation — Web Accessibility (A11y)

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

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

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