WCAG for normal websites: what it means in practice

Accessibility gets filed under "nice to have, someday" until someone mentions a legal deadline, at which point it becomes a panic. Neither reaction is much use. The practical truth is smaller and duller: most accessibility problems on a small site are six recurring mistakes, and fixing them takes less time than choosing a colour scheme.

What WCAG actually is

The Web Content Accessibility Guidelines — a list of testable rules for making a page usable by people who cannot see it well, cannot use a mouse, or cannot hear audio. The current version is WCAG 2.2, published in October 2023 and now also an ISO standard.

The rules come in three levels. A is the floor. AA is the level every law and contract points at. AAA is aspirational and nobody is required to meet it across a whole site. When someone says "we need to be compliant," they mean AA.

What changed, and why it stopped being optional

The European Accessibility Act has applied since June 2025, measured against the standard EN 301 549, which currently lines up with WCAG 2.1 level AA. 2026 is the first full year that national authorities supervise against it. A newer version of that standard, incorporating WCAG 2.2, is expected around the turn of 2027.

The practical takeaway for anyone building now: aim at WCAG 2.2 AA. It contains everything 2.1 asks for plus a few additions, so you clear today's requirement and the next one at the same time.

Whether the law applies to your particular business — which country, which sector, what size — is a question for a lawyer, not for a blog post. What follows applies regardless, because it is simply what makes a page usable.

The six failures that show up on nearly every site

1. Grey text on a slightly less grey background

The single most common failure, and it comes from design taste: light grey looks refined on a designer's calibrated monitor. On a phone in daylight it disappears. The rule is a contrast ratio of at least 4.5 to 1 for body text, 3 to 1 for large headings. Any contrast checker gives you the number in seconds.

2. Images with no alt text

A screen reader announces "image" and moves on, and your visitor learns nothing. Write what the picture shows, in a short sentence. Decorative images — dividers, background flourishes — get an empty alt so the reader skips them entirely.

3. Form fields labelled only by placeholder

The grey word inside the box disappears the moment someone starts typing, which is exactly when they need it. It also is not announced reliably. Every field needs a real label, even if design puts it visually above the box.

4. No visible focus

Press Tab on your own site. If you cannot see where you are, nobody navigating by keyboard can either — and that includes people with motor impairments, people with a broken trackpad, and anyone filling a form quickly. Many themes remove the browser outline because it "looks ugly". Replace it with something better, do not delete it.

5. Headings used as styling

An H3 chosen because it was the right size, an H1 skipped entirely. Screen reader users navigate by heading the way sighted users skim by eye; a scrambled outline turns the page into a wall. Headings describe structure, and CSS handles size.

6. Tap targets the size of a pea

Small links crammed together in a footer, an X button of twelve pixels. Give interactive elements room — roughly a fingertip, with space around them. Everyone benefits, not only people with tremors.

Responsive design: what it means and what it does not

One thing to avoid: overlay widgets

You will be offered a script that promises instant compliance — a little accessibility icon in the corner that supposedly fixes everything. They keep losing in court, because they do not fix the underlying page: contrast stays wrong, labels stay missing, the widget just sits on top. Worse, they often interfere with the assistive software people already use.

There is no script that makes an inaccessible page accessible. The fixes are in the page.

A twenty-minute audit you can do yourself

• Run one automated check — Lighthouse has an accessibility section built in. It catches contrast, missing alt text and missing labels. It finds maybe a third of real problems, which is a fine start.
• Unplug the mouse. Tab through the whole page: every link, every field, every button. If you get stuck or lost, so does everyone else.
• Zoom to 200 percent. Text should reflow, not disappear behind other elements.
• Read the page in grayscale. If a warning or a required field is marked only in red, its meaning vanishes for colour-blind visitors.
• Turn on the screen reader your computer already has, and listen to the first thirty seconds of your homepage.

That last one is uncomfortable and it is the most valuable minute of the five. You hear your own page the way a large group of people experiences it, and the list of what to fix writes itself.

Generate a page that starts with sane contrast and real labels