# 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-label`s, 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`).