Website accessibility explained: WCAG and common fixes
Accessibility means building a site that everyone can use, including people who navigate by keyboard, use a screen reader, need larger text or higher contrast, or have difficulty with colour or motion. It is the right thing to do, and it is also good business: you reach more customers, you reduce legal exposure as expectations tighten, and the same practices (clean structure, readable text, fast pages) help SEO. This guide explains the standard, the common failures, and how to check your own site.
What WCAG is
WCAG, the Web Content Accessibility Guidelines, is the widely recognised standard for web accessibility. You do not need to memorise it, but its structure is worth knowing. It is organised around four principles, often abbreviated POUR.
- Perceivable: people can perceive the content, for example through text alternatives for images and enough contrast.
- Operable: everything works by keyboard, not only by mouse, and people have enough time and no seizure-triggering motion.
- Understandable: the content is clear and the behaviour is predictable.
- Robust: it works across browsers and assistive technology.
Each guideline has levels, A, AA, and AAA. Level AA is the practical target for most organisations, because it covers the essentials. The current version is WCAG 2.2.
Why it matters for a business
- A meaningful share of the population has a disability, and many more have temporary or situational limitations, such as a broken arm or glare on a screen.
- Accessibility rules and claims exist in many places. Depending on where you operate and what kind of organisation you are, laws such as the Accessibility for Ontarians with Disabilities Act in Canada or accessibility claims under US law may apply. This is general information, not legal advice.
- Accessible sites tend to be better structured, which helps search engines and users alike.
The common mistakes
Most accessibility problems come from a short list of repeated errors.
- Low colour contrast. Under WCAG AA, normal text needs a contrast ratio of at least 4.5 to 1 against its background, and large text at least 3 to 1.
- Images without meaningful alt text, or decorative images that are not marked as such.
- Forms without proper labels, so a screen reader cannot tell what a field is for.
- Content that works only with a mouse. Every action must be reachable by keyboard, with a visible focus indicator showing where you are.
- Colour used as the only way to convey meaning, such as a red border as the only sign of an error.
- Small tap targets on mobile, which are hard to hit for anyone with limited dexterity.
- Heading levels used for appearance rather than structure.
Semantic HTML: the quiet foundation
Semantic HTML means using the right element for the job: a heading tag for a heading, a button for a button, a nav element for navigation, rather than generic containers styled to look right. It is invisible to most visitors and matters enormously underneath.
- Screen readers can navigate the page properly.
- Search engines understand your content structure better.
- It is more robust, and keyboard behaviour comes built in.
Sites built with clean semantic HTML tend to be more accessible, more SEO-friendly, and easier to maintain.
Colour blindness and low vision
Colour vision deficiency is common; commonly cited estimates put red-green deficiency at roughly 8 percent of men and a much smaller share of women, and many more people have low vision.
- Do not rely on colour alone. Add a label, an icon, or a pattern.
- Make links distinguishable by more than colour, for example with an underline.
- Keep strong contrast between text and background, and use readable sizes.
A quick test: view the page in greyscale. If you can still understand everything and tell what is clickable, you are on the right track.
Making forms accessible
Forms are how visitors become leads, so an inaccessible form directly loses customers.
- Every field has a visible, properly associated label, not just placeholder text that disappears.
- Errors say what is wrong and how to fix it, next to the field, and are announced to screen readers as well as shown in colour.
- The form works fully by keyboard, in a sensible order.
- Required fields and expected formats are clearly indicated.
- Tap targets are large enough on mobile.
How to check your own site
- Run an automated tool such as Lighthouse or WAVE on your key pages. They find many issues quickly, but only a share of them, so do not treat a clean report as proof.
- Navigate the whole site using only the keyboard. If you cannot reach and use everything, neither can some of your customers.
- Check contrast on your text and buttons.
- Complete your main form without a mouse, and trigger an error to see whether the message is clear.
- Try zooming the page to 200 percent, and check that nothing is cut off.
None of this has to compromise a good design. Build it in from the start, and it costs far less than retrofitting later.