Web Development
WCAG 2.2 AA Checklist in Plain English, Plus Ecommerce Product Pages
WCAG, the Web Content Accessibility Guidelines from the W3C, is the standard used to judge whether a website is accessible to people with disabilities. Version 2.2 became a W3C Recommendation in October 2023. This checklist lists every Level A and AA criterion in plain English, explains what changed in 2.2, and adds a specific checklist for e-commerce product pages.
Related service: Web development
By Murtaza · October 30, 2026 · 7 min read · Updated October 30, 2026
WCAG 2.2 Level A and AA success criteria in plain English (source: W3C)
| Criterion | Level | Plain-English check |
|---|---|---|
| 1.1.1 Non-text Content | A | Images, icons and controls have text alternatives; decorative images are hidden from screen readers |
| 1.2.1 Audio-only and Video-only | A | Audio has a transcript; silent video has a text or audio description |
| 1.2.2 Captions (Prerecorded) | A | Videos with sound have accurate captions |
| 1.2.3 Audio Description or Media Alternative | A | Important visual content in video is described |
| 1.2.4 Captions (Live) | AA | Live video streams have captions |
| 1.2.5 Audio Description (Prerecorded) | AA | Videos have audio description of important visuals |
| 1.3.1 Info and Relationships | A | Headings, lists, tables and form labels are marked up, not just styled |
| 1.3.2 Meaningful Sequence | A | Reading order in the code matches the visual order |
| 1.3.3 Sensory Characteristics | A | Instructions don’t rely only on shape, colour, size or position |
| 1.3.4 Orientation | AA | Works in portrait and landscape |
| 1.3.5 Identify Input Purpose | AA | Name, email, address and card fields use correct autocomplete values |
| 1.4.1 Use of Color | A | Colour is not the only way to show information, such as errors or sale prices |
| 1.4.2 Audio Control | A | Audio that autoplays over 3 seconds can be paused or muted |
| 1.4.3 Contrast (Minimum) | AA | Text contrast at least 4.5:1, large text 3:1 |
| 1.4.4 Resize Text | AA | Text can be zoomed to 200% without loss of content |
| 1.4.5 Images of Text | AA | Real text is used instead of pictures of text |
| 1.4.10 Reflow | AA | Content fits a 320 px wide screen without horizontal scrolling |
| 1.4.11 Non-text Contrast | AA | Buttons, inputs, icons and focus indicators have 3:1 contrast |
| 1.4.12 Text Spacing | AA | Layout survives increased line, letter and word spacing |
| 1.4.13 Content on Hover or Focus | AA | Tooltips and popovers can be dismissed, hovered and stay visible |
| 2.1.1 Keyboard | A | Everything works with a keyboard alone |
| 2.1.2 No Keyboard Trap | A | Keyboard focus never gets stuck, including in modals and widgets |
| 2.1.4 Character Key Shortcuts | A | Single-key shortcuts can be turned off or remapped |
| 2.2.1 Timing Adjustable | A | Time limits can be extended, such as cart or session timeouts |
| 2.2.2 Pause, Stop, Hide | A | Carousels and moving content can be paused |
| 2.3.1 Three Flashes or Below | A | Nothing flashes more than three times a second |
| 2.4.1 Bypass Blocks | A | A “skip to content” link or landmarks let users skip navigation |
| 2.4.2 Page Titled | A | Every page has a descriptive title |
| 2.4.3 Focus Order | A | Tab order follows a logical sequence |
| 2.4.4 Link Purpose (In Context) | A | Link text makes sense, not “click here” |
| 2.4.5 Multiple Ways | AA | Pages can be found by navigation, search or a sitemap |
| 2.4.6 Headings and Labels | AA | Headings and labels describe their content |
| 2.4.7 Focus Visible | AA | A visible focus indicator shows where the keyboard is |
| 2.4.11 Focus Not Obscured (Minimum) | AA | New in 2.2: focused items are not fully hidden by sticky headers, cookie banners or chat widgets |
| 2.5.1 Pointer Gestures | A | Multi-finger or path gestures have a single-tap alternative |
| 2.5.2 Pointer Cancellation | A | Actions fire on release, so a mis-tap can be cancelled |
| 2.5.3 Label in Name | A | The accessible name contains the visible label text |
| 2.5.4 Motion Actuation | A | Shake or tilt actions have a button alternative |
| 2.5.7 Dragging Movements | AA | New in 2.2: anything done by dragging, such as sliders, also works with taps or clicks |
| 2.5.8 Target Size (Minimum) | AA | New in 2.2: tap targets are at least 24×24 CSS pixels, or spaced so they don’t overlap |
| 3.1.1 Language of Page | A | The page language is set in the HTML |
| 3.1.2 Language of Parts | AA | Passages in another language are marked |
| 3.2.1 On Focus | A | Focusing an element doesn’t trigger an unexpected change |
| 3.2.2 On Input | A | Changing a setting doesn’t submit or navigate without warning |
| 3.2.3 Consistent Navigation | AA | Navigation stays in the same order across pages |
| 3.2.4 Consistent Identification | AA | The same function has the same label everywhere |
| 3.2.6 Consistent Help | A | New in 2.2: help links, chat or contact details appear in the same place on every page |
| 3.3.1 Error Identification | A | Errors are described in text |
| 3.3.2 Labels or Instructions | A | Form fields have visible labels and instructions |
| 3.3.3 Error Suggestion | AA | Error messages suggest how to fix the problem |
| 3.3.4 Error Prevention (Legal, Financial, Data) | AA | Orders and payments can be reviewed, corrected or reversed |
| 3.3.7 Redundant Entry | A | New in 2.2: users aren’t asked to re-enter information they already gave, such as the shipping address for billing |
| 3.3.8 Accessible Authentication (Minimum) | AA | New in 2.2: login doesn’t require memorising or puzzles; allow paste and password managers |
| 4.1.2 Name, Role, Value | A | Custom controls expose their name, role and state to assistive technology |
| 4.1.3 Status Messages | AA | “Added to cart” and similar messages are announced to screen readers |
What changed in WCAG 2.2?
WCAG 2.2 added nine success criteria to WCAG 2.1 and removed one. Six of the new criteria are at Level A or AA: Focus Not Obscured (2.4.11), Dragging Movements (2.5.7), Target Size Minimum (2.5.8), Consistent Help (3.2.6), Redundant Entry (3.3.7) and Accessible Authentication Minimum (3.3.8). The other three are AAA. Criterion 4.1.1 Parsing was removed as obsolete.
If your site already meets WCAG 2.1 AA, start with these six. Sticky headers and cookie banners covering focused elements, small icon buttons and drag-only sliders are the most common failures.
Is WCAG 2.2 AA a legal requirement?
WCAG 2.2 AA is not itself a law, but many laws and standards point to WCAG AA. In the EU, the European Accessibility Act applies from 28 June 2025 and relies on the EN 301 549 standard, which is based on WCAG. In the US, ADA lawsuits commonly use WCAG AA as the benchmark. This is general information, not legal advice.
Our guides to the European Accessibility Act and ADA website accessibility explain who is covered and what to do.
Checklist for accessible ecommerce product pages
Accessible product pages need descriptive image alt text, variant selectors that work by keyboard and announce the chosen option, prices and stock shown in text, error messages linked to their fields, “Added to cart” announcements, and buttons at least 24 by 24 pixels. These checks cover most product page failures.
WCAG 2.2 AA product page checklist
| Element | Check | Criteria |
|---|---|---|
| Product images | Alt text describes the product and variant; zoom and gallery work by keyboard | 1.1.1, 2.1.1 |
| Variant selectors (size, colour) | Native or properly labelled controls; selected state announced; not colour-only swatches | 1.4.1, 4.1.2 |
| Price and sale price | Sale and original price explained in text, not only by strikethrough or colour | 1.3.1, 1.4.1 |
| Quantity stepper | + and − buttons at least 24×24 px with accessible names | 2.5.8, 4.1.2 |
| Add to cart | Confirmation announced to screen readers; focus not lost | 4.1.3, 2.4.3 |
| Sticky add-to-cart bar | Does not cover focused elements when tabbing | 2.4.11 |
| Reviews and ratings | Star rating has a text equivalent, such as “4.5 out of 5” | 1.1.1 |
| Size guide modal | Opens with focus inside, closes with Escape, returns focus | 2.1.2, 2.4.3 |
| Image carousel | Can be paused; arrows labelled; swipe has button alternative | 2.2.2, 2.5.1 |
| Price range sliders on listings | Also adjustable by input fields or buttons | 2.5.7 |
| Help and chat | In the same place on every page | 3.2.6 |
How do you make checkout accessible?
An accessible checkout has visible labels on every field, correct autocomplete values, error messages that explain the fix, a “same as shipping” option for billing, a review step before payment, and a login that supports password managers and paste. These map directly to WCAG 2.2 criteria 1.3.5, 3.3.1–3.3.4, 3.3.7 and 3.3.8.
Also check that session or cart timeouts warn users and let them extend the time, as required by 2.2.1.
How do you test for WCAG 2.2 AA?
Test for WCAG 2.2 AA with three methods: automated scanners to catch common code issues, manual keyboard testing of every interactive element, and screen reader testing of key journeys. Automated tools catch only part of the issues, so manual testing of navigation, product pages, cart and checkout is essential.
- Automated: axe DevTools, WAVE or Lighthouse on key templates.
- Keyboard: tab through every page; check focus is visible and never hidden.
- Screen reader: NVDA or VoiceOver on product, cart and checkout.
- Zoom and reflow: 200% zoom and a 320 px wide window.
- Contrast: check text, buttons, inputs and focus rings.
WCAG 2.2 AA vs WCAG 2.1 AA: which should you follow?
Follow WCAG 2.2 AA. It is the current W3C Recommendation and is backwards compatible: meeting 2.2 AA also meets 2.1 AA. Some regulations still reference 2.1, but building to 2.2 covers both and avoids a second round of fixes later.
This is general information, not legal advice.
Frequently asked questions
How many success criteria are in WCAG 2.2 AA?
55: 31 at Level A and 24 at Level AA. Meeting AA means meeting all Level A and Level AA criteria.
What are the new WCAG 2.2 AA requirements?
At Levels A and AA: Focus Not Obscured (2.4.11), Dragging Movements (2.5.7), Target Size Minimum (2.5.8), Consistent Help (3.2.6), Redundant Entry (3.3.7) and Accessible Authentication Minimum (3.3.8).
What is the minimum target size in WCAG 2.2?
Under 2.5.8, targets should be at least 24 by 24 CSS pixels, or have enough spacing that a 24-pixel circle around each doesn’t overlap another target. There are exceptions, such as inline text links.
Does the European Accessibility Act require WCAG 2.2?
The EAA relies on the harmonised standard EN 301 549, which is based on WCAG. Following WCAG 2.2 AA is the practical way to prepare. This is not legal advice.
Can an accessibility overlay make my site WCAG compliant?
No. Overlays cannot fix underlying code problems such as missing labels, keyboard traps or poor focus order. Fix the site itself.
How long does it take to make an online store WCAG 2.2 AA compliant?
It depends on the theme and number of templates. Most work is in a few shared templates: product, listing, cart, checkout and navigation.
Sources
Related articles
- Website Maintenance Checklist: Weekly, Monthly, Quarterly and Yearly Tasks
A website maintenance checklist: the weekly, monthly, quarterly and yearly tasks that keep a business site secure, fast and working, and how long each takes.
- Website Accessibility Checklist: 25 WCAG 2.2 AA Checks You Can Run Yourself
A practical website accessibility checklist: 25 WCAG 2.2 AA checks for structure, images, colour, keyboard, forms and media, with how to test each one for free.
- What Is the Best Technology to Build a Website in 2026?
Next.js, WordPress, Shopify, Webflow, Laravel or Django? A practical 2026 guide to choosing the right website technology for speed, SEO, cost and growth.