Keyboard Navigation¶

All interactive elements must be operable via keyboard.

Focus Management¶

Visible Focus Indicator¶

Never remove the default focus outline without providing an alternative:

/* Bad - removes focus visibility */
*:focus { outline: none; }

/* Good - custom focus style */
*:focus-visible {
  outline: 2px solid #5e72e4;
  outline-offset: 2px;
}

Tab Order¶

• Use natural DOM order for tab sequence
• Avoid positive tabindex values (only use 0 or -1)
• tabindex="0" — element is focusable in tab order
• tabindex="-1" — element is focusable programmatically only

Standard Keyboard Interactions¶

Skip Navigation¶

Add a skip link as the first focusable element on each page:

<a href="#main-content" class="visually-hidden-focusable">Skip to main content</a>

Application Keyboard Shortcuts¶

Use Mousetrap.js for application-level keyboard shortcuts. See the Keyboard Bindings section for standard bindings.

Best Practices¶

• Test all pages using only the keyboard (Tab, Shift+Tab, Enter, Space, Escape)
• Ensure focus is trapped within modals when open
• After dynamic content updates, move focus to the new content
• Use aria-live regions for dynamic announcements