Keyboard Navigation

Every interactive element must be reachable and usable with a keyboard:

• Tab moves focus forward
• Shift+Tab moves focus backward
• Enter or Space activates buttons and links
• Arrow keys navigate within grouped controls

Color Contrast

Text must have sufficient contrast against its background:

• Normal text: minimum 4.5:1 ratio
• Large text (18px+ bold or 24px+ regular): minimum 3:1 ratio

Alt Text for Images

• Decorative images: use alt="" (empty alt) so screen readers skip them
• Informative images: describe what the image shows, not what it is
• Bad: alt="photo"
• Good: alt="Bar chart showing 30% increase in mobile traffic"

Focus Indicators

Never remove focus outlines without replacing them. outline: none on interactive elements makes keyboard navigation impossible. Use custom focus styles instead:

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

Forms

• Every input needs a visible label
• Error messages should be associated with their input using aria-describedby
• Required fields should use the required attribute
• Group related fields with
  and

ARIA as a Last Resort

ARIA attributes should supplement HTML, not replace it. If a native HTML element does what you need, use that instead of role="" and aria-* attributes.

Testing

• Navigate your site with keyboard only
• Use a screen reader (VoiceOver on Mac, NVDA on Windows)
• Run Lighthouse accessibility audit
• Test with browser zoom at 200%