Per master spec §I.4: Target WCAG 2.1 Level AA for MVP.
Current status (Phase 16 baseline)
ARNO is an internal tool under active development. This document is the baseline for the launch readiness audit, not a final compliance statement.
| Category | Status | Notes |
|---|---|---|
| Color contrast (text) | 🟡 partial | Dark theme primary, contrast not tested in every state |
| Keyboard navigation (Tab/Enter/Esc) | 🟡 partial | Native HTML elements OK, custom canvas (workflow) — no |
| ARIA labels | 🟡 partial | Buttons OK, complex widgets (composition canvas) — minimal |
| Focus indicators | 🔴 not covered | Browser defaults relied upon, explicit ring not yet styled |
| Screen reader | 🔴 not tested | NVDA / VoiceOver runs have not been performed |
| 200% text resize | 🟡 unknown | Mobile/desktop layouts not tested at 200% |
| Color-only signals | 🟡 partial | Drift badges use icon + color (good); some other states are color-only |
CI enforcement (planned for launch)
- axe-core in Playwright E2E — fail on violations. Configured in the Phase 16 testing setup.
- Lighthouse Accessibility score >90 per page — CI gate.
Tested scenarios (for launch audit)
Critical paths (must pass WCAG 2.1 AA)
-
Sign-up + sign-in flow (
/,/app)- Tab navigation: works without mouse
- GitHub OAuth redirect: screen reader announces state changes
- Error states: announced + visible
-
Projects list (
/app)- Cards focusable via Tab
- "Connect repo" / "Sync now" — clear focus + keyboard activatable
- Delete confirmation modal — focus trap, Esc closes
-
MD editor (
/app/component?...)- Textarea: full keyboard editing
- Sync badge: status announced via ARIA live region
- Divergence modal: focus trap, Tab cycles inside, Esc closes
- Save status: announced
-
Library panel (
/app/screen?...)- Component grid: Tab + arrow keys
- Drift badges: icon + color + tooltip (color-not-sole-signal compliant)
Out of scope for MVP (per master spec §I.4)
- Workflow canvas full keyboard navigation — complex graph editor. Tab between screens + Enter to drill in OK, full inside-canvas navigation post-MVP
- High-contrast theme — system theme support only
- Prototype walkthrough keyboard-only — share viewer mode interactive prototype
Known violations (need fix before public launch)
- Focus indicators on custom buttons — must add explicit ring (per WCAG 2.4.7)
- Files:
apps/web/src/components/*.css— add:focus-visiblerules
- Files:
- Color contrast in muted text —
--mutedcolor on dark bg needs verification- Tool: WebAIM contrast checker
- Composition canvas TSX preview drop targets — no ARIA labels
- File:
composition-canvas.tsx
- File:
- Liveblocks cursor labels — display name conveyed only via color, not announced
Tools
| Tool | Purpose | Where to use |
|---|---|---|
| axe-core | Automated WCAG violations | Playwright E2E (CI) |
| Lighthouse | Score + key issues | Manual + CI gate |
| WAVE browser extension | Visual audit | Manual review |
| NVDA (Windows) | Screen reader testing | Manual launch gate |
| VoiceOver (macOS) | Screen reader testing | Manual launch gate |
| WebAIM contrast checker | Color contrast | Manual review |
Launch checklist (per master spec §VII.2)
- axe-core CI passing on all pages
- Lighthouse Accessibility score >90 per page
- All "critical paths" pass manual screen reader test (NVDA + VoiceOver)
- Known violations resolved
- Accessibility statement published (covers tested scenarios + known limitations)