Accessibility Checklist

Quick Checks

Semantic HTML

• • Use <button> for actions, <a> for navigation
• • Use headings in order (h1 → h2 → h3)
• • Use <label> for form inputs; associate with htmlFor/id
• • Use <main>, <nav>, <aside>, <footer> for landmarks

Keyboard

• • All interactive elements focusable (no tabIndex="-1" on controls)
• • Focus order is logical
• • Focus visible (outline or custom ring)
• • Escape closes modals/dropdowns
• • No keyboard traps

Screen Readers

• • Images have alt (empty alt="" for decorative)
• • Form errors announced (aria-live or role="alert")
• • Dynamic content changes announced
• • Use aria-label or aria-labelledby when visible label insufficient

Color & Contrast

• • Text contrast ≥ 4.5:1 (normal), ≥ 3:1 (large)
• • Don't rely on color alone for information
• • Focus indicators visible

Forms

• • Required fields indicated (aria-required, visual)
• • Error messages linked to fields (aria-describedby)
• • Clear, inline validation feedback

Testing

• •Navigate with keyboard only
• •Test with screen reader (VoiceOver, NVDA)
• •Use axe DevTools or Lighthouse accessibility audit