Demo

FAQ

Last updated on 2026-04-14

General

What is the A11y Starter Kit?

A production-ready Next.js starter kit with WCAG AA accessibility built into every component. It includes a dashboard, data table, settings page, login form, and notification center -- all with proper keyboard navigation, screen reader support, and color contrast.

What tech stack does it use?

  • Framework: Next.js 16+ (App Router)
  • Styling: Tailwind CSS v4 with oklch color tokens
  • Components: shadcn/ui (Radix UI primitives)
  • Theme: Class-based dark mode via next-themes

Do I need to know accessibility to use this kit?

No. The accessibility patterns are already built in. The hooks and components handle focus management, screen reader announcements, and keyboard navigation for you. The docs explain what each pattern does so you can learn as you build.

Is this kit WCAG compliant?

The kit is built to meet WCAG 2.1 Level AA standards. All color pairs meet the required contrast ratios, all interactive elements are keyboard accessible, and screen reader support is included throughout. However, compliance depends on how you customize and extend the kit -- always test your changes.

Setup & Installation

What are the system requirements?

  • Node.js 18.17 or later
  • npm, yarn, pnpm, or bun

Can I use this with yarn/pnpm/bun instead of npm?

Yes. Replace npm with your preferred package manager in all commands:

yarn install && yarn dev
pnpm install && pnpm dev
bun install && bun dev

Do I need a backend?

No. The kit is frontend-only with mock data. Connect it to any backend API, database, or BaaS (Firebase, Supabase, etc.) when you're ready.

Customization

How do I change the brand colors?

Update the oklch tokens in app/globals.css. See the Design Tokens page for details.

How do I add new pages?

Create a new route folder in app/, build your page using the component hierarchy, and add it to the sidebar. See the Customization guide.

Can I remove pages I don't need?

Yes. Delete the route folder from app/ and remove the sidebar entry. The kit is modular -- removing one page won't break others.

Can I use this with a different UI library?

The accessibility hooks (useFocusTrap, useKeyboardNavigation, useAnnounce, useReducedMotion) are standalone and work with any React UI library. The page layouts use shadcn/ui but can be adapted.

Accessibility

What accessibility features are included?

  • Skip link for keyboard navigation
  • Focus trapping in modals and dialogs
  • Arrow key navigation for menus and lists
  • ARIA live regions for dynamic announcements
  • prefers-reduced-motion detection
  • WCAG AA color contrast in light and dark modes
  • Semantic HTML throughout
  • Proper form validation with error announcements

How do I test accessibility?

  1. Keyboard: Navigate the entire app using only Tab, Enter, Escape, and arrow keys
  2. Screen reader: Test with VoiceOver (Mac), NVDA (Windows), or Orca (Linux)
  3. Color contrast: Use the Color Contrast Checker
  4. Automated scan: Use the Accessibility Checker tool
  5. Browser DevTools: Chrome and Firefox have built-in accessibility inspectors

What WCAG criteria does this kit address?

Key criteria covered include:

  • 1.3.1 Info and Relationships (semantic HTML, proper labels)
  • 1.4.3 Contrast Minimum (oklch tokens verified at 4.5:1+)
  • 2.1.1 Keyboard (all features keyboard accessible)
  • 2.4.1 Bypass Blocks (skip link)
  • 2.4.3 Focus Order (logical tab order)
  • 2.4.7 Focus Visible (visible focus indicators)
  • 3.3.1 Error Identification (form validation with announcements)
  • 4.1.2 Name, Role, Value (ARIA attributes on all controls)

Licensing & Support

Can I use this for commercial projects?

Yes. The kit comes with a commercial license that allows use in unlimited projects for yourself or your clients.

Do I get updates?

Yes. You receive all future updates to the kit, including new components, accessibility improvements, and Next.js version upgrades.

Where do I get help?

Email support is included with your purchase. For accessibility-specific questions, the docs cover all included patterns and hooks.

Previous

Customization