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 Demos View 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

Accessible forms, error announcements, focus management, and password toggles.

Form LabelsError AlertsFocus Management

View Demo

Dashboard

Skip links, ARIA landmarks, keyboard sidebar navigation, and breadcrumbs.

Skip LinksLandmarksKeyboard Nav

View Demo

Data Table

Sortable headers with aria-sort, screen reader announcements, and pagination.

aria-sortLive RegionsTable Semantics

View Demo

Settings

Fieldset/legend grouping, toggles, radio groups, and save confirmations.

Fieldset/Legendaria-describedbyLive Regions

View Demo

Notifications

Focus trapping, escape handling, toast notifications, and reduced motion.

Focus TrapDialogsReduced Motion

View Demo