Accessibility

The E-commerce Starter Kit is built with WCAG AA accessibility as a baseline. Every component and page meets or exceeds these standards.

Every page includes a skip-to-content link as the first focusable element:

import { SkipLink } from "@/components/a11y/skip-link"

<SkipLink />

This lets keyboard users bypass the header navigation and jump directly to main content.

Color Contrast

All text meets WCAG AA contrast ratios:

Normal text (< 18px): minimum 4.5:1 contrast ratio
Large text (>= 18px bold or >= 24px): minimum 3:1 contrast ratio
UI components and states: minimum 3:1 against adjacent colors

The oklch color token system ensures contrast is maintained in both light and dark mode.

All interactive elements are keyboard accessible:

Tab — navigate between focusable elements
Enter/Space — activate buttons and links
Arrow keys — navigate within menus, radio groups, tabs, carousels
Escape — close dialogs, sheets, and popovers

Focus Indicators

Visible focus rings on all interactive elements using the --ring design token:

focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2

Semantic HTML elements (nav, main, header, footer, section)
Proper heading hierarchy (one H1 per page, logical H2/H3 nesting)
aria-label on icon-only buttons (cart, search, wishlist, theme toggle)
aria-expanded on collapsible elements (mobile menu, filters, accordions)
alt text on all product images
Status badges and form errors announced via aria-live regions

Touch Targets

All interactive elements meet the 44x44px minimum touch target size:

Buttons use h-9 (36px) minimum, h-11 (44px) for primary CTAs
Icon buttons use size-9 (36px) minimum
Cart quantity selectors have adequate tap areas
Mobile navigation links have py-3 padding

Reduced Motion

Components respect prefers-reduced-motion:

@media (prefers-reduced-motion: reduce) {
  /* Carousels disable auto-play */
  /* Transitions are shortened or removed */
  /* Animations use opacity-only transitions */
}

Form Accessibility

Labels associated with inputs via htmlFor/id
Error messages linked with aria-describedby
Required fields marked with aria-required
Form validation errors announced to screen readers

Testing Recommendations

Tool	Purpose
axe DevTools	Automated accessibility scanning
VoiceOver (macOS)	Screen reader testing
NVDA (Windows)	Screen reader testing
Keyboard-only navigation	Tab through every page
Lighthouse	Accessibility audit score

Skip Link