Website accessibility means building pages that people can use whatever their abilities, devices or situation, including people who use screen readers, keyboards, captions or magnification. The basics are good colour contrast, full keyboard use, meaningful alt text, labelled form fields, clear headings and captions on video. Most of these are inexpensive when built in from the start and costly to retrofit.
Key takeaways
- Accessibility is about making sure real people can read, navigate and complete tasks on your site.
- The Web Content Accessibility Guidelines (WCAG) organise the work under four principles: Perceivable, Operable, Understandable and Robust.
- Many common problems are simple: low contrast, missing alt text, unlabelled form fields and menus that cannot be used with a keyboard.
- You can run useful checks yourself with free tools and a keyboard, though automated tools only find some issues.
- Accessible sites tend to be clearer, easier to use and better structured for search engines as well.
What website accessibility means
People use the web in many ways. Some are blind or have low vision and use screen readers or magnification. Some cannot use a mouse and rely on a keyboard, switch device or voice control. Some are deaf or hard of hearing and need captions. Some have conditions that affect attention, memory or reading. Many more are in temporary situations: a broken arm, bright sunlight on a phone, a noisy train.
Designing for these needs is not a niche exercise. It improves usability for everyone, and it widens the audience who can become your customers.
WCAG in plain English
WCAG is the widely used international standard for web accessibility, published by the World Wide Web Consortium. It sets testable criteria at three conformance levels, and many organisations aim for level AA. The guidelines are grouped under four principles, often remembered as POUR.
Perceivable
Users must be able to perceive the content. If something is only visible, a blind user misses it; if only audible, a deaf user misses it. This covers text alternatives for images, captions for video, sufficient colour contrast and content that does not rely on colour alone.
Operable
Users must be able to operate the interface. Everything should work with a keyboard, give people enough time, avoid content that flashes in ways that can trigger seizures, and make it clear where the user is on the page.
Understandable
Content and controls should behave predictably. Use plain language, clear labels, consistent navigation and helpful error messages that explain how to fix a problem.
Robust
Content should work with a range of browsers and assistive technologies, now and later. Clean, valid, semantic markup is the foundation.
The practical basics
Colour contrast
Text needs enough contrast against its background to be readable, especially for people with low vision. Light grey text on white and white text on a pale brand colour are frequent offenders. WCAG defines minimum contrast ratios, and free contrast checkers will test your colour pairs. Also avoid using colour as the only signal. A red border on an invalid field should come with an icon or message too.
Keyboard navigation
Try to use your site without a mouse. You should be able to reach every link, button, menu and form field with the Tab key, activate them with Enter or Space, and see where focus is at all times. Common failures include custom dropdowns that only open on hover, pop-ups that trap focus, and focus outlines removed for visual neatness. A "skip to main content" link at the top helps keyboard users bypass repeated navigation.
Alt text for images
Alt text describes an image for people who cannot see it. Write it to convey what the image contributes: a product photo might be described as the item and its key visible features; a chart might get a short summary with the full data in nearby text. Decorative images that add nothing should have an empty alt attribute so screen readers skip them. Avoid stuffing alt text with keywords, and avoid text inside images where possible.
Form labels and errors
Every field needs a visible, properly associated label, not just hint text inside the field that disappears when typing starts. Mark required fields clearly, group related fields, and explain errors next to the field in plain words. Forms are where many sales and enquiries happen, so failures here cost money directly. Our guide to UX design principles that improve conversion covers form clarity from the conversion side.
Headings and landmarks
Use headings in a logical order to describe the structure of the page: one main heading, then sections and subsections. Do not pick heading levels for their size. Landmarks such as header, navigation, main and footer let screen reader users jump between regions. Semantic HTML provides most of this for free.
Captions, transcripts and media
Provide captions for video and a transcript for audio. Avoid autoplaying audio, and give users a way to pause moving content. These help deaf users, people in quiet or noisy places and anyone who prefers reading.
Responsive and zoomable layouts
Pages should still work when text is enlarged and on small screens. Avoid locking zoom, and make sure tap targets are large enough to hit. This links closely to responsive design.
How to test your own site
You do not need to be a specialist to find the most serious problems.
- Keyboard-only test. Put the mouse aside and complete your key journeys: reading the menu, submitting a contact form, checking out.
- Automated checkers. Free browser tools and built-in developer-tool audits flag missing alt text, contrast failures and unlabelled fields. They only detect a portion of issues, so a clean report is not proof of accessibility.
- Zoom and resize. Enlarge text and zoom the page and see whether content stays readable and usable.
- Screen reader spot check. Try a free screen reader on a key page to hear what a user hears. It takes practice, so consider involving users who rely on assistive technology.
- Review content. Check link text makes sense out of context ("read our pricing guide", not "click here").
Record what you find, fix the highest-impact problems first and retest. Treat accessibility as part of your regular release routine, not a one-time project.
Business and SEO benefits
- More people can use your site, including customers with disabilities and those in difficult conditions.
- Better usability for everyone, since clear labels, readable text and logical structure reduce friction.
- Overlap with SEO. Descriptive headings, alt text, transcripts and clean semantic markup help search engines understand pages. Accessibility is not a ranking trick, but the habits reinforce each other.
- Lower rework cost. It is cheaper to design accessible components once than to patch a finished site.
A note on legal requirements
Laws and standards about digital accessibility differ by country and sector, and some apply to public bodies or specific industries. This article is general information, not legal advice. If you are unsure which rules apply to your business, speak to a qualified legal professional.
A worked example
Imagine a small clinic with a booking form on its website. A keyboard test shows that the date picker cannot be opened without a mouse, the form uses grey hint text inside the fields instead of labels, and error messages appear in red with no explanation. The fixes are modest: replace the picker with an accessible control, add visible labels, write specific error text and raise the text contrast. The result is a form that more patients can complete, and likely fewer abandoned bookings too. The same thinking applies to a service booking system.
FAQ
What is the difference between accessibility and usability?
Usability is how easy a site is to use. Accessibility makes sure people with a wide range of abilities and assistive technologies can use it. They overlap strongly, but accessibility specifically addresses barriers for disabled users.
Is an accessibility overlay or plugin enough?
Quick-fix widgets cannot repair underlying problems such as poor structure, unlabelled controls or inaccessible components, and they can interfere with assistive technology. Fixing the code and design is the reliable route.
Which WCAG level should I aim for?
Many organisations target level AA of a current WCAG version, which covers the most common needs. Check whether your country, sector or customers specify a requirement.
Does accessibility improve SEO?
It can help indirectly. Clear headings, descriptive alt text, readable content and transcripts make pages easier for people and search engines to understand, though it is not a proven ranking factor.
Related reading
- UX Design Principles That Quietly Improve Conversion
- Landing Page Best Practices That Turn Visitors into Leads
- On-Page SEO Checklist: Titles, Headings, Content and Links
Next steps
This week, test your three most important pages using only a keyboard, run a free automated checker and fix the obvious contrast, label and alt text problems. If you are planning a new site or app, include accessibility in the brief and in your website development and design requirements from day one. If you would like help auditing an existing site, you are welcome to contact us.
