Accessibility means people can use your website regardless of disability, device or situation. It covers people who use screen readers, navigate by keyboard, have low vision, or are simply using a phone in bright sunlight. The international reference is the Web Content Accessibility Guidelines (WCAG).
Structure and headings
Use one main heading per page and organise content with headings in a logical outline. Screen reader users often navigate by headings, so they act as a table of contents.
Text and colour
- Ensure enough contrast between text and its background. WCAG recommends a ratio of at least 4.5:1 for normal text.
- Never use colour alone to convey meaning, such as red for errors; add text or icons.
- Allow text to be enlarged without breaking the layout.
Images
Give meaningful images a short text alternative that describes their purpose. Purely decorative images should have an empty alternative so screen readers skip them.
Keyboard access
Everything that works with a mouse must work with a keyboard. Check that:
- every link, button and form field can be reached with the Tab key;
- the focused element is clearly visible;
- menus and dialogs can be opened, used and closed without a mouse.
Links and buttons
Use descriptive link text such as “Read the case study” rather than “click here”. Use real buttons for actions and real links for navigation; they behave correctly with assistive technology.
Forms
Every field needs a visible label. Explain required formats before the user makes a mistake, and when errors happen, describe them in text and connect them to the relevant field.
Motion and media
Respect the operating system’s “reduce motion” setting, avoid flashing content and provide captions or transcripts for video and audio.
Testing
Automated tools catch some issues, such as missing labels or poor contrast, but not all. Combine them with manual checks:
- Navigate key pages using only a keyboard.
- Try a screen reader on the main journeys.
- Zoom the page to 200% and check that nothing is lost.
Accessibility is easiest and cheapest when it is part of design and development from the start, rather than a fix applied at the end.
