PAGE 08 · ACCESSIBILITY & VOICE
Accessibility & voice
The framework's audience is regulators, journalists, and citizens — many of whom rely on assistive tech. Target WCAG 2.2 AA across the public surface; AAA on the public registry. The voice is plain, declarative, and never euphemistic.
01.
Contrast
All approved foreground/background pairings.
Approved pairings
Ink on paper
Body, headings, default text.
17.8:1 · AAABody, headings, default text.
Ink-soft on paper
Secondary, captions, meta.
8.6:1 · AAASecondary, captions, meta.
Teal-700 on paper
Links, brand accents.
7.4:1 · AAALinks, brand accents.
Paper on ink-dark
Dark hero, dark cards.
14.2:1 · AAADark hero, dark cards.
Paper on teal-500
Primary buttons.
4.7:1 · AAPrimary buttons.
Ink-soft on surface
Body on subtle bg.
8.3:1 · AAABody on subtle bg.
Forbidden. Teal-300 (#66bfb9) on white reads at 2.6:1. Use only on dark surfaces or as decoration. Never for text or interactive elements.
02.
Focus
Every interactive element has a visible focus state. Never outline:none without replacement.
Focus styles
| Element | Focus treatment |
|---|---|
| Buttons | 3px ring, teal-500 @ 30% opacity, outset. |
| Inputs | Border becomes teal-500, plus 3px ring @ 15% opacity. |
| Links (text) | 2px solid teal-500 outline, 3px offset, 2px radius. |
| Cards (when clickable) | 2px outline teal-500, offset 2px from card edge. |
03.
Hit targets & ARIA
Minimum sizes and ARIA conventions.
Targets & ARIA
| Rule | Value | Notes |
|---|---|---|
| Touch target (min) | 44 × 44 px | Mobile + tablet. Includes invisible padding. |
| Touch target (desktop dense) | 32 × 32 px | Tables and toolbars. Cursor environment only. |
| Spacing between targets | ≥ 8 px | Especially in lists and toolbars. |
| Icon-only buttons | aria-label required | Describe the action, not the icon ("Open menu", not "Hamburger"). |
| Modals | role="dialog", aria-modal | Trap focus; restore on close; ESC dismiss. |
| Live regions | aria-live="polite" | For toast notifications and async result updates. |
| Error fields | aria-invalid + aria-describedby | Link the input to its error text. |
| Skip link | First tab stop | "Skip to content" — visually hidden until focused. |
04.
Voice & tone
Plain. Declarative. Never euphemistic about AI.
Voice principles
DO"This page was drafted with AI and edited by a named human." Specific. Verifiable. Plain English.
DON'T"This content was created with the help of cutting-edge AI to enhance your reading experience." Vague. Marketing tone.
DO"Submit assessment" "Save and continue" "Delete record" — verbs first.
DON'T"Click here to proceed with your submission" — bureaucratic, redundant.
DO"Your assessment was saved. You can return to it from your dashboard." Past tense for confirmation. Tells the user what just happened and what to do next.
DON'T"Awesome! Your assessment is now in our system. We'll be in touch soon!" Over-friendly. Vague timeline.
05.
Capitalisation, numbers, dates
UK English throughout. Sentence case for everything except product/proper nouns.
Style rules
| Element | Rule | Example |
|---|---|---|
| Headings | Sentence case | "The eight entities" not "The Eight Entities" |
| Buttons | Sentence case verb | "Submit assessment" not "Submit Assessment" |
| Brand & programme names | Title case as registered | "AI Transparency Framework" "DTTT" |
| Grades | "Grade " + numeral | "Grade 0", "Grade 2", never "G2" except in tables. |
| Numbers in body | Spell out 0–9, numerals from 10 | "three entities", "12 questions" |
| Numbers in data | Always numerals, tabular figures | "247 organisations" |
| Dates | D MMM YYYY · UK order | "12 Apr 2026" not "04/12/2026" |
| Times | 24-hour, UTC by default | "02:00 UTC" |
| Percentages | Numeral + %, no space | "42%" not "42 per cent" |
| Ranges | En dash, no spaces | "2024–2026" "Grade 0–3" |
| Quotation | Curly, double for speech | "Transparency is more than disclosure." |