Guide · Shopify
WCAG 2.2 checklist for a Shopify theme
Updated
Short answer: WCAG 2.2 is the current version of the web accessibility guidelines from the W3C. You do not need to read all of it to start. For a Shopify theme, a short list of criteria covers many of the things a visitor meets: images, contrast, keyboard use, focus, form labels, names for buttons, and a few new rules about target size and sticky content. Below, each criterion is mapped to the part of your store where it usually applies. The mapping is ours; the criteria and their wording are the W3C's.
Want us to check your store? Send your store link to [help@vibe-fixer.com](mailto:help@vibe-fixer.com) and we'll send your free accessibility report within one business day. It is an automated, read-only check of your store's public homepage, not a full audit with a person testing by keyboard and screen reader. It tests only what software can test of WCAG 2.0 and 2.1, Levels A and AA. It doesn't test the newer WCAG 2.2 criteria, such as target size. It finds some issues, not all of them. The report is not legal advice.
What is new in WCAG 2.2?
The W3C says: "WCAG 2.2 provides 9 additional success criteria since WCAG 2.1." It also says: "4.1.1 Parsing is obsolete and removed from WCAG 2.2" (W3C, What's New in WCAG 2.2).
The ones we map to a store theme below are 2.4.11 Focus Not Obscured (Minimum), 2.5.7 Dragging Movements, 2.5.8 Target Size (Minimum), 3.3.7 Redundant Entry and 3.3.8 Accessible Authentication (Minimum). The full W3C text is at w3.org/TR/WCAG22.
The checklist, mapped to your store
Each level below is as the W3C lists it. This table is not legal advice. Ask your lawyer which level matters for you.
| Criterion | Level | Where it shows up in a Shopify store |
|---|---|---|
| 1.1.1 Non-text Content | A | Product photos, collection banners, theme images, icon buttons: each needs a text alternative |
| 1.3.1 Info and Relationships | A | Headings, lists, and form fields that are tied to their labels |
| 1.3.5 Identify Input Purpose | AA | Fields about the user: name, email, address on contact and account forms |
| 1.4.3 Contrast (Minimum) | AA | Body text, price text, sale badges, footer links |
| 1.4.10 Reflow | AA | The store on a phone or zoomed in: no sideways scrolling |
| 1.4.11 Non-text Contrast | AA | Form field borders, size and color swatches, icons |
| 2.1.1 Keyboard | A | Menu, product picker, cart drawer, filters |
| 2.1.2 No Keyboard Trap | A | Cart drawer, pop-ups, cookie banner, quick-view windows |
| 2.4.7 Focus Visible | AA | A visible outline on whatever you tab to |
| 2.4.11 Focus Not Obscured (Minimum) | AA | Sticky header, sticky add-to-cart bar, cookie banner |
| 2.5.7 Dragging Movements | AA | Price range slider and image carousels that need a drag |
| 2.5.8 Target Size (Minimum) | AA | Small close buttons, quantity plus and minus, color swatches |
| 3.3.1 Error Identification | A | Contact, newsletter and account forms |
| 3.3.2 Labels or Instructions | A | Every field and option picker |
| 3.3.7 Redundant Entry | A | Any multi-step form or account flow that asks for the same details twice |
| 3.3.8 Accessible Authentication (Minimum) | AA | Customer account sign-in |
| 4.1.2 Name, Role, Value | A | Icon buttons (cart, search, close), menu toggles, custom pickers |
| 4.1.3 Status Messages | AA | "Added to cart" and form messages that appear without moving focus |
What the W3C actually says, in short
- 1.1.1: all non-text content "has a text alternative that serves the equivalent purpose" (with exceptions), and a control "has a name that describes its purpose."
- 1.4.3: text has "a contrast ratio of at least 4.5:1," with large text at least 3:1.
- 2.1.1: "All functionality of the content is operable through a keyboard interface" (the W3C text adds conditions about keystroke timing and exceptions).
- 2.4.11: "When a user interface component receives keyboard focus, the component is not entirely hidden due to author-created content." The W3C notes that a sticky cookie banner can fail this if it entirely covers the focused item.
- 2.5.7: functionality that uses dragging "can be achieved by a single pointer without dragging," unless dragging is essential.
- 2.5.8: "The size of the target for pointer inputs is at least 24 by 24 CSS pixels," with exceptions for spacing, equivalent controls, inline links, user agent controls and essential cases.
- 3.3.8: a cognitive function test, such as remembering a password, is not required for any step in an authentication process unless that step offers one of the W3C's listed options (another method, a helping mechanism, object recognition, or the user's own content).
The criterion quotes are from the W3C WCAG 2.2 text, which the Understanding pages also reproduce.
How to use the list
- Pick one page of each type: home, collection, product, cart, contact, account.
- Go through the table with your keyboard only. Tab, Shift+Tab, Enter, Space, Escape.
- Zoom to a phone width and check for sideways scrolling.
- Write down each miss with the page and the element.
- Fix on a duplicate of your theme, not the live one.
A tool can check some of these, such as contrast. It cannot tell whether your menu makes sense by keyboard. The W3C says: "Tools cannot check all accessibility aspects automatically. Human judgement is required" (W3C).
FAQ
Is this the full list of WCAG 2.2?
No. It is a short list of criteria that map to a store theme. The complete set is on the W3C WCAG 2.2 page.
Does passing this list make my store accessible to everyone?
No. It is a starting point. Passing it does not mean your store meets WCAG 2.2 at any level, and it is not legal protection. Some issues need a person testing with a keyboard and a screen reader.
Where do the fixes go?
Most of these live in your theme's code and styles. Image text goes in the Shopify admin and theme editor. App widgets are fixed in the app's settings or by its maker.
How VibeFix works on a store
Once you choose to go ahead and connect your store, our AI agent works through the issues in your report on an unpublished copy of your theme. We review each change before you preview it, and you publish it yourself. Nothing goes live until you do. The report lists anything still open. How it works for Shopify stores
Want us to check your store?
Send your store link to [help@vibe-fixer.com](mailto:help@vibe-fixer.com) and we'll send your free accessibility report within one business day. It is an automated, read-only check of your store's public homepage, not a full audit with a person testing by keyboard and screen reader: we don't sign in, submit anything or change anything. It tests only what software can test of WCAG 2.0 and 2.1, Levels A and AA. It doesn't test the newer WCAG 2.2 criteria, such as target size. It finds some accessibility issues, not all of them. The report is not legal advice.
Related: Shopify accessibility audit: what it checks and what it can't
This page is general information, not legal advice. VibeFix is independent and is not affiliated with any company named here. Shopify is a trademark of Shopify Inc. Other names are trademarks of their owners.
Want it fixed?
Our AI agent fixes it in your code and tests your live app again. See pricing.
It starts with a free check that confirms the problem on your live app, no account needed.