Technique · Web Content Accessibility Guidelines · W3C
WCAG — what they are and how much of them you need
WCAG (Web Content Accessibility Guidelines) is the W3C standard describing how web content should be accessible. Version 2.1 (2018) is today the basis of law in the Union; version 2.2 (October 2023) adds nine criteria and is a sensible target for new sites. The act does not name WCAG — it reaches them through the EN 301 549 standard. This page explains the structure, the levels and the criteria that in practice decide an audit's result.
Four principles — the same as in the act
1. Perceivable
Content can be received by at least one sense: text alternatives, captions, structure independent of appearance, contrast, zoom.
2. Operable
The interface can be operated: keyboard, time, no flashing, navigation, visible focus, touch targets.
3. Understandable
Content and operation are understandable: language, predictability, help with errors.
4. Robust — "compatible" in the act
The code works with assistive technologies: correct names, roles, states.
Under the principles are 13 guidelines, under them 78 (2.1) or 87 (2.2) success criteria, each at level A, AA or AAA. A criterion is testable: the page either meets it or not.
Levels A, AA, AAA
| Level | What it means | Criteria (2.1 / 2.2) | Who requires it |
|---|---|---|---|
| A | the minimum — without it some users cannot use the site at all | 30 / 32 | always together with AA |
| AA | the legal standard — removes the significant barriers for most groups | 20 / 24 | the 2019 act (public sector), EN 301 549, practice under the new act, ADA/Section 508 in the US, BFSG in Germany |
| AAA | the highest — 7:1 contrast, sign language, extended audio description, no time limits, reading level | 28 / 31 | nobody in full; selected criteria are worth meeting (e.g. 2.4.8 location, 1.4.6 contrast) |
"AA conformance" means meeting all A and AA criteria on every page of a process — and if a process (e.g. a purchase) consists of several pages, all of them must conform, otherwise none does (the "complete processes" conformance requirement). There is no "90 % conformance". There is conformance, or a list of non‑conformities.
How WCAG enters the act: EN 301 549
EN 301 549 "Accessibility requirements for ICT products and services" is a European standard by ETSI/CEN/CENELEC. Its chapter 9 ("Web") transcribes the WCAG 2.1 level A and AA criteria as requirements 9.1.1.1–9.4.1.3; chapter 10 applies them to documents, chapter 11 to software and apps, chapter 12 to documentation and support. Version V3.2.1 (2021‑03) is cited in the Official Journal of the EU as a harmonised standard under Directive 2016/2102 (public sector). Under the EAA the Commission mandated an update (mandate M/587); ETSI has published the new version, but its citation in the Official Journal under the EAA has not yet happened. The consequence: the presumption of conformity in art. 20(1) of the Polish act does not formally operate yet, but the only practical measure an authority will use is EN 301 549, i.e. WCAG 2.1 AA. Whoever meets 2.2 AA meets 2.1 AA (2.2 is a superset, except for the removed 4.1.1).
The standard itself — who publishes it, what clauses 4–13 contain, why clause 9 is simply WCAG, and how to cite it in your documentation — has a page of its own: EN 301 549.
What is new in WCAG 2.2
| Criterion | Level | In one sentence |
|---|---|---|
| 2.4.11 Focus Not Obscured (Minimum) | AA | The focused element must not be completely hidden under a sticky header or cookie banner. |
| 2.4.12 Focus Not Obscured (Enhanced) | AAA | …nor partially. |
| 2.4.13 Focus Appearance | AAA | The focus indicator has at least a 2 px outline and 3:1 contrast. |
| 2.5.7 Dragging Movements | AA | Everything done by dragging (a slider, sorting) can also be done with clicks. |
| 2.5.8 Target Size (Minimum) | AA | A touch target is at least 24×24 CSS px or has adequate spacing from its neighbours. |
| 3.2.6 Consistent Help | A | Contact, chat, FAQ — in the same place on every page. |
| 3.3.7 Redundant Entry | A | Do not make people enter the same data twice in one process (delivery address = invoice address: one click). |
| 3.3.8 Accessible Authentication (Minimum) | AA | Login without cognitive tests: no retyping codes from an image, with the ability to paste a password and use a password manager. |
| 3.3.9 Accessible Authentication (Enhanced) | AAA | …with no exceptions (not even object recognition). |
| 4.1.1 Parsing | — | removed — browsers repair syntax errors themselves; duplicate ids still break 4.1.2 and 1.3.1. |
Three of them (2.5.8, 3.3.7, 3.3.8) concern shops and login directly — which is why for e‑commerce 2.2 is a better target than 2.1, even if the law today points to 2.1.
The criteria that fail most often
Audits and our checker show that a dozen or so criteria account for most non‑conformities. Each has a rule in the report.
1.1.1 Non‑text Content (A) — images without alternatives
Every image that carries information has an alt describing that information; a decorative image has alt=""; an icon button has a name. Most common errors: no attribute, the file name in the alt, "image", "photo", alt on decorations, CAPTCHA without an alternative. Checker: rules img-alt, img-alt-filename.
1.3.1 Info and Relationships (A) — structure that is only visual
Headings as bold text, tables as divs, lists as paragraphs with dashes, field labels not linked to the field. A screen reader sees flat text. Checker: heading-order, form-label, table-headers, dup-id.
1.4.3 Contrast (Minimum) (AA) — 4.5:1
Normal text 4.5:1, large text (≥ 24 px or ≥ 19 px bold) 3:1. Light grey captions, white text on a light photo, placeholders, links distinguished by colour alone. The checker measures actual contrast after compositing the background in the browser: contrast-text.
1.4.4 Resize Text (AA) and 1.4.10 Reflow (AA)
The site works at 200 % zoom and at 320 px width without scrolling in two directions. Data tables are an exception if they scroll in their own container. The checker renders the page at 390 and 320 px: reflow-320, mobile-overflow, doc-zoom (no user-scalable=no).
1.4.11 Non‑text Contrast (AA) — 3:1
Field borders, icons, state indicators, charts. A light grey form field border on white is a typical 1.5:1.
2.1.1 Keyboard (A) and 2.1.2 No Keyboard Trap (A)
Everything can be operated with the keyboard; nothing is impossible to "get out of". Hover‑only menus, div onclick, modals that do not close on Esc, embedded players. Checker: aria-presentation-interactive, focusable-hidden, tabindex-positive.
2.2.2 Pause, Stop, Hide (A) and 2.3.1 Three Flashes (A)
Carousels, tickers, animated backgrounds without a pause button; nothing flashes more than 3 times a second. Checker: media-autoplay, marquee-blink, motion-reduced (no support for prefers-reduced-motion).
2.4.1 Bypass Blocks (A), 2.4.2 Page Titled (A), 2.4.6 Headings and Labels (AA)
A "skip to content" link, a unique title, headings that describe sections, one h1. Checker: skip-link, landmark-main, doc-title, heading-h1, heading-empty.
2.4.4 Link Purpose (A)
"Read more" ×12, "here", "click". A link's name should say where it leads — in the sentence's context or on its own. Checker: link-name, link-generic.
2.4.7 Focus Visible (AA)
outline: none without a replacement. One line of CSS that switches the site off for a keyboard user. The checker reads the stylesheets: focus-outline-suppressed.
2.5.8 Target Size (AA, 2.2)
Buttons and links under 24×24 px without spacing: social icons, pagination, ± in the basket. The checker measures every target: target-size.
3.1.1 Language of Page (A)
<html lang> — without it a synthesiser reads Polish in English. Checker: doc-lang.
3.3.1 Error Identification (A), 3.3.2 Labels or Instructions (A)
An error marked only by a red border; a placeholder instead of a label; required fields not marked. Checker: form-label, form-placeholder-only.
4.1.2 Name, Role, Value (A)
Custom components (select, tabs, accordion, modal) without a role and state; buttons without a name; ARIA referring to non‑existent ids. Checker: button-name, aria-role-invalid, aria-ref-broken, aria-hidden-focusable. On ARIA.
1.2.2 Captions (A) and 1.2.5 Audio Description (AA)
Video with sound has captions (not uncorrected YouTube auto‑captions); video with an essential visual layer has audio description or a text alternative. Checker: video-captions.
How to read an audit result
A good report gives, for every non‑conformity: the criterion (e.g. 1.4.3), the level, the location (a selector or screenshot), the scale (how many occurrences) and how to fix it. Non‑conformities do not add up linearly: one "Pay" button without a name is worse than a hundred decorative images with an empty alt. Our report orders them by weight (critical → serious → moderate → minor) and separately shows what works and what was not checked — because "not checked" is not "met". An automated tool detects 30–50 % of the criteria; the rest (the sense of alternatives, the logic of headings, the clarity of messages, screen‑reader operation) is checked by a person. The whole‑site check with fix instructions is what we give instead of a person at the start; a manual audit — at the end.
Tools for your own tests
- Keyboard: put the mouse away and go through a purchase with Tab. The cheapest test in the world.
- Screen reader: NVDA (Windows, free), VoiceOver (macOS/iOS, built in), TalkBack (Android).
- Zoom: Ctrl + up to 200 %, then narrow the window to 320 px.
- Contrast: the browser's developer tools show the ratio next to every text colour.
- Dark mode and high contrast: system settings; check whether the site responds.
- Automated tools: our checker in a real browser, plus axe, Lighthouse and WAVE for a second opinion.