Accessibility

Last updated on 2026-05-31

The LMS 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. 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, accordions
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 (search, notifications, theme toggle, bookmark, like)
aria-expanded on collapsible elements (mobile menu, accordions, curriculum modules)
Status badges and form errors announced via aria-live regions
Tooltip text matching aria-label values on all icon buttons

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
Quiz answer options 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 red asterisk
Form validation errors announced to screen readers
Delete and suspend actions require confirmation dialogs

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

Need a professional accessibility review? Try our free WCAG compliance checker to scan any URL for accessibility issues.

Design Tokens

Customization