Website accessibility: what WCAG is and how to test your own site
Website accessibility sounds like a topic for public bodies, but in practice it decides whether some of your customers can send you an enquiry at all. Weak contrast, a form without labels or a menu you cannot use with a keyboard are barriers site owners rarely notice. Here is what the WCAG standard means in practice, how to test your site in fifteen minutes, which mistakes come up most often, and why an accessible site does better in Google too.
Author: Bartosz Gonta
1. What is website accessibility?
An accessible website is one people can use regardless of how they see, hear, move or take in information. A blind person browses it with a screen reader, someone with a hand tremor with the keyboard only, an older visitor zooms the text to 200%, and someone in bright sunlight tries to read grey text on a white background.
That is not a narrow group. Limits on sight, hearing or hand dexterity affect a large share of society, and with age almost everyone. Add the temporary ones: a broken arm, a phone held in one hand on the tram, a noisy place with no headphones.
Accessibility is not a separate “version for disabled people”; it is a way of building one site that everyone can use.
2. WCAG 2.1 AA in plain English: four principles
In practice an “accessible website” means conformance with the WCAG guidelines (Web Content Accessibility Guidelines) at level AA — an international standard developed by the W3C, the body behind the web's standards. WCAG sounds technical, but it boils down to four principles:
- Perceivable: content can be taken in through different senses: images that carry information have a text description, videos have captions, and text has enough contrast with its background.
- Operable: everything works with a keyboard, you can see which element is active, and nothing disappears before the user has had time to read it.
- Understandable: forms have labels and clear error messages, and navigation behaves predictably on every page.
- Robust: the code is valid and described so that screen readers understand what is a button, a heading or a list.
3. How to test your website's accessibility in 15 minutes
A full audit is a specialist's job, but you can catch the biggest problems yourself:
- Put the mouse aside and move through the site with the Tab key. Can you see where you are? Can you reach the menu, the form and the submit button? Can you close the cookie banner?
- Run Lighthouse in Chrome (DevTools → Lighthouse → Accessibility) or the free WAVE extension. They show missing image descriptions, form labels and weak contrast.
- Zoom the page to 200% (Ctrl and plus). Text should not overlap or run off the screen.
- Fill in the contact form with a mistake. Does the message say what is wrong and where, or does it just turn the field red?
- Turn on a screen reader — VoiceOver on iPhone or TalkBack on Android — and listen to your homepage for a minute.
Automated tools catch only some of the problems — they cannot judge whether an image description makes sense or whether the content order is logical. But they are a good, free starting point.
4. The most common accessibility mistakes on business websites
The same few problems keep coming up on small-business sites:
- Weak contrast: light grey text on white, or text over a photo with no darkening. WCAG requires a contrast of at least 4.5:1 for normal text.
- Missing alt text: product photos, a price list uploaded as an image, icons with no label. A screen reader then reads out the file name, or nothing.
- Forms without labels: a field described only by grey placeholder text that disappears as you type. The screen reader does not know what the field is for, and soon neither does the user.
- Hidden focus: the outline on the active element switched off because it “looks ugly”. For a keyboard user that is like a cursor that vanished.
- “Click here” links: screen readers can list just the links on a page — “more” ten times says nothing.
- Animations that cannot be turned off: motion you cannot stop bothers people with vestibular and attention disorders. A site should respect the system's reduced-motion setting.
5. Accessibility, SEO and conversion
Accessibility and SEO have a surprising amount in common. Google's crawler “reads” a page much like a screen reader: it needs a proper heading structure, image descriptions, meaningful link text and content in HTML rather than in images.
The same goes for conversion. Readable contrast, large form fields and clear error messages help anyone browsing on a phone on the move — which is most of your customers.
An accessible site means more people who can buy from you and better-described content for Google. It is an investment that works regardless of your industry or size.
6. Common questions about website accessibility
Does an accessible website have to look worse?
No. Sufficient contrast, a visible focus and readable forms are a matter of design, not of giving up on looks. The best-designed sites are usually accessible precisely because someone thought about it from the start.
Is an accessibility overlay (widget) enough?
No. Buttons that enlarge text or change contrast do not fix problems in the code: missing labels, wrong content order or a keyboard that does not work. Accessibility is built into a site, not bolted on top.
How much does it cost to make a website WCAG compliant?
It depends on where you start. On a new site, accessibility built in from the start costs little more than leaving it out. On an old, heavy site, fixes can cost more than a rebuild.
7. Where to start
Run the keyboard test and Lighthouse from point three on your homepage and contact form. Those are the two places where a barrier most often costs you a customer.
Alongside speed and technical SEO, accessibility is standard in every site I build. Send me your site's address and within 48 hours you'll get a free quote, along with what blocks it most.
Have a project in mind? Describe it briefly — I reply personally, usually within 24 hours.
