Skip to main content

Accessibility

WCAG 2.2 AA is the floor, AAA where practical. Accessibility is not a component — it's a property of every component. This guide is the working checklist; the behavioural foundation comes from React Aria, the visual affordances from Prism's tokens.

The non-negotiables​

  1. Contrast. Every foreground/background pair clears AA: 4.5:1 for text, 3:1 for large text (≥24px or ≥19px bold) and UI/graphical objects. Pair text with its matching -on token. Validate in both themes and under every signature and customer brand.
  2. Never colour alone. Status, selection and meaning are always carried by an icon or text as well as hue — so colour-blind users are never stranded. Each status tone ships a paired icon.
  3. Visible focus. A 2px solid --focus-ring outline with a 2px offset, shown on keyboard focus (:focus-visible). Intentionally prominent — visible focus is the single most important affordance in Prism. Never remove an outline without replacing it with an equal-or-louder one.
  4. Keyboard-complete. Every interactive element is reachable and operable by keyboard, in a logical tab order, with no traps. React Aria provides roving tabindex, arrow-key composites, type-ahead, and Esc/cancel.
  5. Touch & remote targets. 44px minimum (--size-touch); 56px xl on TV/remote surfaces.
  6. Honour user settings. All motion collapses under prefers-reduced-motion. The UI survives forced-colors (Windows High Contrast) — guards live in base.css. Text zoom always wins: all sizes are rem.

Input modalities​

Prism components are specified across mouse, touch, keyboard, screen reader, switch control and TV remote — see INTERACTION for the per-component interaction contract and the modality matrix. Key points:

  • Screen reader: semantic roles, names and states from React Aria; live regions for async status (AutosaveIndicator, Toast, Alert use polite/assertive appropriately); tables expose row/column context; charts ship a data-table fallback.
  • Switch control / TV remote: linear and spatial focus both land on every actionable element; focus order matches visual order; focus memory on rails (TV). See TV_AND_CINEMA.
  • Zoom / reflow: layouts reflow to 320px-equivalent and tolerate 200% zoom without loss of content or function (logical properties + rem + wrapping guards).

Forms & errors​

  • Every control has a programmatically-associated label (Field scaffold wires label, helper, error and aria-describedby).
  • Errors are announced, not just coloured: inline aria-live, plus ErrorSummary at the top of long forms with in-page links to each field.
  • Required/optional, format hints and constraints are stated before the user errs, in helper text.

Content is accessibility​

Plain language is an a11y feature. Sentence case, verb-first actions, blame-free errors that say what to do next — see CONTENT. Copy clarity reduces cognitive load for everyone and is essential for users with cognitive disabilities.

Authoring checklist (per component)​

  • All text/UI pairs clear AA in light and dark, under the default brand and at least one signature.
  • Meaning never depends on colour alone (icon or text present).
  • Fully keyboard-operable; logical tab order; no traps; Esc cancels overlays.
  • :focus-visible shows the 2px ring with offset on every focusable element.
  • Targets ≥ 44px (≥ 56px on TV).
  • Correct role/name/state to a screen reader; async changes announced via live region.
  • Works under prefers-reduced-motion and forced-colors.
  • Reflows at 320px and 200% zoom without clipping or overlap.

These map directly to the QA gates — every one is testable by toggling data-theme, data-density, dir and data-scale and tabbing through.