Accessibility
Keyboard support, ARIA patterns, modal inert, and automated a11y tests in Studio Arcana.
Studio Arcana targets WCAG-friendly defaults: skip link to `#MainContent`, semantic landmarks, visible focus rings tied to `--sa-focus-ring`, and live regions for cart updates. Before/after sliders expose `aria-valuenow`, `aria-valuetext`, and preset buttons with `aria-pressed`.
Modal surfaces (newsletter popup, image lightboxes, portfolio dialog, quick view) set **`inert`** on main content while open and restore focus on close. Newsletter popups trap Tab focus inside the dialog and close on Escape.
Automated checks: Playwright + `@axe-core/playwright` scans home, product, and cart (`tests/e2e/a11y.spec.ts`) including keyboard smoke tests. Lighthouse CI warns when accessibility score is below **0.95**. Run `pnpm --filter @arcanum/studio-arcana-theme test:e2e` against a dev store with preview theme env vars.
Sales channels > Online Store > Themes > Customize
Was this page helpful?
Content is maintained by Arcanum Hollow Labs. For internal engineering notes, see the docs/ folder in the monorepo.