Skip to content

Getting started

Accessibility

How Stance meets WCAG 2.2 AA: verified contrast in every theme, axe tests in three modes, WAI-ARIA keyboard patterns and focus management.

Stance targets WCAG 2.2 level AA. Accessibility is part of each component’s contract and is tested on every change, but automated tests cannot prove full conformance. Products must still test complete flows with keyboards and screen readers.

What is verified automatically

  • Colour contrast: 36 foreground/background pairs in each of the 3 themes are tested. Body text needs 4.5:1 and UI boundaries 3:1 (1.4.3, 1.4.11). High contrast must reach 7:1 for text and 4.5:1 for boundaries.
  • axe-core: every interactive component is rendered in light, dark and high contrast and checked for violations.
  • Keyboard models: tests drive components with the keyboard following WAI-ARIA Authoring Practices: menus, tabs, listboxes, trees, grids, sliders and dialogs.
  • Focus management: overlays are tested for focus trapping, Escape dismissal and focus restoration.

Built in

  • Visible focus rings on every interactive element (2px, 3px in high contrast), never removed.
  • Target sizes of at least 24×24px (2.5.8); default controls are 40px tall.
  • Forced-colours (Windows High Contrast) support with system colours.
  • Reduced-motion support: animations collapse to instant transitions.
  • Form controls wire labels, descriptions and errors through FormField automatically.
  • Live regions for toasts, copy confirmations and async results.

Your part

  • Give icon-only buttons a label. IconButton requires one.
  • Give every dialog a DialogTitle.
  • Don’t rely on colour alone: pair status colours with text or icons.
  • Keep heading levels in order. Components that render headings accept a level.

See Accessibility standards for the full checklist.