Accessibility

WCAG 2.2 AA is the floor, not a phase. Do not claim guaranteed compliance. Validate with axe, Lighthouse, and real operators.

An instrument only some people can read is broken. Contrast, focus, semantics, and reduced motion live in tokens — accessible by construction, not as a late pass.

Floor (checklist)

These ten items are the construction checklist. Every surface ships against them.

1. Contrast — Text ≥ 4.5:1. Large text and UI components ≥ 3:1.
2. Type scale — 16px base, line-height ≥ 1.5, nothing below 12px.
3. Focus — Visible 2px Signal focus ring, 2px offset, on every interactive element. Never outline: none without a replacement ring.
4. Targets — Hit areas ≥ 44×44 even in compact density.
5. Headings and landmarks — No skipped heading levels. Landmarks: banner, nav, main, complementary for the inspector.
6. Keyboard — Full keyboard access. Focus moves into reveals; focus restores on close.
7. Color never alone — A delta is icon + word + color. Status is never a color-only dot.
8. Labels — Visible labels. Errors wired with aria-describedby. Required indicated in text, not only by asterisk color.
9. Motion — Honour prefers-reduced-motion. Never flash more than three times per second. Animation never blocks a task.
10. Live regions — polite for pulse updates, assertive for incidents. Do not announce every spark tick.

Dashboard-specific

Charts and instruments have extra duties beyond the page checklist:

• Every chart needs a table, a summary, or a download — hover is not the only path to a value.
• Stale is announced, not just greyed. Pair the stale word with a timestamp.
• Sparks are decorative to the metric they sit on; the metric text is the accessible name. Do not live-announce ticks.
• Rails and inspectors are landmarks (navigation, complementary), not anonymous divs.
• Empty and error are valid states in the accessibility tree, with the same what / why / what they can do as in Microcopy.

Contrast notes

• Paper #F6F3EE with Ink #0E141B is well above 4.5:1.
• Signal on paper (#1AA68A) is for accent, focus, and large UI — not small body text.
• Signal on ink (#3EE0C2) is the dark-theme accent. Check small text; prefer ink/paper for body.
• Critical #D64541, caution #C4841D, positive #1F8A65 color the status word and icon. Do not rely on the hue without the word.

Hairlines are solid, not alpha, so contrast does not collapse on unknown backgrounds.

Focus

:focus-visible draws a 2px solid Signal ring with 2px offset. The ring may fade in over 80ms ease-out; under reduced motion it appears instantly.

Do not steal focus on load. Do not trap focus except in true modals. Restore focus to the control that opened a reveal.

Reduced motion

Map to the motion spec: press becomes instant (no scale), hovers instant, panel enter opacity-only or instant, exits instant hide, no stagger, metric ticks swap instantly, focus ring instant.

Never use motion as the only indication of a state change.

Validation

This document is the floor, not a badge. Before a surface ships:

• axe (or equivalent) on representative pages, both themes.
• Lighthouse accessibility, both themes, keyboard-only pass.
• A pass with at least one operator who uses a screen reader or who uses the product under time pressure with reduced motion.

Do not write “WCAG compliant” in marketing or in the product. Write “built to WCAG 2.2 AA” and keep the receipts.

Related

• Principles — Accessible by construction
• Assets — focus, motion, color tokens
• Writing