Skip to content
Praesepe UI

Accessibility

Praesepe UI is architected with WCAG 2.2 AA patterns in mind. This page describes the shared conventions. Each component documents its own keyboard and ARIA behavior.

Shared conventions

  • Visible :focus-visible outlines using --ui-ring
  • Skip-to-content link on documentation layouts
  • Decorative icons use aria-hidden="true"
  • Interactive overlays teleport to body, trap focus, and restore focus on close
  • Form controls wire label, aria-describedby, and aria-invalid
  • prefers-reduced-motion disables non-essential transitions

Automated coverage (Axe + Playwright)

Playwright drives Chromium against the docs app. Commands live in README.md and CONTRIBUTING.md (npm run test:e2e).

  • Axe scans (tests/e2e/a11y.spec.ts): /, /ui, /docs, and every /docs/components/{slug} route in Light and Dark for themes praesepe, minimal, and warm. The suite fails on any Axe finding with impact critical or serious under WCAG 2.2 AA tags (including color contrast and target size).
  • Keyboard interaction specs (tests/e2e/interactions.spec.ts): Modal Escape, focus trap, and focus return; Dropdown ArrowDown / ArrowUp / Home / End / Escape; Tabs ArrowRight / ArrowLeft; command palette Search via Cmd+K (Ctrl+K) and /.

Automated checks catch many markup, contrast, and keyboard regressions. They do not prove full WCAG conformance for every composition or assistive technology.

Manual screen reader checks

Still verify with a real screen reader and keyboard on representative flows. Automated Axe and Playwright do not replace:

  • VoiceOver (macOS / iOS), NVDA or JAWS (Windows), and TalkBack (Android) announcements for name, role, and state
  • Live region behavior for toasts and async search results
  • Focus order across composed app shells (navbar + sidebar + page content)
  • Dynamic content such as filtered tables, bulk selection summaries, and truncated avatar groups
  • Content you paste into your product (labels, errors, and empty states you author)

Honest claims

Do not claim that the library is 100% WCAG compliant or fully accessible. Accessibility depends on how components are composed in your product. Test with keyboard, screen readers, and your content.