Keyboard Accessibility

Keyboard accessibility ensures users can complete tasks without a mouse. This includes people with motor disabilities, blind users with screen readers, and power users.

Why keyboard accessibility matters

If focus cannot reach controls, actions become impossible. If focus is invisible, users lose context and confidence.

How keyboard accessibility works

Use native controls and maintain DOM order so tab sequence stays logical. Ensure modals trap focus only while open and return focus to the trigger on close.

Avoid positive tabindex values. Prefer semantic markup and predictable interaction patterns.

Code examples

<!-- Skip link for repeated navigation -->
<a href="#main" class="skip-link">Skip to main content</a>
<main id="main">...</main>

.skip-link {
  position: absolute;
  left: -9999px;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
}