WCAG 2.1 AA: The Complete E-Commerce Guide
WCAG 2.1 Level AA is the accessibility standard courts use to evaluate ADA compliance for websites. This guide explains every principle that matters for Shopify and e-commerce stores — in plain language, with real examples.
What Is WCAG 2.1 AA?
The Web Content Accessibility Guidelines (WCAG) 2.1 are published by the W3C and define how websites should be built to be accessible to people with disabilities. "Level AA" is the middle conformance level — it's what the DOJ adopted as the legal standard for ADA compliance.
WCAG 2.1 AA consists of 50 success criteria organized under four principles: Perceivable, Operable, Understandable, and Robust (POUR). Failing any single criterion can constitute an ADA violation and grounds for a lawsuit.
Principle 1: Perceivable
Information and UI components must be presentable to users in ways they can perceive. Users who are blind, low-vision, deaf, or hard of hearing depend on these requirements.
| Criterion | What It Means | E-Commerce Impact | Severity |
|---|---|---|---|
| 1.1.1 Alt Text | All non-text content has a text alternative | Every product image, banner, icon needs alt text. The #1 violation on Shopify stores. | Critical |
| 1.3.1 Info & Relationships | Structure conveyed visually also available programmatically | Form labels, table headers, list markup, heading hierarchy | Critical |
| 1.4.3 Contrast (Minimum) | Text has 4.5:1 contrast ratio (3:1 for large text) | Sale badges, muted text, ghost buttons, placeholder text | High |
| 1.4.4 Resize Text | Text can be resized to 200% without loss of content | Fixed-size containers that clip text at larger sizes | Medium |
| 1.4.11 Non-text Contrast | UI components have 3:1 contrast against adjacent colors | Input borders, checkbox outlines, button borders | High |
Principle 2: Operable
UI components and navigation must be operable by all users — including those who cannot use a mouse and rely entirely on keyboard navigation.
| Criterion | What It Means | E-Commerce Impact | Severity |
|---|---|---|---|
| 2.1.1 Keyboard | All functionality operable via keyboard | Dropdowns, color swatches, modals, sliders — all must work without a mouse | Critical |
| 2.1.2 No Keyboard Trap | Focus can be moved away from any component | Modal dialogs, video players, date pickers that trap keyboard users | Critical |
| 2.4.3 Focus Order | Focus order preserves meaning and operability | Tab order must match visual layout — broken in many themes | High |
| 2.4.4 Link Purpose | Link purpose determinable from link text alone | "Click here," "Learn more," "Read more" are all violations without context | High |
| 2.4.7 Focus Visible | Keyboard focus indicator visible | Many Shopify themes set outline:none globally — this is a violation | Critical |
Principle 3: Understandable
Information and the operation of the UI must be understandable. This covers predictable behavior, clear instructions, and helpful error handling.
| Criterion | What It Means | E-Commerce Impact | Severity |
|---|---|---|---|
| 3.3.1 Error Identification | Input errors identified and described in text | Checkout validation errors must be programmatically associated with their fields | Critical |
| 3.3.2 Labels or Instructions | Labels provided for user input | Every form field — quantity, address, card, coupon — needs a proper label | Critical |
| 3.2.3 Consistent Navigation | Navigation repeated in same relative order across pages | Inconsistent header/footer across templates | Medium |
Principle 4: Robust
Content must be robust enough to be reliably interpreted by assistive technologies. This is primarily about clean HTML and proper ARIA implementation.
Incorrect ARIA implementation can be worse than no ARIA at all. Adding aria-label to every element or misusing roles creates a worse experience for screen reader users. ARIA should be applied by specialists who test with real AT.
Special Considerations for Shopify
The Checkout Problem
Shopify's checkout is hosted on Shopify's own servers — which means third-party overlay tools cannot touch it. Until Checkout Extensibility (available on Shopify Plus and newer plans), the checkout was largely a black box for accessibility developers. Today, it can be remediated — but only through Shopify's official extensibility framework, which requires specialized knowledge.
Theme Architecture
Most Shopify themes are built using Liquid templating with heavy JavaScript for dynamic interactions. Accessibility fixes must be implemented in Liquid templates, JavaScript event handlers, and CSS — not just HTML. This is why generalist developers often miss Shopify-specific violations.
Dawn Theme Issues
Shopify's default Dawn theme ships with several accessibility issues out of the box — including keyboard navigation problems in the cart drawer and color contrast failures in certain configurations. Every Dawn-based store needs accessibility review regardless of customization.