The boilerplate implements accessibility features following WCAG 2.2 guidelines, ensuring the application is usable by people with disabilities. All components pass automated accessibility testing with Lighthouse (CI threshold ≥90%) and axe-core (0 critical/serious violations).
Compliance Metrics
- Lighthouse Accessibility: ≥90% (CI threshold, asserted as
warn) - axe-core violations: 0 critical, 0 serious
- Touch targets: Minimum 44x44px (exceeds WCAG 24x24px requirement)
- Color contrast: WCAG AA compliant
Skip Navigation
Skip-to-main-content link for keyboard users to bypass navigation.
Semantic HTML
Proper landmarks (<main>, <nav>) for screen reader navigation.
Keyboard Navigation
Full keyboard support with visible focus states throughout.
ARIA Support
Proper ARIA labels and roles for custom components.
Touch Targets
All interactive elements meet 44x44px minimum for mobile usability.
Automated Testing
Playwright axe-core integration for CI accessibility testing.
Skip to Main Content
A skip link is provided in the root layout, allowing keyboard users to bypass repetitive navigation and jump directly to the main content.
Main Content Landmark
All page layouts wrap their content in a <main> element with the
id="main-content" attribute, creating a proper landmark for screen readers.
i18n Translation Keys
Best Practices
- Always use semantic HTML elements when possible
- Ensure sufficient color contrast (4.5:1 for normal text)
- Provide visible focus indicators on all interactive elements
- Use ARIA labels for icon-only buttons
- Test with screen readers (VoiceOver, NVDA)