Accessibility Standards
WCAG 2.1 Level AA Compliance
All DYFIA digital products must meet WCAG 2.1 Level AA standards to ensure accessibility for all users.
Color Contrast Requirements
| Element Type | Minimum Ratio | DYFIA Compliance |
|---|---|---|
| Normal Text (< 18px) | 4.5:1 | ✓ Charcoal on White: 12.6:1 |
| Large Text (≥ 18px) | 3:1 | ✓ All brand colors pass |
| UI Components | 3:1 | ✓ DYFIA Blue on White: 5.9:1 |
| Graphical Objects | 3:1 | ✓ All icons meet standards |
Keyboard Navigation
- Tab Order: Logical, sequential navigation through all interactive elements
- Focus Indicators: Visible 2px outline in DYFIA Blue (#2D6DB5)
- Skip Links: Provide "Skip to main content" for screen readers
- Keyboard Shortcuts: Document all shortcuts and avoid conflicts
Screen Reader Support
- Alt Text: Descriptive alternative text for all images
- ARIA Labels: Use appropriate ARIA attributes for complex components
- Semantic HTML: Use proper heading hierarchy (H1-H6)
- Form Labels: All form inputs must have associated labels
Touch Target Sizes
| Element | Minimum Size | Recommended |
|---|---|---|
| Buttons | 44x44px | 48x48px |
| Links | 44x44px | 48x48px |
| Form Inputs | 44px height | 48px height |
Accessible Typography
- Font Size: Minimum 16px for body text
- Line Height: 1.5 minimum for body text
- Line Length: 50-75 characters per line maximum
- Text Spacing: Allow users to adjust spacing without breaking layout
Testing Checklist
- ✓ Test with keyboard only (no mouse)
- ✓ Test with screen readers (NVDA, JAWS, VoiceOver)
- ✓ Verify color contrast with automated tools
- ✓ Test with browser zoom at 200%
- ✓ Validate HTML and check for ARIA errors
- ✓ Test with assistive technologies