WCAG Requirements: The Latest Version, Levels and What Applies to You
The Web Content Accessibility Guidelines, usually shortened to WCAG, are the international standard for making websites usable by disabled people, including people who are blind, have low vision, cannot use a mouse, are deaf or have cognitive difficulties. The latest version is WCAG 2.2, and almost every law, contract and procurement rule that mentions accessibility points to it or to the older 2.1. The problem for most small businesses is that the full document is long and abstract. This guide explains what WCAG is and what it applies to, what changed in 2.2, what the three levels mean, which criteria a typical business site actually has to meet, and how to check and fix them in a sensible order.
- What WCAG is and what it applies to
- The latest version of WCAG and what 2.2 changed
- Levels A, AA and AAA explained
- Which WCAG requirements apply to a small business site
- WCAG at a glance: the criteria that matter most
- How to check your site against WCAG
- The fix, step by step
- Edge cases worth knowing
- Keeping your site meeting WCAG
- Questions and answers
What WCAG is and what it applies to
WCAG is published by the World Wide Web Consortium (W3C), the body that also maintains the HTML and CSS standards. It is a set of testable statements called success criteria. Each one describes an outcome, such as text having enough contrast or every function being usable from a keyboard, rather than a specific technology. That is why the same guidelines cover a WordPress brochure site, a Shopify shop and a React web app.
The criteria are grouped under four principles, often remembered as POUR:
- Perceivable. People can take in the content, whichever sense they use: text alternatives for images, captions for video, readable contrast, content that still works when zoomed.
- Operable. People can use the controls: keyboard access, visible focus, enough time, no flashing content, targets large enough to press.
- Understandable. Content and behaviour are predictable: the page language is set, forms have labels, errors are explained.
- Robust. The code exposes names, roles and states that assistive technology such as screen readers can read.
WCAG applies to web content: pages, the documents you link to such as PDFs, forms, checkout flows, embedded video and anything a visitor interacts with. It also covers third-party parts of your page, such as a booking widget or a cookie banner, because the visitor experiences them as part of your site. The W3C publishes guidance on applying WCAG to mobile apps and other software, but the standard itself is written for web content.
The latest version of WCAG and what 2.2 changed
WCAG 2.2 became a W3C Recommendation in October 2023 and is the current version. Each 2.x version is backwards compatible: everything required by 2.0 (2008) and 2.1 (2018) is still in 2.2, with one exception. So if you meet 2.2, you also meet the earlier versions for the same level.
WCAG 2.2 added nine success criteria and removed one:
| Criterion | Level | What it asks for |
|---|---|---|
| 2.4.11 Focus Not Obscured (Minimum) | AA | The focused element is not completely hidden by sticky headers, chat buttons or cookie banners |
| 2.4.12 Focus Not Obscured (Enhanced) | AAA | No part of the focused element is hidden |
| 2.4.13 Focus Appearance | AAA | The focus indicator is large and contrasting enough |
| 2.5.7 Dragging Movements | AA | Anything done by dragging, such as a slider or a reorderable list, can also be done with single clicks or taps |
| 2.5.8 Target Size (Minimum) | AA | Click and tap targets are at least 24 by 24 CSS pixels, or have enough space around them |
| 3.2.6 Consistent Help | A | Help options such as a contact link or phone number appear in the same place on each page where they are offered |
| 3.3.7 Redundant Entry | A | People are not asked to type the same information twice in one process, such as a delivery address in checkout |
| 3.3.8 Accessible Authentication (Minimum) | AA | Logging in does not depend on a memory or puzzle test unless there is an alternative; pasting passwords and password managers must work |
| 3.3.9 Accessible Authentication (Enhanced) | AAA | As above, without the exceptions for object or image recognition |
The removed criterion is 4.1.1 Parsing, which required valid, well-formed markup. Modern browsers and assistive technology handle markup errors consistently, so the W3C treats it as obsolete. Valid HTML is still good practice, and the problems it caused, such as duplicate IDs breaking label links, are caught by other criteria.
WCAG 2.2 has 86 success criteria in total: 31 at level A, 24 at level AA and 31 at level AAA. WCAG 3 is in development as a working draft. It is not a standard yet and it is not what laws or contracts refer to, so do not plan your work around it.
Levels A, AA and AAA explained
Every success criterion has a level. The levels are cumulative: to conform at AA you must meet every A and every AA criterion on the page.
| Level | Count in 2.2 | What it means in practice |
|---|---|---|
| A | 31 | The minimum. Failing these blocks some people completely, for example a form that cannot be submitted without a mouse |
| AA | 24 more (55 in all) | The level laws, public sector rules and most contracts ask for. Covers contrast, resizing, focus visibility, consistent navigation and error suggestions |
| AAA | 31 more | The highest level. The W3C itself says it is not recommended as a general policy for whole sites, because some content cannot meet every AAA criterion |
Conformance is claimed for whole pages, and for complete processes. If step three of a five-step checkout fails, the whole checkout does not conform, even if the other steps are perfect. That is why the order you fix things in matters: the paths that make you money, such as contact forms, booking and checkout, come first.
Partial work is still worth doing. Each fixed barrier helps real visitors today, and showing steady progress is far better than waiting for a perfect rebuild.
Which WCAG requirements apply to a small business site
The target for almost every business is WCAG 2.2 level AA. Some laws and contracts still name 2.1 AA, but meeting 2.2 AA covers that too. Whether the law requires it depends on where you trade:
- United Kingdom. Public sector websites must meet WCAG 2.2 AA under the 2018 accessibility regulations. Private businesses are covered by the Equality Act 2010, which requires reasonable adjustments for disabled customers; it does not name WCAG, but WCAG AA is the usual benchmark for showing you have made them.
- European Union. The European Accessibility Act has applied since 28 June 2025 to many consumer services, including online shops and booking services. The harmonised standard behind it, EN 301 549, uses WCAG AA. Microenterprises with fewer than 10 staff and turnover of no more than 2 million euros are exempt for services, though customers still benefit if you follow it.
- United States. The ADA is widely applied to business websites through court cases, and WCAG AA is the benchmark used in most settlements. Rules for state and local government websites name WCAG 2.1 AA.
Laws change and this is not legal advice, so check the rules for your country and sector. The practical answer is the same everywhere: aim for 2.2 AA on every page, starting with the pages people use to contact or pay you.
WCAG at a glance: the criteria that matter most
You do not need to memorise 55 criteria. On real small business sites, a short list causes most of the failures. If you check these well, you have covered the bulk of the work.
| Area | Criteria | What passing looks like |
|---|---|---|
| Images | 1.1.1 Non-text Content (A) | Informative images have meaningful alt text; decorative ones have alt="". See fixing alt text |
| Structure | 1.3.1 Info and Relationships (A) | Real headings, lists, tables and labels in the code, not just bold text that looks like a heading |
| Contrast | 1.4.3 Contrast (Minimum) (AA), 1.4.11 Non-text Contrast (AA) | Body text at least 4.5:1 against its background, large text 3:1, input borders and icons 3:1. See fixing colour contrast |
| Zoom and reflow | 1.4.4 Resize Text (AA), 1.4.10 Reflow (AA) | Page works at 200% zoom and at 320 CSS pixels wide without sideways scrolling |
| Keyboard | 2.1.1 Keyboard (A), 2.1.2 No Keyboard Trap (A) | Every menu, button, form and modal works with Tab, Shift+Tab, Enter, Space and Escape. See keyboard navigation |
| Focus | 2.4.7 Focus Visible (AA), 2.4.11 (AA) | A clear outline shows where you are, and sticky bars never cover it. See focus indicators |
| Page basics | 2.4.2 Page Titled (A), 3.1.1 Language of Page (A) | Unique <title> on each page and lang="en-GB" or similar on the html element |
| Links | 2.4.4 Link Purpose (A) | Link text makes sense, not a page of identical read more links |
| Targets | 2.5.8 Target Size (Minimum) (AA) | Icons, pagination and close buttons at least 24 by 24 CSS pixels |
| Forms | 3.3.1, 3.3.2 (A), 3.3.3 (AA) | Every field has a visible label, errors are described in text with a suggestion. See form labels and accessible error messages |
| Code | 4.1.2 Name, Role, Value (A) | Custom controls expose a name and role; icon buttons have an accessible name |
| Media | 1.2.2 Captions (A), 2.2.2 Pause, Stop, Hide (A) | Videos with speech have captions; carousels and moving content can be paused |
How to check your site against WCAG
Combine an automated scan with a short manual test. Automated tools are fast and find the mechanical issues: missing alt attributes, empty buttons, low contrast, missing labels and missing page language. Manual testing finds whether the page actually works.
Automated pass
Run the accessibility audit on your main templates: home, a service or product page, a blog post, the contact form and the checkout or booking flow. You can also run Lighthouse from the command line to keep a record:
npx lighthouse https://www.example.com/contact \
--only-categories=accessibility \
--output=html --output-path=./contact-a11y.html
A Lighthouse score of 100 means none of its automated checks failed. It does not mean the page conforms to WCAG.
Manual pass, about 15 minutes per template
- Put the mouse aside and Tab through the whole page. Can you see focus at every step, reach everything, open and close the menu, and submit the form?
- Zoom the browser to 200% and then to 400%. Does the text reflow without content being cut off?
- Turn on a screen reader (NVDA on Windows, VoiceOver on Mac with Cmd+F5) and list the headings and links. Do they make sense out of context?
- Submit the form empty. Are the errors described in words next to each field?
In Chrome DevTools, the Accessibility pane in the Elements panel shows the computed name and role of any element, which is the quickest way to see what a screen reader will announce. For a step-by-step routine, see how to check WCAG compliance.
The fix, step by step
Step 1
Set your target as WCAG 2.2 AA
Write down the standard you are working to: WCAG 2.2 level AA. It covers 2.1 AA and 2.0 AA as well, so you only need one target. Check whether any contract, tender or local law names a version, and note it alongside. Then list the pages that matter most: home, main service or product pages, contact and booking forms, checkout and account login. This list sets the order of all the work that follows, so keep it short and specific.
Step 2
Run an automated audit on each template
Run the accessibility audit or Lighthouse on one page from each template rather than every URL, because the same template repeats the same faults. Export the results and group them by criterion: missing alt, low contrast, empty buttons, unlabelled fields, missing lang. Fixing a template clears that fault on every page built from it. Record the number of issues per template so you can compare after each round of fixes and show real progress.
Step 3
Fix the level A blockers first
Start with failures that stop people completely: images with no alt attribute, form fields with no label, buttons and links with no accessible name, keyboard traps in menus or modals, and video with no captions. These are level A and usually live in the theme or a component. Fix them at the source, then rerun the audit to confirm the count for each fault has dropped to zero on every template you tested.
Step 4
Fix contrast, zoom and focus
Raise body text to at least 4.5:1 contrast and large text, input borders and icons to 3:1, using your brand palette's darker shades. Zoom to 200% and 400% and fix anything that overflows or is cut off. Make sure every link, button and field shows a clear focus outline, and that sticky headers or chat buttons never cover the focused element. Tab through the page afterwards to confirm the outline is always visible.
Step 5
Apply the new WCAG 2.2 criteria
Check the four new AA criteria and two new A criteria. Measure small icons and close buttons and make them at least 24 by 24 CSS pixels. Give any drag interaction a click alternative. Put help links in the same place on each page. Remove repeated questions in checkout, for example with a same as delivery address option. Make sure the login form allows pasting and password managers, with no puzzle-only test.
Step 6
Test with a keyboard and a screen reader
Unplug the mouse and complete each key task with Tab, Shift+Tab, Enter, Space and Escape: open the menu, use a form, finish checkout. Then repeat with NVDA on Windows or VoiceOver on Mac and listen to the headings, links and form labels. Note anywhere the announcement is missing, vague or wrong. This step finds problems no scanner can, such as a confusing reading order or a modal that silently loses focus.
Step 7
Fix forms and error messages
Make sure every input has a visible label tied to it with for and id, required fields are marked in text, and errors appear as words next to the field, not only a red border. Add a suggestion where you can, such as the expected date format. Submit each form empty and with wrong values, and confirm a screen reader announces each error and that focus moves somewhere sensible after a failed submit.
Step 8
Publish a statement and keep testing
Write a short accessibility statement that names WCAG 2.2 AA as your target, lists known issues with planned dates and gives a way to ask for help or another format. Link it from the footer. Add the automated audit to your routine after theme updates and new plugins, and repeat the keyboard test whenever a form or menu changes. Compare the issue counts with your first audit every few months.
Edge cases worth knowing
- Third-party widgets. A booking tool, chat bubble or payment iframe that fails WCAG makes your page fail. Ask suppliers for their conformance report, often called a VPAT or accessibility conformance report, and test the widget with a keyboard yourself.
- PDFs. Menus, price lists and brochures in PDF are covered too. Where you can, publish the same information as an HTML page and keep the PDF as an extra.
- Older content. Some laws give exemptions for archived content that is no longer updated. Anything still used, such as current prices or a policy page, should be fixed.
- Cookie banners. The banner is usually the first thing a keyboard or screen reader user meets. If it traps focus, has low contrast buttons or hides the focus outline, every page fails. Test it first.
- Accessibility statements. Public sector sites in the UK and EU must publish one. For businesses it is optional but useful: say which standard you aim for, what you know does not work yet and how people can contact you for help.
Keeping your site meeting WCAG
Accessibility drifts as soon as someone adds a new section, plugin or campaign page. A few habits keep it in place:
- Write accessibility into the theme or component library: labelled form fields, a visible focus style and sensible heading levels, so editors cannot easily break them.
- Give editors a one-page checklist covering alt text, link text, headings and captions.
- Re-run the automated audit after every theme update and every new plugin or app, and do the keyboard test on any new form.
- Keep a simple log of known issues and dates fixed. It shows good faith if a customer complains, and it keeps the work moving.
The accessibility guide covers the wider topic, and the accessibility fixes list has a guide for each common failure.
1. What is the latest version of WCAG?
The latest version is WCAG 2.2, which the W3C published as a Recommendation in October 2023. It added nine new success criteria, mostly about focus visibility, target size, dragging, consistent help and logins, and removed the old Parsing criterion. WCAG 3 exists only as a working draft and is not used by laws or contracts. Because 2.2 is backwards compatible, a site that meets WCAG 2.2 AA also meets 2.1 AA and 2.0 AA, so 2.2 AA is the sensible target for any new work.
2. What does WCAG apply to?
WCAG applies to web content, which means your pages and everything visitors use on them: text, images, video, forms, checkout and booking flows, downloadable documents such as PDFs, and third-party parts like chat widgets, maps and cookie banners. If a visitor meets it while using your site, it counts. The standard is written for the web, though its ideas are widely used for mobile apps and software too. Conformance is judged page by page and for complete processes, so one broken step in a checkout means the whole checkout fails.
3. What do you understand by WCAG levels A, AA and AAA?
The levels show how essential a criterion is, and they build on each other. Level A is the minimum, covering barriers that block people completely, such as content that cannot be used with a keyboard. Level AA adds the criteria most laws and contracts require, such as text contrast, resizing and visible focus. Level AAA is the strictest and is not expected for whole sites, because some content cannot meet it. To claim AA, a page must pass every A and every AA criterion.
4. Is WCAG a legal requirement for small businesses?
It depends on your country and sector, but WCAG AA is the benchmark used almost everywhere accessibility law is applied. In the UK, private businesses must make reasonable adjustments under the Equality Act 2010, and WCAG AA is the usual way to show that. In the EU, the European Accessibility Act covers many online shops and booking services, with an exemption for the smallest service businesses. In the US, ADA claims against websites are common. Check your own situation, as this is general information rather than legal advice.
5. How widely is WCAG 2.2 supported?
WCAG 2.2 is fully published and already adopted by many organisations, including UK public sector monitoring, which tests against 2.2 AA. Some laws and standards, such as EN 301 549 in the EU and US rules for public bodies, still name WCAG 2.1, but meeting 2.2 covers those too. There is no browser support question, because WCAG describes outcomes rather than new code features. Testing tools have added checks for the new criteria, though target size and focus obscuring still need some manual checking.
6. How many WCAG requirements are there?
WCAG 2.2 contains 86 success criteria: 31 at level A, 24 at level AA and 31 at level AAA. A site aiming for AA has to meet 55 of them. That sounds like a lot, but many will not apply to a typical business site, for example the criteria about live audio or sign language only matter if you publish that kind of content. In practice a dozen criteria about images, contrast, keyboard use, focus, forms and headings cause most failures on small business websites.
7. Can an automated tool tell me if my site meets WCAG?
No, an automated tool can only tell you about the problems it is able to detect, which is a minority of WCAG criteria. Scanners reliably find missing alt attributes, empty buttons, unlabelled fields, low contrast and missing language settings. They cannot judge whether alt text is meaningful, whether the reading order makes sense, whether a keyboard user can complete checkout or whether an error message is helpful. Use automated audits to find and track mechanical issues, then add keyboard and screen reader testing for the rest.
The accessibility audit tests your templates for the mechanical WCAG failures, such as missing alt text, low contrast, unlabelled fields and empty buttons, and groups them by criterion so you can fix the biggest blockers first.
Open Accessibility Fixes โ