Reviewed by Misha Gavura, founder of Inclusely. Last reviewed . Written by the Inclusely team at EVDEV, Toronto.
The short answer
WCAG 2.2 is WCAG 2.1 plus nine new success criteria, minus one. It removes 4.1.1 Parsing. For Level AA, the level laws point to, six rules are new: focus must not be hidden, dragging needs a simple alternative, tap targets need to be at least 24 by 24 pixels, help stays in the same place, people are not asked to retype information, and logging in cannot depend on a memory test or puzzle.
WCAG 2.2 at a glance
- Published
- October 5, 2023. Current edition December 12, 2024.
- Previous version
- WCAG 2.1, June 5, 2018
- New criteria
- 9 in total: 2 at Level A, 4 at AA, 3 at AAA
- Removed
- 4.1.1 Parsing (Level A)
- Criteria at Level AA
- 55 (Levels A and AA together)
- Backward compatible
- Yes. Content that meets 2.2 also meets 2.1 and 2.0.
The nine new WCAG 2.2 criteria at a glance
Most of the new rules help three groups: people who use a keyboard instead of a mouse, people with low vision or shaky hands who use a phone, and people with memory or learning disabilities. On a store, that maps to the header, the product page, the filters, the help links and the login form. This page goes through each one. For the full list of 55 Level AA rules, see WCAG 2.2 AA explained for online stores.
2.4.11 Focus Not Obscured (Minimum), Level AA
- What it asks
- When a link, button or field gets keyboard focus, it must not be completely hidden by something the store added, such as a sticky header or a banner. Being partly covered is allowed at AA.
- Where it shows up in a store
- A shopper presses Tab down a collection page. The page scrolls, and the focused product card ends up under the sticky header. Sticky add to cart bars on phones, cookie banners, newsletter bars and chat bubbles do the same at the bottom of the screen.
- How to fix it in Shopify
Tell the browser how tall your sticky bars are, so it scrolls focused items clear of them. W3C lists CSS
scroll-paddingas the technique for this. Add it in Online Store, Edit theme, Theme settings, Custom CSS:Keep focused items clear of sticky bars /* Theme settings > Custom CSS. Use your header's real height. */ html { scroll-padding-top: 120px; /* sticky header */ scroll-padding-bottom: 90px; /* sticky add to cart bar */ }A cookie or newsletter bar that stays on screen fails only if it can cover the focused item completely. Add its height to the bottom padding above, or make it close when focus leaves it, and test again after every theme update. In Dawn, the header's Sticky header setting (None, On scroll up, Always, or Always, reduce logo size) changes how often this happens.
- How to check it yourself
- Load a long collection page. Press Tab slowly from the top to the footer, then Shift and Tab back up. If you ever lose sight of the focus outline completely, that is a failure.
2.5.7 Dragging Movements, Level AA
- What it asks
- If something works by dragging, there must also be a way to do it with single taps or clicks, unless dragging is essential.
- Where it shows up in a store
- A price filter that only works by dragging two handles along a bar. A before and after image slider. A product image you drag to rotate. A drag to reorder wishlist. People with tremors, and people using head pointers or voice control, often cannot drag.
- How to fix it in Shopify
- Offer a second way next to the drag. For a price filter, show From and To price fields beside the slider. Dawn's price filter already uses two typed price fields. For a before and after slider, add two buttons or let a tap on the image move the handle. If an app adds the slider, ask the app developer for a setting that shows the fields.
- How to check it yourself
- Try every slider and drag area with clicks only: no holding the mouse button down. Then try it with a keyboard. If there is no way to set it without dragging, it fails.
2.5.8 Target Size (Minimum), Level AA
- What it asks
- Things you tap or click are at least 24 by 24 CSS pixels. A smaller target can still pass if a 24 pixel circle centred on it does not overlap another target, or another small target's circle. Links inside a sentence are exempt.
- Where it shows up in a store
- Quantity plus and minus buttons, colour swatches, slideshow dots, the close button on a pop-up, filter checkboxes and tiny footer icon links. In our scan of 22 free Shopify theme demo stores, axe found target size problems on 7 of them.
- How to fix it in Shopify
Give small controls a minimum size, or more space between them. A Dawn issue opened on September 23, 2026 reports that the quantity buttons do not always reach 24 pixels. This rule in Theme settings, Custom CSS fixes it in Dawn and themes built on it:
Minimum size for the quantity buttons /* Theme settings > Custom CSS (Dawn class names) */ .quantity__button { min-width: 24px; min-height: 24px; }Other themes use other class names. Right-click the button and choose Inspect to find yours. The older AAA rule, 2.5.5 Target Size (Enhanced), asks for 44 by 44 pixels. That is a better goal for the add to cart button and checkout links on phones.
- How to check it yourself
- Run the free accessibility checker, which includes the target size rule. Then open the product page on a phone and try every small control with your thumb.
3.2.6 Consistent Help, Level A
- What it asks
- If you offer help on several pages, such as a phone number, an email address, a contact form link, a chat button or a help page link, it appears in the same order relative to the rest of the page each time. WCAG does not require you to offer help.
- Where it shows up in a store
- A Contact link that sits in the header on the home page but only in the footer on product pages. A chat bubble that is on some templates and missing on others. A help link that moves above the product description on one template and below it on another.
- How to fix it in Shopify
- Put contact and help links in the header or footer menu, which repeat on every page by default (Online Store, Navigation). If you use a chat app, turn it on for every page in the theme editor's App embeds, not on single templates. Keep any help block in a product template in the same spot in every product template.
- How to check it yourself
- Open the home page, a collection, a product, the cart and a policy page. Note where the help links and the chat button are. They should be in the same order every time.
3.3.7 Redundant Entry, Level A
- What it asks
- In one process, information the shopper already gave is filled in for them or offered to pick, instead of asked for again. Exceptions: when retyping is essential, needed for security, or the old information is no longer valid.
- Where it shows up in a store
- A wholesale application form that asks for the business address on step one and again on step three. A returns form that asks for the order number and email, then asks for the email again. A quote form that makes people retype their name in a second section.
- How to fix it in Shopify
- Shopify's own checkout is run by Shopify, and its shipping and billing address option is Shopify's part. Your part is the forms in your theme and apps. Remove the second ask, carry the answer forward, or add a Same as above checkbox. Set the autocomplete attribute on name, email, phone and address fields so browsers can fill them.
- How to check it yourself
- Fill in every multi-step form on your store from start to finish. Write down each piece of information you typed. If you typed anything twice, find a way to remove the second time.
3.3.8 Accessible Authentication (Minimum), Level AA
- What it asks
- Logging in must not depend on a cognitive function test, such as remembering a password, typing characters from an image or solving a puzzle, unless there is another way, or help such as a password manager or paste. Picking objects in pictures is allowed at AA.
- Where it shows up in a store
- Shopify's new customer accounts sign in with a one-time 6-digit code sent by email, with no password. That can pass, as long as the code can be pasted. Watch for: login or code fields that block paste, apps that split a code into six boxes that only take one digit each, and text or maths CAPTCHAs. Shopify turns on hCaptcha by default for contact and blog comment forms, and for login, create account and password recovery forms on legacy customer accounts.
- How to fix it in Shopify
- Never block paste or password managers on login fields. If an app adds its own CAPTCHA, check that it offers a non-puzzle option. You can turn hCaptcha on or off per form in Online Store, Preferences, under Spam protection. Turning it off has a cost in spam, so weigh it, and test what a suspicious login really sees.
- How to check it yourself
- Log in to your store as a customer using only a password manager and paste. Try it on a phone. If any step makes you retype a code by hand or solve a text puzzle, note it.
The three new Level AAA criteria
Level AAA is not required by the laws we track, and W3C does not recommend requiring it for whole sites. These three are still good design goals:
- 2.4.12 Focus Not Obscured (Enhanced). No part of the focused item is hidden. The same scroll padding fix covers most of it.
- 2.4.13 Focus Appearance. The focus indicator covers at least the area of a 2 CSS pixel outline around the item, with at least 3:1 contrast between focused and unfocused states. A solid 2 pixel outline in a dark colour with a small offset meets it on most themes.
- 3.3.9 Accessible Authentication (Enhanced). Like 3.3.8, but picture puzzles such as “select every image with a bus” are no longer allowed either.
Focus outlines also need 3:1 contrast under a Level AA rule that is not new: 1.4.11 Non-text contrast. Our guide to WCAG colour contrast requirements covers that.
Why 4.1.1 Parsing was removed
4.1.1 Parsing asked for clean markup: complete start and end tags, correct nesting, no duplicate attributes and unique IDs. It existed because screen readers once read the page code directly. W3C says they now rely on the browser, and browsers handle messy code well, so the rule “no longer has utility and is removed.”
Two things to know. First, W3C added a note to WCAG 2.1 (September 21, 2023) and to the WCAG 2.0 errata saying 4.1.1 should be treated as always met for HTML. Second, W3C says many issues that failed 4.1.1 will fail 1.3.1 Info and Relationships or 4.1.2 Name, Role, Value instead. A duplicate ID that breaks a form label is one example. So do not ignore a duplicate ID warning in a scan. Look at whether it breaks a label or a reference.
WCAG 2.1 or 2.2: which should a store aim for?
Aim for WCAG 2.2 Level AA. It is the current version, and because it includes 2.1 and 2.0, it covers every law that names an older one. Today most of them do:
| Law or standard | WCAG version | Note |
|---|---|---|
| ADA (United States) | None set for private stores | Justice Department guidance points to WCAG. Its 2024 rule for state and local governments uses 2.1 AA. |
| AODA (Ontario) | 2.0 AA | Businesses and non-profits with 50 or more employees in Ontario. |
| European Accessibility Act | 2.1 AA today | Through EN 301 549. Version 4.1.1 (September 2, 2026) moves to 2.2 once cited in the EU Official Journal. |
See the full rules for your country in the ADA website compliance guide and the European Accessibility Act guide.
This page explains the law in general terms. It is not legal advice. For advice about your business, speak with a lawyer.
How to check your store for the WCAG 2.2 changes
Of the six new A and AA rules, axe-core, the open source engine behind many checkers, tests only target size, and in version 4.14 only when the WCAG 2.2 tags are turned on. The other five need a person. A practical order for a store:
- Run the free accessibility checker on your home page, a collection and your best-selling product. It includes the WCAG 2.2 target size rule.
- Tab through the same three pages with a keyboard. Watch for focus hidden under sticky bars (2.4.11).
- Try every slider, filter and drag area with clicks only (2.5.7).
- Compare where help and chat appear on five page types (3.2.6).
- Fill in each multi-step form and log in with paste only (3.3.7 and 3.3.8).
- Keep a dated note of what you tested and fixed. The ADA website checklist lists these manual checks with the rest of WCAG 2.2 AA.
How Inclusely will handle WCAG 2.2
Questions about WCAG 2.2
What is the difference between WCAG 2.1 and 2.2?
WCAG 2.2 keeps every success criterion from 2.1 except one, 4.1.1 Parsing, which it removes. It adds nine new success criteria: two at Level A, four at Level AA and three at Level AAA. For Level AA that means six new things to check, mostly about keyboard focus, tap target size, dragging, help links, retyping information and logging in.
When was WCAG 2.2 released?
W3C published WCAG 2.2 as a Recommendation on October 5, 2023. The current edition, dated December 12, 2024, fixed errata in definitions and formatting and added no new rules. WCAG 2.1 came out on June 5, 2018.
What is WCAG 2.2?
WCAG 2.2 is the current version of the Web Content Accessibility Guidelines from the W3C. It is a list of testable rules, called success criteria, at Levels A, AA and AAA. Level AA in 2.2 has 55 success criteria. Laws, regulators and standards in the US, Canada and the EU point to WCAG when they judge whether a website is accessible.
Is WCAG 2.2 backward compatible with 2.1?
Yes. W3C says content that meets WCAG 2.2 also meets 2.1 and 2.0. The only catch is 4.1.1 Parsing: it is gone in 2.2, but a W3C note says it should be treated as always met for HTML in 2.0 and 2.1 too, so you lose nothing by aiming for 2.2.
Which new WCAG 2.2 criteria can automated tools test?
Of the six new A and AA rules, axe-core, the open source engine behind many checkers, has a rule only for Target Size (Minimum), 2.5.8. In axe-core 4.14 that rule is off by default and runs only when you turn on the WCAG 2.2 tags. Focus being hidden, dragging, consistent help, retyping and login puzzles need a person to try the page.
Do I need to meet WCAG 2.2 or is 2.1 enough?
Most laws and standards that name a version today use WCAG 2.0 or 2.1 Level AA. The European standard EN 301 549 v4.1.1, published September 2, 2026, moves to WCAG 2.2. Because 2.2 includes 2.1, aiming for 2.2 AA covers both. This is not legal advice.