WCAG basics
What is WCAG 2.2? A plain-English guide
WCAG 2.2 is the current W3C standard for accessible websites. Learn the four principles, levels A, AA and AAA, and the 9 new success criteria.
Web accessibility, explained
Make your website work for everyone
Plain-English guides, free tools and honest advice for people who build and run websites. Find the issues that keep people out, and fix the ones that matter most.
Free tools
Check your site as you build it
Website accessibility checker
Enter a web address to get a Lighthouse accessibility score and every failing check, with its WCAG criterion.
Color contrast checker
Check text and background colors against WCAG AA and AAA, and get the closest passing shade.
HTML accessibility checker
Paste HTML from a page, product description or theme section to find missing alt text, labels and names.
Accessibility statement generator
Answer a few questions and copy a ready-to-publish accessibility statement for your website.
Common issues
Six common barriers, and how to fix them
Each one stops real people from shopping. Here's what goes wrong, the WCAG success criterion it fails, and how CodeInspire Accessibility helps you find and fix it.
WCAG 1.4.3 Contrast (Minimum) Level AA
Text too faint to read
Light gray text on white is hard to read with low vision, or on a phone in sunlight. Sale prices, footer links and placeholder text are the usual suspects.
- The audit
- Lists every element that fails, with its contrast ratio, the ratio it needs, and the exact text and background colors.
- Fix it in
- Theme editor
- For shoppers
- Shoppers can switch on high contrast while you fix the colors.
WCAG 1.1.1 Non-text Content Level A
Images without alt text
A screen reader announces an image without alt text as “image”, or reads out its file name. A blind shopper can't tell one product photo from the next.
- The audit
- Finds each image with no alt text and says where to add it: the product's media, the collection image, or Content › Files.
- Fix it in
- Shopify admin
WCAG 4.1.2 Name, Role, Value Level A
Icon buttons with no name
Cart, close, wishlist and slider arrows are often icons only. A screen reader user hears “button” and has to guess what it does.
- The audit
- Shows each unnamed button and link with its code and selector, so you or your developer can add a label.
- Fix it in
- Theme code
WCAG 3.3.2 Labels or Instructions Level A
Form fields without labels
A sign-up box that only has placeholder text loses its hint as soon as someone types, and a screen reader may announce nothing at all.
- The audit
- Flags fields with no label, including search boxes, quantity fields and sign-up forms that other apps add.
- Fix it in
- Theme code
WCAG 1.4.4 Resize Text Level AA
Text you can't make bigger
Some themes stop visitors from pinch-zooming on phones, so people with low vision can't make the text big enough to read.
- The audit
- Checks your theme's viewport tag and says exactly what to remove from layout/theme.liquid.
- Fix it in
- Theme code
- For shoppers
- Shoppers can raise the font size in four steps and add line height and letter spacing.
WCAG 2.2.2 Pause, Stop, Hide Level A
Motion that won't stop
Auto-rotating slideshows and background videos pull attention away for people with ADHD, and can make people with vestibular disorders feel sick.
- Check by hand
- Automated checks can't judge motion. Turn off auto-rotate in your slideshow's settings, or give it a pause button.
- Fix it in
- Theme editor
- For shoppers
- Stop animations pauses CSS animations and videos for shoppers who turn it on.
For Shopify stores
Find what's wrong, fix it, and help shoppers in the meantime
CodeInspire Accessibility Tool is our Shopify app. It doesn't change your theme behind your back: it shows you what to fix and where, and gives shoppers tools to adjust your store while you work through the list.
Run the audit
Check your home, product, collection and cart pages on mobile or desktop. Each issue shows its impact and the WCAG criterion it affects.
Follow the Shopify steps
Every issue says where to fix it, in the Shopify admin, the theme editor or theme code, and shows the exact element and colors.
Switch on the widget
Turn it on in your theme editor, no code needed. Shoppers adjust text, contrast, color, motion and sound, in 11 languages.
Publish your statement
Start from a ready-made draft. Shoppers open it from the widget's Statement button.
Starter is free. The audit is part of Pro: $10/month with a 7-day free trial.
Guides
Start here
Shopify stores
Shopify store accessibility checklist
An area-by-area checklist for a more accessible Shopify store: theme, alt text, colors, headings, forms, pop-ups, apps, your statement and testing.
WCAG basics
Do accessibility overlays and widgets work?
What accessibility overlays and widgets can and can't do, why disability advocates criticize them, and what actually makes a website accessible.
Latest guides
Code
Accessible forms: labels, errors and instructions that work
How to build accessible forms: visible labels, clear instructions, errors in text, the WCAG criteria behind them, and how Shopify's Dawn theme builds its forms.
Law and policy
Does the ADA apply to websites? A guide for online stores
How the ADA applies to online stores: what the Justice Department says, why WCAG is the yardstick, where courts disagree and what to do about a demand letter.
Design and color
Focus indicators: what WCAG 2.2 asks for and how to style them
What WCAG 2.2 asks of keyboard focus indicators, CSS for a ring that works on any background, and how to strengthen Dawn's focus ring on Shopify.
Testing
Lighthouse accessibility score: what it means and what it misses
How the Lighthouse accessibility score is calculated, why 100 doesn't mean accessible, and how to fix the heaviest checks on a Shopify store.
Shopify stores
Shopify product page accessibility: a section-by-section guide
Check every part of a Shopify product page for accessibility, from the title and gallery to the price, add to cart, size chart, reviews and app add-ons.
Shopify stores
Accessible variant pickers and swatches on Shopify
Why color swatches and variant pickers fail shoppers, the pattern that works, how Dawn builds its picker, and a five-minute keyboard and screen reader test.
Browse by topic
- WCAG basicsWhat the Web Content Accessibility Guidelines ask for, in plain English.
- Design and colorContrast, color, typography, focus styles and layouts that work for everyone.
- Content and writingAlt text, headings, link text, captions and plain language.
- CodeSemantic HTML, keyboard access, forms and ARIA, with examples.
- TestingHow to check a site with automated tools, a keyboard and a screen reader.
- Law and policyThe ADA, the European Accessibility Act and accessibility statements. Not legal advice.
- Shopify storesStep-by-step accessibility fixes for Shopify themes, products and checkout.
How we write about accessibility
We cite the source
Every WCAG claim links to the W3C's own explanation, and every legal claim to the law itself. You can check our work.
No compliance promises
No tool, widget or checklist makes a site compliant on its own. We tell you what each one does, and what's still on you.
We practice what we preach
This site aims for WCAG 2.2 AA and is tested by keyboard and with automated checks. Read our accessibility statement.