Design system · 13
Made to be read by anyone.
Accessibility is not a chapter that sits beside the system; it is a property of each part of it. This page gathers the standards the other chapters are held to, in one place, so they can be checked.
The target is the Web Content Accessibility Guidelines 2.2, level AA. Where the system knowingly falls short, this page says so.
Standards
- Text contrast
- At least 4.5 : 1 for text, whatever its size. Body copy measures 6.8 : 1.
- Focus
- Always visible, always the same: a 2px tan outline set 3px off the element. Never removed, only restyled.
- Keyboard
- Everything a pointer can reach, a keyboard can reach, in reading order. Menus and sheets close on Escape and return focus to what opened them.
- Targets
- Controls are 40px tall. Buttons and standalone links are at least 24px. Icon buttons a thumb will use are 44px.
- Motion
- Honours a request for less of it, in CSS and in scripts. Entrances render finished; loops stop.
- Structure
- One title per page, headings in order, landmarks named. Japanese text is marked as Japanese.
- Without scripts
- Every page is readable as the server sends it. No copy waits on an observer to become visible.
- Zoom and reflow
- No horizontal scrolling down to 320px wide. Text is set in rem and scales with the reader's setting.
Colour and contrast
The measured pairings are in the Colour chapter. Two things follow from them. Body copy is set in quiet ink rather than a lighter grey, because the lighter tints of ink do not reach 4.5 : 1 on paper and are kept for rules and edges. And tan, at 3.8 : 1, is used for marks and for underlines, not for small text.
Colour is never the only signal. An invalid field has a message as well as a red outline; a link has an underline as well as a colour; the current chapter in a list is marked for screen readers as well as drawn longer.
Keyboard and focus
Tab through any page and the outline shows where you are. It is the same on a key, a link, a field and a swatch, so it is learned once.
In this guide, the first stop on every chapter is a link that skips to the content. Press / to search. The section list beside each chapter appears when focus reaches it, and the menu on the H mark opens from the keyboard's context-menu key as well as from a right click.
Motion
A reader who asks their device for reduced motion gets a still site: no entrances, no drawn underlines, no loops. How that is done, and why loops are stopped rather than sped up, is in Motion.
Forms
Every field has a visible label, above it, that stays there while you type. Errors appear beneath the field they belong to, in words, and are announced when they appear. A form that fails to send keeps everything that was typed into it.
How it is checked
Automated tests load every page at 320, 768 and 1440 pixels wide and fail on horizontal overflow or a script error. They check that pages read in full with scripts off and with reduced motion on, that menus and sheets return focus, and that the colours this guide prints are the colours the browser paints.
Tests do not replace reading a page with a screen reader or using it with a keyboard, and those are done by hand when a component changes.
Known limits
- The client marquee moves on its own. It pauses under a pointer and stops under reduced motion, but there is no pause control for a keyboard or a touch screen.
- One word of the tagline is set in tan. The highlighted word in the Japanese tagline reads below 4.5 : 1 at the size it is set. The sentence is complete without the emphasis, but the word itself is harder to read than it should be.
- There is no dark theme. The system is paper, and paper is light. A reader who needs a dark page has to rely on their device to provide one.
Rules
Do
- Check a new text colour against the surface it sits on.
- Give every control a visible label or a spoken one.
- Build a diagram so it is complete while still.
- Test a new component with the keyboard before the mouse.
Don’t
- Set text in a tint of ink lighter than quiet ink.
- Remove a focus outline because it looks untidy.
- Rely on hover to reveal something there is no other way to reach.
- Signal a state with colour alone.