Accessibility

Every component targets WAI-ARIA Authoring Practices. Keyboard support, focus management, and correct ARIA semantics come built in — not as an opt-in.

Commitments

  • All interactive components are operable via keyboard alone.
  • All form controls expose aria-invalid and aria-describedby when errored.
  • All overlays manage focus: trap on open, restore on close.
  • All animations respect prefers-reduced-motion.
  • Automated axe scans run against every component in CI; violations fail the build.

Keyboard support

ComponentKeys
DialogEsc closes, Tab cycles within the dialog
Tabs/ or / moves focus, Home/End jumps
RadioGroupArrow keys move focus + selection; only one tab stop per group
DropdownMenuArrow keys navigate items, type-ahead, Enter activates, Esc closes
SelectArrow keys + type-ahead; Enter commits, Esc cancels
Slider/ steps, Shift+arrow jumps, Home/End bounds

Focus management

  • Dialog traps focus within the modal, locks body scroll, and restores focus to the trigger on close.
  • Popover and DropdownMenu return focus to the trigger when dismissed.
  • Tooltip is not focusable — it uses aria-describedby so screen readers announce it without breaking tab order.

Screen readers

  • Toast differentiates role="alert" (errors) from role="status" (everything else) and sets aria-live politeness levels appropriately.
  • Alert announces as a region with a semantic title.
  • FormControl wires id/htmlFor and exposes aria-invalid/aria-describedby for error and helper text.
  • Icons inside buttons are hidden from screen readers (aria-hidden); the button label is what gets announced.

Reduced motion

Every animation honors prefers-reduced-motion. Spinners, skeletons, carousels, and dialog transitions drop to no-op or instant states when the user opts out.

Testing

Sisyphos UI runs an a11y test on every component via Vitest + @testing-library/react + jest-axe. Contributions that introduce accessibility regressions are blocked by CI.