congiuluc/accessibility

Accessibility (WCAG 2.1 AA)

When to Use

• Building or reviewing any interactive UI component
• Adding keyboard navigation (Tab, Enter, Space, Escape)
• Implementing ARIA attributes for dynamic content
• Creating forms with accessible labels, errors, and validation
• Building modals, dropdowns, or menus with focus traps
• Ensuring color contrast compliance
• Adding screen reader support and skip navigation
• Auditing existing components for accessibility issues

Official Documentation

• WCAG 2.1 Guidelines
• WAI-ARIA Authoring Practices
• MDN Accessibility
• React Accessibility
• ARIA Roles Reference
• Color Contrast Checker
• axe DevTools

Procedure

1. Load semantic HTML patterns
2. Load ARIA patterns reference
3. Load forms accessibility reference
4. Review accessible component samples
5. Use semantic HTML first — ARIA is a supplement, not a replacement
6. Ensure all interactive elements are keyboard navigable
7. Verify color contrast ratios (4.5:1 normal text, 3:1 large text)
8. Test with screen reader queries (getByRole, getByLabelText)
9. Validate with axe DevTools or Lighthouse accessibility audit

Quick Reference Rules

| Rule | Requirement | |------|------------| | Every <img> | Must have alt (empty alt="" for decorative) | | Every form input | Must have an associated <label> | | Icon-only buttons | Must have aria-label | | Dynamic content | Use aria-live="polite" or role="alert" | | Modals/dialogs | Must trap focus, close on Escape | | Color alone | Never use color as only indicator — add text/icons | | Focus indicators | Must be visible: focus:ring-2 focus:ring-offset-2 | | Touch targets | Minimum 44×44px: min-h-11 min-w-11 | | Skip navigation | Include skip link as first focusable element | | Page structure | Use landmarks: <main>, <nav>, <header>, <footer> |

Completion Checklist

• [ ] All interactive elements reachable and operable via keyboard
• [ ] Focus indicators visible on all focusable elements
• [ ] Correct ARIA attributes on custom widgets
• [ ] Form inputs have labels, errors announced to screen readers
• [ ] Modals trap focus and close on Escape
• [ ] Color contrast ≥ 4.5:1 (normal text), ≥ 3:1 (large text)
• [ ] Images have appropriate alt text
• [ ] Skip navigation link present
• [ ] Landmark regions used (<main>, <nav>, <header>)
• [ ] Lighthouse accessibility score ≥ 90