Web accessibility guide

Accessible websites work for everyone — people using screen readers, keyboard navigation, voice control, or just a slow mobile connection. This guide covers the essentials: what accessibility means, what WCAG 2.2 requires, and how to fix the most common problems.

What is web accessibility?

Web accessibility means designing and building websites so that people with disabilities can perceive, understand, navigate, and interact with them. Disabilities that affect web use include:

• Visual — blindness, low vision, colour blindness
• Auditory — deafness or hard of hearing
• Motor — difficulty using a mouse or touchscreen, relying on keyboard or switch access
• Cognitive — dyslexia, attention difficulties, memory impairments
• Speech — affecting use of voice input

Accessibility also benefits people in temporary or situational limitations — a broken arm, bright sunlight on a screen, or a noisy environment where audio can't be heard.

Why it matters

It's the law

In the UK, the Equality Act 2010 (opens in a new tab) requires organisations to make reasonable adjustments for disabled people. Public sector bodies must also meet the Public Sector Bodies Accessibility Regulations 2018 (opens in a new tab), which mandate WCAG 2.1 AA compliance. The EU's European Accessibility Act extends similar requirements to private sector organisations from 2025.

It's a large audience

Around 1 in 5 people in the UK have a disability. Globally, that's over a billion people. An inaccessible website excludes a significant portion of potential users, customers, or citizens.

It's good for everyone

Captions help in noisy environments. Good colour contrast helps in bright sunlight. Clear, simple language helps non-native speakers. Keyboard navigation helps power users. Accessibility improvements consistently improve usability for everyone.

It improves SEO

Search engines read pages similarly to screen readers — they rely on semantic HTML, meaningful link text, and descriptive image alt text. Accessible pages tend to rank better.

WCAG 2.2 explained

The Web Content Accessibility Guidelines (WCAG) 2.2 (opens in a new tab) are the internationally recognised standard for web accessibility, published by the W3C. They are organised around four principles — content must be:

• Perceivable — information must be presentable in ways users can perceive. Text alternatives for images, captions for video, sufficient colour contrast.
• Operable — all functionality must be available via keyboard, with enough time to complete tasks, and without causing seizures.
• Understandable — content must be readable and predictable, and forms must help users avoid and recover from mistakes.
• Robust — content must be compatible with current and future assistive technologies.

Conformance levels

Each WCAG criterion is assigned a conformance level:

• Level A — the minimum. Failure at this level means some users simply cannot access your content at all.
• Level AA — the standard most organisations aim for, and the level required by UK and EU regulations.
• Level AAA — the highest level. Not required for whole sites, but worth applying where possible.

WCAG 2.2 added nine new criteria over 2.1, focusing on cognitive accessibility and mobile interaction — including minimum target sizes, focus visibility, and accessible authentication (no cognitive function tests like CAPTCHAs without alternatives).

The most common issues

Missing or poor alt text

Every image that conveys information needs a text alternative via the alt attribute. Decorative images should use alt="" so screen readers skip them. Avoid alt text like "image.jpg" or "photo" — describe what the image shows and why it's there.

Insufficient colour contrast

WCAG 2.2 requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold) against its background. Low contrast is one of the most commonly failed criteria and one of the easiest to fix.

Missing form labels

Every form input must have a programmatically associated label — not just placeholder text, which disappears when the user starts typing. Use <label for="…"> or aria-label. Group related inputs with <fieldset> and <legend>.

Inaccessible keyboard navigation

Everything you can do with a mouse must be doable with a keyboard alone. Tab through your page and check: can you reach every interactive element? Is the focus indicator visible? Does focus ever get trapped?

Empty or vague link text

Links that say "click here", "read more", or "learn more" are meaningless without surrounding context — and screen reader users often browse links in isolation. Make link text describe the destination or action: "Read our accessibility guide" rather than "Read more".

Missing page language

The <html> element must have a lang attribute (e.g. lang="en-GB"). Without it, screen readers may read content in the wrong language, making it unintelligible.

No skip link

A "skip to main content" link at the top of each page lets keyboard and screen reader users jump past repeated navigation. It can be visually hidden until focused.

Auto-playing media

Video or audio that plays automatically can disorient or distress users. If you must autoplay, ensure it's muted, brief, and has a visible pause control. Never autoplay audio.

How to test

Automated tools like a11ycheck catch around 30–40% of accessibility issues. The rest require human judgement. A thorough testing approach combines:

1. Automated scanning — use a11ycheck or similar tools to surface obvious issues quickly. Run checks on representative pages: home, a form, a long-form content page, an error state.
2. Keyboard testing — unplug your mouse. Use Tab, Shift+Tab, Enter, Space, and arrow keys to navigate your entire site. Check that focus is always visible, nothing gets trapped, and all interactive elements are reachable.
3. Screen reader testing — use NVDA (opens in a new tab) (Windows, free) or VoiceOver (Mac/iOS, built-in) with Firefox or Safari respectively. Can you understand the page? Do images make sense? Do forms work?
4. Zoom and reflow — zoom to 200% and 400%. Does the layout still work? Does text reflow without horizontal scrolling?
5. User testing — nothing replaces testing with real disabled users. Reach out to disability organisations or recruit through specialist user research agencies.

Quick wins

If you're starting from scratch, these changes will have the biggest impact with the least effort:

1. Add lang="en" (or your language) to every <html> element
2. Write meaningful alt text for every informative image; use alt="" for decorative ones
3. Check your colour contrast with a tool like WebAIM Contrast Checker (opens in a new tab)
4. Label every form input with a visible <label>
5. Add a "Skip to main content" link as the first item in your page
6. Make link text descriptive — ditch "click here" and "read more"
7. Use a logical heading hierarchy — one <h1> per page, then <h2>, <h3> in order
8. Never remove the default focus outline without replacing it with something equally visible