Accessible design is frequently left to the end of a project, when someone runs an audit and produces a list of fixes. By then, many of the problems are structural and expensive to change.
Treated as part of the craft from the first sketch, accessibility is mostly a set of good design habits.
Contrast and type#
Text needs enough contrast to be read in sunlight, on cheap screens and by people with low vision. WCAG asks for at least 4.5 to 1 for normal text and 3 to 1 for large text. Grey on grey may look refined in a mockup and be unreadable in use.
Habits to build in#
- Check contrast as you choose colours, not after
- Keep body text at a comfortable size, especially on phones
- Never rely on colour alone to show state or meaning
- Make focus states visible for keyboard users
Targets and structure#
Interactive elements need to be large enough to hit and far enough apart to avoid mistakes. Headings should describe the content that follows and appear in a logical order, because screen reader users navigate by them. This site's article anchors depend on the same heading structure.
Images and media#
Every meaningful image needs alt text that describes what it shows in context. Decorative images should be marked as such so they are skipped. Videos need captions, and nothing should autoplay with sound.
Accessible design is good design that works for more people.
Motion and time#
Respect reduced-motion preferences, avoid flashing content, and give people enough time to read and act. Timed sessions should warn before they expire.
Test with real tools#
Navigate with a keyboard only. Turn on a screen reader for ten minutes. Zoom the page to 200 percent. Each test reveals problems no visual review will find.
