A practical guide to website accessibility

Can every visitor actually use your website? Not "does it look nice" or "does it load fast", can someone who's blind, partially sighted, motor impaired, or using a screen reader actually work through it, read the content, and do what they came to do?

For most websites, yours included, the honest answer, and you might not like it, is no. And that's a problem, not just ethically, but legally and commercially.

Why it matters

Why should you care? Roughly one in five people in the UK has some form of disability. That's around 14 million potential visitors to your website who might struggle to use it if accessibility hasn't been considered. Beyond the moral argument, the Equality Act 2010 requires that services, including websites, be accessible to disabled people. It's not optional.

Then there's the commercial angle. Accessible websites tend to be better websites, full stop. Clear navigation, readable text, logical structure, good colour contrast, these things benefit every user, not just those with disabilities. An accessible site is almost always a more usable site.

The basics that most sites get wrong

You really don't need to become a WCAG expert overnight, but there are common issues I find on almost every site audit I do.

Images without alt text. Every image that conveys information needs a text description. Screen readers can't interpret an image, they read the alt attribute. If it's empty, the user gets nothing. Decorative images should have an empty alt attribute (alt="") so screen readers skip them entirely.

Poor colour contrast. Light grey text on a white background might look elegant, but if the contrast ratio is below 4.5:1 for body text, it fails WCAG AA. Tools like WebAIM's Contrast Checker make this trivially easy to test.

Missing form labels. Every input field needs a properly associated label element. Placeholder text doesn't count, it disappears when you start typing, which is useless for someone trying to remember what the field is for.

Keyboard navigation. Can you tab through your entire site and use every interactive element without touching a mouse? If not, you've locked out anyone who can't use a mouse, which includes many screen reader users, people with motor impairments, and power users who simply prefer the keyboard.

Heading hierarchy. Your page should have one H1, followed by H2s for main sections, H3s for subsections, and so on. Screen reader users work through by headings, it's like a table of contents. If your headings jump from H1 to H4 because you liked how the H4 style looked, you've broken that navigation.

Tools that help

Axe DevTools is a browser extension that catches a surprising number of issues automatically. WAVE from WebAIM gives you a visual overlay of problems. Lighthouse in Chrome DevTools has an accessibility audit built in. None of these catch everything, automated tools typically find about 30-40% of accessibility issues, but they're a solid starting point.

For manual testing, try working through your site with just a keyboard. Try it with a screen reader, VoiceOver on Mac, NVDA on Windows (it's free). The experience is often eye-opening.

Getting started

You don't need to fix everything at once. Start with the pages that get the most traffic. Fix the alt text, check the contrast, make sure forms are labelled, and ensure keyboard navigation works. Then work outward from there.

If you'd like an accessibility audit of your site or want to build accessibility into your next project from the start, get in touch at [email protected].