WCAG requirements are the Web Content Accessibility Guidelines published by the W3C, used to judge whether people with disabilities can use a website. EU law that applies to websites relies on level AA: in WCAG 2.1 it is made up of 50 criteria – 30 at level A and 20 at level AA. Below we explain how WCAG relates to the European standard EN 301 549 and give a checklist of the key criteria in plain English.
What WCAG and EN 301 549 are
WCAG (Web Content Accessibility Guidelines) are international guidelines developed by the W3C, the organisation that sets standards for the World Wide Web. WCAG 2.1 was published in June 2018 and WCAG 2.2 in October 2023.
EN 301 549 is the European standard for the accessibility of information and communication technology. Version V3.2.1 applies the WCAG 2.1 level A and AA criteria to websites (clause 9). Other clauses cover documents, software, documentation and support services.
Public sector websites in the EU have had to meet this standard since 2019. Online shops and other services covered by the European Accessibility Act are, in practice, assessed against the same criteria.
The four WCAG principles
All WCAG criteria are grouped under four principles:
| Principle | What it means | Example |
|---|---|---|
| Perceivable | Information can be received through more than one sense | An image has a text description; a video has captions |
| Operable | The website can be used in different ways | Every function works with a keyboard, not just a mouse |
| Understandable | Content and behaviour are clear | Form errors are explained in words; the menu is in the same place on every page |
| Robust | The code works with different browsers and assistive technologies | Button names and states are set in the code |
Conformance levels A, AA and AAA
- A – the minimum level. If these criteria are not met, some people cannot use the website at all.
- AA – includes all the level A criteria plus 20 more. This is the level required by EN 301 549, the standard relied on when applying EU accessibility law.
- AAA – the highest level (another 28 criteria). The W3C does not recommend requiring it for an entire website, because some content cannot meet every AAA criterion.
Key WCAG 2.1 AA criteria: a checklist
The table lists the key criteria worth checking first. Names are as in WCAG 2.1, explanations are ours.
| No. | Criterion | Level | What it means in practice |
|---|---|---|---|
| 1.1.1 | Non-text Content | A | Images, icons and charts have alt text; decorative ones have empty alt text |
| 1.2.2 | Captions (Prerecorded) | A | Videos with sound have captions |
| 1.2.5 | Audio Description (Prerecorded) | AA | Important visual information that cannot be heard is conveyed by audio description |
| 1.3.1 | Info and Relationships | A | Headings, lists, tables and form labels are marked up in the code, not just styled |
| 1.3.4 | Orientation | AA | The website works with the screen in portrait or landscape |
| 1.4.1 | Use of Color | A | Information is not conveyed by colour alone |
| 1.4.3 | Contrast (Minimum) | AA | Text contrast against the background is at least 4.5:1, or 3:1 for large text |
| 1.4.4 | Resize Text | AA | Text can be enlarged to 200% without losing content or functions |
| 1.4.10 | Reflow | AA | On a screen 320 CSS pixels wide, there is no need to scroll sideways |
| 1.4.11 | Non-text Contrast | AA | Buttons, field borders and icons have a contrast ratio of at least 3:1 |
| 2.1.1 | Keyboard | A | Every function works with a keyboard |
| 2.2.2 | Pause, Stop, Hide | A | Content that moves automatically, such as a carousel, can be stopped |
| 2.3.1 | Three Flashes or Below Threshold | A | Nothing flashes more than 3 times per second |
| 2.4.1 | Bypass Blocks | A | Users can skip the repeated menu and go straight to the content |
| 2.4.2 | Page Titled | A | Every page has a clear title |
| 2.4.4 | Link Purpose (In Context) | A | The link text or its context makes clear where the link goes |
| 2.4.6 | Headings and Labels | AA | Headings and field labels describe the content |
| 2.4.7 | Focus Visible | AA | The element in focus is clearly visible |
| 3.1.1 | Language of Page | A | The page language is set in the code |
| 3.2.3 | Consistent Navigation | AA | The menu is in the same place and order on every page |
| 3.3.1 | Error Identification | A | Form errors are described in text |
| 3.3.2 | Labels or Instructions | A | Every form field has a label |
| 4.1.2 | Name, Role, Value | A | Buttons, menus and other controls have a name and state set in the code |
| 4.1.3 | Status Messages | AA | A message such as ‘Added to basket’ is read out by a screen reader |
The table helps with a quick self-check, but it does not cover all 50 criteria. How to test a website with a keyboard and a screen reader is explained step by step in How to make a website accessible.
How WCAG 2.2 differs from 2.1
WCAG 2.2 adds six new criteria at levels A and AA:
- 2.4.11 Focus Not Obscured (Minimum) (AA) – the element in focus is not completely hidden by a sticky header or a cookie banner;
- 2.5.7 Dragging Movements (AA) – anything done by dragging can also be done with a simple click or tap;
- 2.5.8 Target Size (Minimum) (AA) – clickable targets are at least 24 × 24 CSS pixels or spaced far enough apart;
- 3.2.6 Consistent Help (A) – contact details or a help link are in the same place on every page;
- 3.3.7 Redundant Entry (A) – users do not have to enter the same information twice;
- 3.3.8 Accessible Authentication (Minimum) (AA) – logging in does not require solving puzzles or remembering codes, and passwords can be pasted.
Criterion 4.1.1 Parsing has been removed in WCAG 2.2. A website that meets WCAG 2.2 AA also meets WCAG 2.1 AA, so a new website is worth aiming at the newer version from the start. WCAG 2.2 is not a requirement, though: EN 301 549 is based on WCAG 2.1.
Not just pages: documents, video and phones
The EN 301 549 requirements apply to more than web pages. PDFs and other documents published on the website need headings, tags and image descriptions. Videos need captions and, where important information is shown only on screen, a description of it. The website also has to work on a phone: with the screen rotated, with text enlarged and with a screen reader.
How to use this checklist
If you are building a new website or online shop, put the WCAG requirements in the brief – meeting them from the start is easier than fixing a live website. If your website is already live, start with the critical issues: keyboard navigation, forms and contrast.
We test websites against WCAG 2.1 AA and fix the issues found as part of our website accessibility service. If you are planning a new website, let’s discuss accessibility before website development begins.
Published .
Sources
- W3C, Web Content Accessibility Guidelines (WCAG) 2.1 (external website)
- W3C, Web Content Accessibility Guidelines (WCAG) 2.2 (external website)
- W3C WAI, What's New in WCAG 2.2 (external website)
- ETSI EN 301 549 V3.2.1 – Accessibility requirements for ICT products and services (external website)
- Directive (EU) 2016/2102 on the accessibility of the websites and mobile applications of public sector bodies, EUR-Lex (external website)
- Directive (EU) 2019/882 (European Accessibility Act), EUR-Lex (external website)