Accessibility & WCAG Compliance

Build inclusive, accessible interfaces that work for all users.

Instructions

1. Use semantic HTML first - ARIA is a last resort, not a first choice
2. Ensure keyboard navigation - All interactive elements must be keyboard accessible
3. Provide text alternatives - Images, icons, and media need accessible descriptions
4. Maintain focus visibility - Never remove focus outlines without replacement
5. Test with assistive technologies - Use screen readers and keyboard-only navigation

WCAG 2.1 AA Requirements

Color Contrast Ratios

• Normal text: 4.5:1 minimum
• Large text (18pt+ or 14pt bold): 3:1 minimum
• UI components: 3:1 minimum
• Focus indicators: 3:1 minimum