ACCESSIBILITY — relay-creative audit notes (WCAG 2.2 AA)#
Date: 2026-07-17 · Status: audit complete, fixes pending Cross-repo program: relay-board/docs/operations/accessibility-program.md
Scope: the user-facing deliverables — production error pages (errors/), transactional email templates (email/platform/, 42 templates), and the public-bound index.html / app-screens.html. Brand internals/briefs excluded.
errors/ (production Caddy error pages — public)#
Contrast and focus are fine (careful dark tokens; solid focus ring). Structural gaps in 404.html, 500.html, 503.html:
| Sev | Finding | WCAG | Fix |
|---|---|---|---|
| Medium | No heading — title is <div class="err-title">; no <h1> on the page. | 1.3.1, 2.4.6 | <h1 class="err-title">; keep the numeric code decorative. |
| Low | No <main> landmark (content in <div class="err">). | 1.3.1 | Wrap in <main>. |
| Low | Logo SVG has aria-label="Relay" without role="img"; it's decorative here. | 1.1.1 | Prefer aria-hidden="true". |
email/platform/ (42 transactional templates — public)#
Strengths: lang="en", <title>, single <h1>, descriptive links, no images (no alt gaps), OTP code passes as large text, plaintext-URL fallback under CTAs.
| Sev | Finding | WCAG | Fix |
|---|---|---|---|
| Medium | Filled CTA white on #0d9488 ≈ 3.7:1 at 14px/600 (seen in relay-welcome.html; sweep all templates with a filled CTA). | 1.4.3 | Fill → #0f766e (matches --rly-accent-text, 5.5:1). |
| Low | Nested layout tables lack role="presentation". | 1.3.1 | Add to layout tables. |
| Low | Logo SVG not aria-hidden. | 1.1.1 | Add. |
Keep these templates in sync with the platform's live shell (relay-platform/src/relay/email_templates.py) — the same two fixes apply there.
index.html / app-screens.html (public-bound)#
In good shape: lang, one <h1>, main/nav/header/footer landmarks, skip link, aria-labels, zoom not disabled, SVG-only imagery. Before production: verify the skip-link target and use the AA fill (#0f766e) on teal CTAs.
Estate-wide rule (from the program doc)#
Teal text and white-on-teal fills use #0f766e (AA). #0d9488 is reserved for non-text touchpoints (icons, rings, ≥3:1) or fills with dark ink. This is already documented in brand/relay-tokens-v35.css (--rly-accent-text).