Getting Started with A11y Starter Kit
Last updated on 2026-04-14
The A11y Starter Kit is a free, open-source Next.js template for building WCAG 2.1 AA compliant web applications. It includes 6 reference screens with keyboard navigation, focus trapping, skip links, ARIA landmarks, screen-reader-tested semantics, and custom React hooks for common accessibility patterns.
What's Included
- 6 pages -- landing page, dashboard, data table, settings, login, and notifications
- 5 accessibility hooks -- focus trapping, keyboard navigation, reduced motion, live announcements, and mobile detection
- Utility components -- SkipLink, LiveRegion, VisuallyHidden, and accessible layout primitives
- Light & dark mode -- oklch design tokens with maintained contrast ratios across both themes
- MIT licensed -- free for personal and commercial use
Prerequisites
- Node.js 18.17 or later
- pnpm (recommended) or npm
- A code editor -- VS Code recommended
Quick Start
# 1. Clone the repository
git clone https://github.com/thefrontkit/a11y-starter-kit-code.git a11y-starter-kit
cd a11y-starter-kit
# 2. Install dependencies
pnpm install
# 3. Start the dev server
pnpm dev
Open http://localhost:3000 to browse the kit.
Kit Overview
| Page | Key Accessibility Features |
|---|---|
| Landing Page | Skip link, landmarks, focus-visible outlines, semantic headings |
| Dashboard | Stat cards with proper labelling, sidebar navigation with keyboard support |
| Data Table | Sortable headers with aria-sort, keyboard-navigable rows, pagination |
| Settings | Tabbed interface, fieldset/legend grouping, toggle switches, radio groups |
| Login | Form validation with aria-describedby, focus management on errors |
| Notifications | Modal focus trapping, toast announcements via live regions |
Tech Stack
| Technology | Purpose |
|---|---|
| Next.js 16 | React framework with App Router |
| React 19 | UI library |
| Tailwind CSS v4 | Utility-first styling with oklch tokens |
| shadcn/ui v4 | Component primitives |
| TypeScript | Type safety |
| next-themes | Dark mode |
How This Relates to Paid Kits
The A11y Starter Kit shares the same accessibility-first architecture that powers the SaaS Starter Kit, AI UX Kit, and all other TheFrontKit templates. Think of it as the accessibility layer, extracted and open-sourced. When you're ready to build a full product, the paid kits build on this exact same foundation.