A11y Starter Kit
An accessibility-first Next.js starter kit with WCAG 2.1 AA compliant components and best practices for inclusive web apps.
Overview
The A11y Starter Kit is a production-ready foundation for building accessible web applications with Next.js. It bakes accessibility into every component and page from the start, ensuring keyboard users, screen readers, and assistive technologies are fully supported. This kit provides developers with the tools and patterns needed to create inclusive interfaces that meet WCAG 2.1 AA compliance.
Key Features
- Keyboard Navigation — Full keyboard support with skip links, focus trapping, and arrow key navigation.
- Screen Reader Support — ARIA landmarks, live regions, and semantic HTML throughout all components.
- Reduced Motion — Respects
prefers-reduced-motionfor users with motion sensitivities. - Touch Accessibility — Minimum 44px touch targets and proper spacing for mobile and touch devices.
- Dark Mode — System-aware theme switching with proper contrast ratios.
- Focus Management — Visible focus indicators and logical focus order on every page.
Available Components
Includes accessible utilities like LiveRegion and VisuallyHidden, layout components such as SkipLink and MobileNav, and custom hooks for announcements, focus trapping, and keyboard navigation.
Philosophy
The project believes accessibility should be foundational, not an afterthought. Every component, page, and interaction is designed with keyboard users, screen readers, and assistive technologies in mind from day one.
Related Projects
Found a gem we're missing?
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
