Accessibility is mostly legibility

Accessibility is usually presented as a compliance obligation, which gets it done badly or not at all. For a small site most of it is simply legibility, and the same changes that make a page usable with a screen reader make it usable on a bus in daylight.

The handful that cover most of it

1. 01Contrast. The published guidelines set a minimum of 4.5 to 1 for normal text and 3 to 1 for large text. Light grey on white looks refined in a mockup and is unreadable on a phone outdoors. Check with a tool rather than by eye, because your eye already knows what the words say.
2. 02Text size and the ability to enlarge it. At least 16 pixels for body text, and nothing that breaks when somebody zooms.
3. 03Real headings in order. A page whose structure is made of bold text has no structure to anybody navigating by headings, and that includes search engines.
4. 04Alternative text on images that carry meaning, and empty alternative text on decorative ones. An image described as image1.jpg is worse than one described as nothing.
5. 05Labels on form fields, properly associated, rather than placeholder text that disappears the moment somebody types.
6. 06A visible focus indicator. Removing it because it looked untidy makes the site unusable by keyboard, and it is the single most common self-inflicted accessibility fault.

Six things, most of them an afternoon, and between them they cover the large majority of what a small site gets wrong.

The things that look helpful and are not

• Overlay widgets that promise compliance in one line of script. They do not deliver it, they are widely criticised by the people they claim to help, and they can make a site harder to use.
• Alternative text on every decorative image, which turns a screen reader experience into a recital of filenames.
• An accessibility statement describing conformance you have not tested.
• Removing the focus outline and replacing it with nothing.

Why it overlaps with everything else

Worth noticing, because it changes the economics. Proper headings help search engines parse the page. Sufficient contrast helps everyone on a phone outside. Labelled fields reduce form errors for all users. Captions on video serve people watching with the sound off, which on social platforms is most of them.

So this is not a separate project competing with the useful work. Most of it is the useful work, described differently.

Colour as the only signal

A common fault with a trivial fix. The required field is red, the valid one is green, the active tab is blue and nothing else distinguishes them. For a reader who does not perceive the difference, and that is a meaningful share of any audience, the page has no state at all.

The rule is that colour may carry information but never alone. Add the word, the icon, the underline, the border. This also helps everybody looking at a dim screen in bright light, which is most phone use.

Video, audio and motion

• Captions on anything with speech. Needed by people who cannot hear it and used by the larger group watching with the sound off.
• A transcript for audio, which is also the only way the content is searchable.
• Nothing that plays sound without being asked. Still common and still the fastest way to make somebody close a tab.
• No flashing, and nothing that moves indefinitely without a way to stop it, which includes carousels and animated backgrounds.
• Respect the setting that asks for reduced motion, which the browser will tell you about if you check.

Link text, read out of context

Somebody navigating by links hears them as a list, without the sentences around them, which is why a page of click here and read more is unusable. The fix is to make the link text the destination: our pricing, the delivery policy, how we handle returns. It helps a reader scanning visually for the same reason, and it is the single easiest of these changes to make while writing rather than afterwards.

Testing without buying anything

Your browser ships with most of what you need. The built-in inspection tools include an accessibility check that reports contrast failures, missing labels and heading problems on the page you are looking at, and both major desktop operating systems include a screen reader you can switch on to hear your own page read aloud. Neither is a substitute for testing with people who use these tools daily, and both will find the faults that make such testing pointless.