Accessibility

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.

CategoryStatusNotes
Color contrast (text)🟡 partialDark theme primary, contrast not tested in every state
Keyboard navigation (Tab/Enter/Esc)🟡 partialNative HTML elements OK, custom canvas (workflow) — no
ARIA labels🟡 partialButtons OK, complex widgets (composition canvas) — minimal
Focus indicators🔴 not coveredBrowser defaults relied upon, explicit ring not yet styled
Screen reader🔴 not testedNVDA / VoiceOver runs have not been performed
200% text resize🟡 unknownMobile/desktop layouts not tested at 200%
Color-only signals🟡 partialDrift 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)

  1. Sign-up + sign-in flow (/, /app)

    • Tab navigation: works without mouse
    • GitHub OAuth redirect: screen reader announces state changes
    • Error states: announced + visible
  2. Projects list (/app)

    • Cards focusable via Tab
    • "Connect repo" / "Sync now" — clear focus + keyboard activatable
    • Delete confirmation modal — focus trap, Esc closes
  3. 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
  4. 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)

  1. Focus indicators on custom buttons — must add explicit ring (per WCAG 2.4.7)
    • Files: apps/web/src/components/*.css — add :focus-visible rules
  2. Color contrast in muted text--muted color on dark bg needs verification
    • Tool: WebAIM contrast checker
  3. Composition canvas TSX preview drop targets — no ARIA labels
    • File: composition-canvas.tsx
  4. Liveblocks cursor labels — display name conveyed only via color, not announced

Tools

ToolPurposeWhere to use
axe-coreAutomated WCAG violationsPlaywright E2E (CI)
LighthouseScore + key issuesManual + CI gate
WAVE browser extensionVisual auditManual review
NVDA (Windows)Screen reader testingManual launch gate
VoiceOver (macOS)Screen reader testingManual launch gate
WebAIM contrast checkerColor contrastManual 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)