auri

Accessibility

Agent-composed pages don't exist until runtime, so they can't be audited page-by-page the way hand-built products are. auri's answer: make inaccessible output inexpressible in the vocabulary — the contract does the enforcing, before any pixel renders.

Names are required by schema

A component cannot be emitted without its accessible name — the JSON Schema marks these props required: Stat.label, Badge.text, Callout.text, Chart.label, Sparkline.label, Progress.label, ApprovalCard.title, and every DataTable column's label. An agent that omits them produces invalid wire, caught by the same validator that runs in CI.

And the rendered result is audited too

Required names guarantee the agent supplies the information; they cannot guarantee the component spends it correctly. So every catalog's test suite replays each shipped fixture through a real client and runs axe-core against the DOM a screen reader would meet — WCAG 2.1 A and AA, minus the page-level rules (landmarks, a single h1, lang) that belong to the host document rather than to a fragment. It runs in CI on every change.

It earned its place immediately: the first run caught a failed media player rendering muted grey text on its own near-black letterbox — a stated error message that was hard to read, in the one state nobody screenshots.

Graphics describe themselves

Charts and sparklines generate a text alternative from their own data — "6 readings, latest 214, range 175 to 260" — so a screen reader hears the trend, not "image". The summary is computed, not an optional prop someone forgets.

Native semantics

  • DataTable is a real <table> with a <caption> and aria-sort on sortable headers (which are real buttons).
  • KeyValue is a <dl>; Timeline is an <ol>; Chart is a <figure> with a caption.
  • Progress exposes role="progressbar" with value/min/max — and omits aria-valuenow when indeterminate, as the spec requires.
  • Interactive rows respond to Enter and Space; ConfirmButton disarms on Escape and blur.

Never color alone

Every intent pairs its color with text or a glyph: callouts prepend a spoken register ("warning:") for assistive tech, trend arrows carry sr-only descriptions, and all text pairings meet WCAG 2.2 AA in both themes — the bar that is also the EU legal floor under the European Accessibility Act.

Preferences are honored

  • prefers-reduced-motion: entrances become fades, stagger drops, shimmer freezes.
  • forced-colors (Windows High Contrast): intents map to system colors.
  • prefers-contrast: more: hairlines strengthen — darker in light, brighter alpha in dark — rather than hues shifting.
  • Focus is always visible; nothing keyboard-reachable is pointer-only.