keyboard-navigation

Keyboard Navigation

Design interactions so that every task can be completed using only a keyboard. This is non-negotiable — it's the foundation of all interaction accessibility.

Who This Is For

• People with motor disabilities who cannot use a mouse
• People using switch devices or mouth sticks
• Screen reader users (keyboard is their primary input)
• Power users who prefer keyboard for speed
• Anyone with a temporarily injured hand or arm

Core Principles

Everything Must Be Reachable

• Every interactive element must be focusable via Tab key
• Focus order must follow the visual reading order (left to right, top to bottom in LTR languages)
• No element should be reachable only by mouse hover or click
• Custom components need explicit tabindex and keyboard handlers

Focus Must Be Visible

• Focus indicator must be visible on every interactive element
• Minimum: 2px solid outline with 3:1 contrast against background
• Never use outline: none or outline: 0 without a visible replacement
• Focus style should be consistent across the entire interface
• Test: can you always see which element is focused?

Focus Must Be Managed

• When a modal opens, move focus into the modal
• When a modal closes, return focus to the element that opened it
• When content is deleted, move focus to a logical next element
• When a page section updates dynamically, manage focus appropriately
• Never trap focus unintentionally (only trap inside open modals)

Keyboard Patterns by Component

Navigation Menus

• Tab moves between top-level items
• Arrow keys move within a dropdown
• Enter/Space activates a menu item
• Escape closes an open dropdown and returns focus to trigger

Tabs

• Tab moves to the active tab panel, not through all tabs
• Arrow keys move between tabs
• Enter/Space activates a tab (if not automatic)

Modals / Dialogs

• Focus moves to first focusable element inside modal on open
• Tab cycles only within the modal (focus trap)
• Escape closes the modal
• Focus returns to trigger element on close

Forms

• Tab moves between fields in logical order
• Error messages are focusable or announced
• Submit via Enter key on the last field or a visible button
• Required field indicators are not conveyed by colour alone

Drag and Drop

• Always provide a keyboard alternative (move up/down buttons, select-and-place, or arrow key reordering)
• Announce the current position and available actions

Carousels / Sliders

• Arrow keys move between items
• Provide visible previous/next buttons
• Pause autoplay on focus or hover
• Announce current position ("Item 2 of 5")

Skip Links

Every page should have a "Skip to main content" link as the first focusable element. This lets keyboard users bypass repeated navigation.

• Visible on focus (can be visually hidden until focused)
• Links to the main content area via an anchor
• Consider additional skip links for long pages ("Skip to search", "Skip to footer")

Assessment Checklist

• Every interactive element is reachable via Tab
• Focus order matches visual order
• Focus indicator is visible on every element (2px, 3:1 contrast)
• Modals trap focus and return it on close
• All custom components have keyboard handlers
• Drag-and-drop has a keyboard alternative
• Skip link is present and functional
• No keyboard traps exist anywhere in the interface
• Dynamic content changes manage focus appropriately