Accessibility

Last updated on 2026-08-30

The kit is built with WCAG AA accessibility as a baseline. Every component, from product cards to Stripe Checkout redirect, follows accessible patterns.

Accessibility Features

All interactive elements are keyboard-accessible
Tab order follows logical reading order
Focus indicators are visible on all focusable elements (focus-visible:ring-2)
Dialogs and sheets trap focus and return it on close
Cart drawer, filter panel, and checkout steps are fully keyboard-operable

Semantic HTML throughout: <nav>, <main>, <footer>, <article>
One <h1> per page with no heading level skips
All images have descriptive alt text
Icon-only buttons have aria-label attributes
Form fields have associated <label> elements
Validation errors use aria-invalid and aria-describedby
Product listings use ARIA roles to announce product, price, and availability together

Color and Contrast

All text meets WCAG AA contrast ratio (4.5:1 for normal text, 3:1 for large text)
Status indicators use color + text + icon (never color alone)
Both light and dark themes maintain contrast compliance
Focus rings are visible against all backgrounds

Reduced Motion

prefers-reduced-motion is respected throughout:

@media (prefers-reduced-motion: reduce) {
  .animate-fade-in-up,
  .animate-float,
  .animate-scale-in {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

Product carousels, page transitions, and hover effects are disabled for users who prefer reduced motion

Touch Targets

All interactive elements meet the 44x44px minimum touch target size
Small visual elements (carousel dots, tag pills) use padding to increase the touch area
Filter buttons use min-h-11 px-3 for comfortable touch

Every page includes a skip-to-content link that becomes visible on focus, allowing keyboard users to bypass navigation.

Form Accessibility

Required fields are marked with a red asterisk
Validation errors appear inline below the field
Error fields have aria-invalid="true" and link to error text via aria-describedby
Submit buttons show loading state during async operations

Checkout Accessibility

The multi-step checkout flow is designed for inclusivity:

Step indicators use both visual progress and text labels
Form validation announces errors to screen readers
The Stripe Checkout redirect is announced before the user leaves the page
Order confirmation is readable by screen readers with structured data

Admin Accessibility

Admin tables and forms follow the same standards:

Sortable table headers have aria-sort attributes
Data tables use proper <thead>, <tbody>, and <th> elements
Action menus have descriptive labels
Status badges use icon + text, not color alone

Design Tokens

Deployment