Inclusive design
How this site is accessible
Accessibility is the part of the job I argue for most, because it is the part most often left until the end. This page sets out what this site offers, how it got there, and how I checked it.
Display settings on every page
Select Accessibility at the top of this page to try them. Your choices are remembered on this device and carry into every example that opens in its own window.
- Theme: light, dark, or the same as your device, with two dark colour sets: black and red, or grey and green.
- Text size: 100%, 125%, 150%, or 175%. At large sizes the header switches to a compact menu, so nothing scrolls sideways.
- Low-vision font: Atkinson Hyperlegible Next, designed by the Braille Institute for readers with low vision.
- High contrast, reduced motion, and wider text spacing.
- Links underlined unless you switch it off.
- Captions on by default, and transcripts next to videos.
How it got more accessible
I built the site in rounds, and checked each round before starting the next.
- 10 October 2026
Directions and fonts
Nine visual directions in two rounds. The chosen one has a light and a dark theme from the start. Five font pairings were compared, and the low-vision font option came from that comparison.
- 11 October 2026
Gallery and launch
Flat tiles that read in the same order on screen and to a screen reader: image, type, category, title, and one line. The display settings arrived on every page. Pop-ups trap focus and close with Escape.
- 13 and 14 October 2026
Pop-outs and the menu
Examples open in their own window with the same display settings. The main menu became a bar with panels that describe each page. On a phone, the menu shows every page.
- 15 October 2026
More display options
Two dark colour sets, text up to 175%, links underlined by default, and a side menu that follows the GOV.UK pattern.
- 15 October 2026
A full accessibility check
Every page and pop-out tested with axe-core in light and dark mode, then walked through with a keyboard alone. What changed:
- Gallery tiles are named by their visible kind and title, so voice control users can say the name shown on the tile.
- Headings run in order.
- Every video with speech has captions, and every audio clip has a transcript.
- Low-contrast text now meets a contrast ratio of 4.5 to 1.
- The Londinium map has a page heading, and its map pins say their full names.
- Large text keeps the header on one line.
The rules I write to
- WCAG 2.2 AA as the floor. The Web Content Accessibility Guidelines (WCAG) set the minimum, not the goal.
- Colour is never the only signal. The traffic lights in the weekend meals example say low, medium, or high in words.
- Pictures are described, and never needed. If an image fails to load, the instruction still works.
- No words that describe difficulty. Words such as “simple”, “easy”, and “complex” tell the reader how they should feel. A number or a step count tells them what to expect.
- “Select”, not “click”. Not everyone uses a mouse or a touch screen.
- Plain English. I follow the Plain English Campaign's guidance: sentences of 15 to 20 words on average, active verbs, and everyday words, such as “start”, not “commence”.
Experiments: ideas I am testing · Case study: weekend hospital meals