Accessible design basics every business website should get right
Accessibility makes your website usable by more people and is a legal requirement in many places. Start with these essentials.
- Published
- Reading time
- 2 min read
Key takeaways
- Readable contrast, keyboard access and meaningful text alternatives cover many common problems.
- Accessible design usually improves usability for everyone.
- Test with real tools: a keyboard, a screen reader and an automated checker.
Accessibility means people can use your website regardless of disability, device or situation. It also overlaps with good usability: clear contrast helps someone reading on a phone in sunlight, and keyboard access helps power users. In many countries it is also a legal expectation.
Colour and contrast
Text must stand out from its background. WCAG asks for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text and key interface parts. Also, never use colour alone to convey meaning: an error should have a message and an icon, not just a red border.
Text that can be read
Use a comfortable body size, generous line spacing and limited line length. Make sure text can be enlarged without breaking the layout, and avoid putting important text inside images.
Keyboard access
Everything you can do with a mouse should be possible with a keyboard: menus, forms, dialogs and carousels. Users need to see where they are, so keep a clearly visible focus outline. A quick test is to put the mouse aside and try to use your site with the Tab, Enter, Space and arrow keys.
Meaningful structure
Use real headings in a logical order, lists for lists and buttons for actions. Screen readers use this structure to let people navigate quickly. A page that looks organised but is built from styled boxes can be confusing to hear.
Text alternatives
Images that carry meaning need alternative text that describes their purpose. Decorative images should have empty alternative text so screen readers skip them. Videos need captions, and audio content needs transcripts.
Forms people can complete
Every field needs a visible label, not just placeholder text. Error messages should say what went wrong and how to fix it, next to the field concerned. Do not clear the form when there is an error.
Motion with restraint
Animations should not flash, and people who have asked their device to reduce motion should get a calmer experience.
Test regularly
Combine automated checks with manual testing using a keyboard and a screen reader. We build these checks into our website development process and design reviews in UI/UX design.
Frequently asked questions
Which accessibility standard should we follow?
The Web Content Accessibility Guidelines (WCAG) are the international reference. Many organisations target WCAG 2.2 at level AA.
Is an accessibility overlay or plugin enough?
No. Overlays cannot fix problems in the underlying code and design, and can create new ones. Accessibility has to be built into the site itself.
