Back to Playbook

Keyboard Navigation

Ensure all interactive elements are reachable and operable using a keyboard, including visible focus indicators.

Why it matters

For many users with motor disabilities, a mouse is not an option. They rely on keyboards or switch devices to navigate. Power users also prefer keyboard shortcuts for speed. If your site can't be used with a keyboard, it's broken for a significant portion of your audience.

Keyboard Playground

Test navigation using the Tab key. Ensure focus indicators are visible and the order makes sense.

Key Requirements

Logical Order

Focus should move in a predictable sequence, typically left-to-right, top-to-bottom.

Visible Focus

Users must always know which element has focus. Never remove the focus outline without a replacement.

Operability

All interactive elements (links, buttons, forms) must be usable with Enter, Space, or Arrow keys.

Skip Links

Provide a mechanism to bypass repetitive content blocks (like navigation menus).

Testing Checklist

  1. Tab Key Test

    Can you reach every interactive element using only the Tab key?

  2. No Traps

    Ensure focus doesn't get "trapped" in a component (like a modal) without a way to exit.

  3. Visual Confirmation

    Is the focus indicator clearly visible against all background colors?

Previous: Contrast Ratios Next Section: handoff-checklist