Skip to main content
A11y Starter Kit
  • Login
  • Dashboard
  • Data Table
  • Settings
  • Notifications
WCAG 2.1 AA Compliant

Build Accessible UIs From Day One

A starter kit demonstrating WCAG 2.1 AA accessibility patterns with Next.js 15, Tailwind CSS 4, and shadcn/ui. Explore 5 demo pages showcasing real-world accessible components.

Explore DemosView Login Demo

Accessibility Features

Keyboard Navigation
Full keyboard support with skip links, focus trapping, and arrow key navigation.
Screen Reader Ready
ARIA landmarks, live regions, and semantic HTML for assistive technology.
Responsive & Adaptive
Works at every viewport with reduced motion support and high contrast.
Touch Accessible
Minimum 44px touch targets and proper spacing for motor accessibility.

Demo Pages

Login Page
Accessible forms, error announcements, focus management, and password toggles.
Form LabelsError AlertsFocus Management
View Demo: Login Page
Dashboard
Skip links, ARIA landmarks, keyboard sidebar navigation, and breadcrumbs.
Skip LinksLandmarksKeyboard Nav
View Demo: Dashboard
Data Table
Sortable headers with aria-sort, screen reader announcements, and pagination.
aria-sortLive RegionsTable Semantics
View Demo: Data Table
Settings
Fieldset/legend grouping, toggles, radio groups, and save confirmations.
Fieldset/Legendaria-describedbyLive Regions
View Demo: Settings
Notifications
Focus trapping, escape handling, toast notifications, and reduced motion.
Focus TrapDialogsReduced Motion
View Demo: Notifications

A11y Starter Kit — Built with accessibility in mind.

  • Home
  • WCAG 2.1 Reference (opens in new tab)