§05

accessibility

The section before this one is about how people learn differently. This is what you owe them once you build something. Almost all of it is cheap, all of it is specified in public, and the interesting part is how often a thing that passes the standard is still unusable.

Contrast has a number, and you should know yours.
WCAG asks for a ratio of at least 4.5 to 1 between text and its background, or 3 to 1 for large text. It is arithmetic on relative luminance, not an opinion, so it takes seconds to check and there is no defensible reason not to. This site fails its own build if any pair drops below AA — just contrast reads the live colours out of the stylesheet and exits non-zero. contrast ratio
Passing the ratio does not mean it is readable.
A worked example from this site's sibling: its opening paragraph measured 10.6 to 1, comfortably AAA, and was genuinely hard to read. The cause was weight and style rather than colour — a light serif set in italic on a dark ground, where the thin strokes disappear regardless of how far apart the two colours are. The fix was 400 weight and roman, not a brighter grey. Take the standard as a floor you must clear, never as evidence that you are done. WCAG
Never let colour be the only thing carrying the meaning.
Around one in twelve men has some form of colour vision deficiency. A red row and a green row that are otherwise identical are one row to a substantial slice of your readers, and to anyone printing in monochrome or reading in bright sun. Add a shape, a label, a position, an icon. The test is to render it in greyscale and see whether it still says anything. colour blindness
Every image needs alt text, and decorative ones need empty alt text.
The second half is the part people miss. A decorative image with alt="" is skipped silently; the same image with no alt attribute at all makes a screen reader read out the filename, so the reader hears a string of characters instead of nothing. Empty is a decision and missing is an accident, and they sound completely different. the alt attribute
Semantic HTML beats ARIA, and no ARIA beats bad ARIA.
A real button is focusable, keyboard-operable and announced correctly with no work from you. A div with a click handler and a role attribute reimplements all of that badly. The first rule of ARIA, in the specification itself, is not to use ARIA if a native element will do — and an incorrect role actively misleads a screen reader, which is worse than a plain unlabelled element. WAI-ARIA
Unplug the mouse and try to use it.
The fastest audit there is. Can you reach every control with Tab, see where the focus is at all times, and escape whatever you opened? A removed focus outline is the single most common accessibility defect on the web, and it is almost always removed on purpose by somebody who thought it was ugly and never tried navigating without it. web accessibility
Respect the setting that says stop moving.
prefers-reduced-motion is a signal from the operating system that animation causes this person nausea, dizziness or worse. For a small group, flashing content can trigger seizures, which is why the guidelines put a hard limit of three flashes per second. Honouring the media query is a few lines and the cost of ignoring it is somebody being physically unwell. photosensitive epilepsy
It was never only for disabled people.
Captions were built for deaf viewers and are now used by most people watching anything in a noisy room or a quiet office. Curb cuts were built for wheelchairs and carry every suitcase, pushchair and delivery trolley in the city. Voice control, autocomplete and the humble kerb ramp all began as accommodations. Designing for the edge is how the middle gets better, and it is worth saying plainly that this is a happy side effect rather than the justification. the curb cut effect