Back to blog

Web accessibility and WCAG: what the law now requires

Abstract illustration of an accessible web interface in navy and cyan

A website can look flawless and still be unusable for a meaningful share of its visitors. Someone with low vision zooms the text to 200 percent and the layout collapses. A keyboard-only user reaches the navigation menu and gets stuck there. A visitor with colour vision deficiency cannot tell the red "Delete" button from the grey "Cancel" one. These are the exact situations WCAG addresses.

Accessibility has left the territory of good intentions. It is now part of the European regulatory framework, it shows up in public tenders, and it increasingly appears in contracts with corporate clients. This article explains what the standard actually covers, what the conformance levels mean, and how a business website moves from "looks good" to "works for everyone".

What WCAG is and why it became the norm

WCAG stands for Web Content Accessibility Guidelines, a set of specifications developed by the W3C. The first version appeared in 1999, but the real turning point was WCAG 2.0 in 2008 and the later 2.1 and 2.2 revisions. The reason this document became the reference is straightforward: it is written as testable success criteria rather than general advice. Each criterion can be marked as met or not met, which makes it usable in an audit, in a contract clause, and in a legal dispute.

In Europe the EN 301 549 standard points directly at WCAG and serves as the technical basis for legislation. The public sector has been bound by Directive 2016/2102 for years, and the European Accessibility Act extends the scope to a range of private services: e-commerce, banking, transport ticketing, e-books, telecommunications. If your company sells online to consumers in the EU, the chance that you fall within scope is real.

Who benefits from an accessible site

The group is far wider than most people assume. Beyond users with permanent disabilities, accessibility helps:

  • Older visitors with reduced vision or slower motor control, a fast growing and financially active audience.
  • People with temporary limitations, such as a broken arm or an eye infection.
  • Anyone reading the site on a phone in bright sunlight, where low contrast becomes invisible.
  • Users on slow connections, where images fail to load and the alt text is the only information left.

In practice, accessibility measures almost always improve usability for everyone. Larger tap targets, clear field labels and predictable navigation do not help only a minority.

The four principles of the standard

WCAG is organised around four principles, known by the acronym POUR. Each principle contains guidelines, and each guideline has specific success criteria.

Perceivable

Information must reach the user through more than one sensory channel. In practice this means alt text for every meaningful image, captions and transcripts for video, sufficient contrast between text and background, and a structure that does not rely on colour alone to carry meaning. An error message that only turns the field red is a classic failure.

Operable

The entire interface must be usable without a mouse. This is probably the most commonly broken requirement. Test it yourself: open the home page, press Tab repeatedly and watch whether the focus indicator is visible, whether the order is logical, and whether you can leave an open modal with Escape. This principle also covers giving users enough time to complete forms and banning content that flashes in a way that can trigger seizures.

Understandable

The page language must be declared in the HTML, navigation must stay consistent across pages, and forms must give clear instructions before the error, not only after it. If a phone field requires a country code, say so up front.

Robust

The code must be valid and semantic so assistive technology can interpret it correctly. A button built from a div with an onclick handler is not announced as a button by a screen reader. Using the right HTML elements solves most of the problem without a single line of extra code.

Accessible interface and screen reader navigation

Conformance levels: A, AA and AAA

The standard defines three levels. In European practice AA is the working target for almost every project, while AAA is pursued only for specialised services.

LevelScopeTypical requirementsRealistic for
AMinimum thresholdAlt text, keyboard navigation, page languageAbsolute minimum, not enough for regulatory conformance
AAStandard target4.5:1 contrast for normal text, video captions, visible focus, 200 percent resizeCorporate sites, online stores, public services
AAAExtended7:1 contrast, sign language for video, glossary for unusual termsSpecialised platforms, rarely applied site wide

One important detail: conformance is assessed per page, not for the site as an abstraction. A flawless home page does not compensate for an inaccessible checkout.

The most common failures we see

Auditing existing projects, the same weak spots repeat.

Contrast is problem number one. Grey text at #999999 on white gives a ratio of roughly 2.8:1, well below the required 4.5:1. Designers like it for the clean look, but it removes entire passages from legibility for part of the audience.

Forms frequently have no associated label element. Placeholder text is not a substitute, because it disappears as soon as typing begins and usually sits at low contrast. The screen reader announces "text field" with no hint about what belongs inside.

Images get either an empty alt or a literal description of the file name. Alt text should convey the function of the image in its context. A product photo in a catalogue is described by the product name, while a decorative divider gets an empty alt so it is skipped.

Video content almost never carries captions. This is relatively cheap to fix yet routinely ignored. The same captions, incidentally, increase watch time on social platforms where sound is off by default.

Modals and dropdown menus often trap focus or never receive it at all. A keyboard user ends up locked behind the cookie banner and cannot continue. If banners are relevant to you, see our piece on GDPR and cookies.

How an audit works, step by step

A sensible process combines automated and manual checks, because tools catch only 30 to 40 percent of real issues.

The first step is an automated scan. Lighthouse in Chrome, axe DevTools or WAVE give a quick map of obvious violations: missing alt attributes, insufficient contrast, broken heading structure.

The second step is keyboard navigation through the main user journeys. Home page, product page, add to cart, checkout form, contact form. Each one is completed entirely without a mouse.

The third step is a screen reader test. NVDA on Windows is free and VoiceOver is built into macOS and iOS. You do not need to be an expert to hear that the order button is announced as "link, blank".

The fourth step is a zoom check. Set the browser to 200 percent and see whether content reflows or whether part of it slides off screen and becomes unreachable.

The output is a prioritised list: blocking issues, serious issues, cosmetic issues. Blocking issues are those that make a function entirely unusable, and they get fixed first.

Accessibility and SEO overlap more than you would expect

Semantic headings help both screen readers and indexing. Alt text gives context to assistive technology and to search engines alike. Clear link structure improves keyboard navigation and crawling at the same time. Video transcripts create indexable text where otherwise there is none.

If you are working on organic visibility, look at our approach to SEO and to structured data. Accessibility fits naturally into the same work and rarely needs a separate budget when it is planned early.

When to build it in and how to budget

The cost difference between "accessible from the start" and "accessible afterwards" is dramatic. When the criteria enter the design system, colour choices, font sizes and focus states are decided once and then reused. When the site is already live and needs rework, the changes touch components scattered across the whole codebase.

For a new project, AA level accessibility typically adds 10 to 15 percent to design and front end effort. For retrofitting an existing site the range is much wider and depends entirely on the state of the code. That is why every estimate starts with an audit rather than a formula. If you are planning a new website or an online store, ask for accessibility to be written into the brief from day one.

WEBPROGRESS quotes each project individually, because the workload depends on the number of templates, the complexity of the forms and the amount of video content. Send us your address through the contact form and you will get an assessment within 24 hours.

Frequently asked questions

Is accessibility mandatory for a private company

It depends on the activity. Public bodies have been bound for years. The European Accessibility Act extends the scope to private services such as e-commerce, banking, transport and electronic communications. Micro enterprises below a certain threshold have relief, but merchants selling online to consumers should check their specific position. Even outside scope, an accessible site is a competitive advantage in corporate procurement.

Is an accessibility plugin enough

No. Overlay widgets that add a floating button with contrast and font size controls patch the surface, not the structure. If the button in the code is not a button, no plugin will announce it correctly to a screen reader. Such tools can be a useful addition, but they do not replace correct HTML and do not deliver conformance.

How is contrast measured

The ratio is calculated between the relative luminance of the text and the background. For normal text WCAG AA requires at least 4.5:1; for large text above 18 point, or bold above 14 point, the threshold drops to 3:1. Chrome DevTools has a built in check, and there are free online calculators where you enter the two HEX values.

Does accessibility affect Google rankings

There is no direct ranking factor called accessibility. The influence is indirect but real: better semantics, clearer structure, more text around multimedia, lower bounce rates. Those signals show up in results, especially on competitive queries.

How long does it take to bring an existing site into line

For a small brochure site with a handful of templates the work usually fits into one or two weeks. For an online store with a catalogue, filters, cart and customer account, expect several weeks staged in phases, with the critical purchase paths handled first. The exact schedule comes after the audit.

Next step

Accessibility is not a one off project but part of how a site is maintained. Every new template, every new form and every new video falls under the same rules. The sensible move is an audit now, a prioritised fix plan, and the criteria embedded into the design system so the problem does not return.

If you want to know where your site stands against WCAG AA, write to us through contact. We run the audit, hand you a concrete priority list and quote the implementation individually, with an answer within 24 hours. If your site is still at the planning stage, see also our services for web development, hosting and automation.

Ready to get started?

Contact us for a free consultation and a quote within 24 hours.