Reference
WCAG 2.1 + 2.2 — Per-criterion Shopify reference
Concrete failure examples and exact theme-code fixes for each WCAG Level AA success criterion, organized for Shopify merchants. Auto-fix availability is called out per item.
Non-text Content
Every non-text element (image, icon, chart, decorative graphic) must have a text alternative that serves an equivalent purpose, or be marked decorative with `alt=""`.
Info and Relationships
Information, structure, and relationships conveyed visually (headings, lists, tables, grouped form fields) must also be programmatically determinable through HTML semantics or ARIA.
Contrast (Minimum)
Body text must have a luminance contrast ratio of at least 4.5:1 against its background; large text (≥18pt or ≥14pt bold) needs at least 3:1.
Keyboard
All page functionality must be operable through a keyboard interface, without requiring specific timings for individual keystrokes.
Focus Visible
Any keyboard-operable element must show a visible indicator when it receives focus.
Labels or Instructions
Form fields and inputs must have visible labels or instructions describing what the user is expected to enter.
Name, Role, Value
Every UI component must expose a name, role, and (where relevant) value to assistive technology — typically through native HTML or ARIA attributes.
Link Purpose (In Context)
The purpose of every link must be determinable from the link text alone, or from the link text together with its programmatically-determined context.
Target Size (Minimum)
Pointer input targets — buttons, links, controls — must be at least 24×24 CSS pixels, with documented exceptions for inline links and equivalent alternatives.
Focus Not Obscured (Minimum)
When a user-interface component receives keyboard focus, it must not be entirely hidden by author-created sticky content (sticky headers, footers, drawers).
Accessible Authentication (Minimum)
Authentication processes must not depend on cognitive function tests (memorizing characters, transcribing puzzles) without an alternative.
Identify Input Purpose
Input fields collecting information about the user (name, email, address, phone, billing) must declare their purpose using HTML autocomplete attributes.
Non-text Contrast
User-interface components and graphical objects required to understand the content must have at least 3:1 contrast ratio against adjacent colors.
Resize Text
Except for captions and images of text, text must be resizable up to 200% without loss of content or functionality.
Reflow
Content must be presentable in a 320 CSS-pixel-wide viewport without two-dimensional scrolling, except for content that genuinely requires it (data tables, maps, complex diagrams).
Orientation
Content must not be locked to a single display orientation (portrait or landscape) unless a specific orientation is essential.
Focus Order
When users navigate with the keyboard, focus must move through the page in an order that preserves meaning and operability.
No Keyboard Trap
Keyboard focus must be able to move away from any component using only the keyboard — there must be no "trap" where Tab stops moving focus.
Error Identification
When a user input error is detected, the field in error must be identified and the error described to the user in text.
Error Suggestion
When a user input error is detected and suggestions for correction are known, the suggestions must be provided unless doing so would jeopardize security.
Status Messages
Status messages (success confirmations, error notices, progress updates) must be programmatically determinable through ARIA live regions so assistive technology announces them without requiring focus.
Headings and Labels
Headings and form labels must describe topic or purpose — generic labels like "Click here" or numbered headings like "Section 1" violate this criterion.
Text Spacing
Text must remain readable when users override line height, paragraph spacing, letter spacing, and word spacing within stated minimums.
Parsing
Markup must be valid: complete start/end tags, no duplicate IDs, no duplicate attributes, properly nested elements. (Note: WCAG 2.2 deprecated this criterion as obsolete; modern browsers no longer require strict validation.)
Audio-only and Video-only (Prerecorded)
Prerecorded audio-only content needs a text transcript; prerecorded video-only content needs either a transcript or an audio description.
Captions (Prerecorded)
Captions must be provided for prerecorded audio content in synchronized media (videos with sound).
Audio Description or Media Alternative (Prerecorded)
Prerecorded video with audio must have either an audio description (narration of visual content during pauses) or a media alternative (text equivalent).
Meaningful Sequence
When the order of content affects meaning, the order must be programmatically determinable so that assistive technology presents content in the same meaningful sequence.
Sensory Characteristics
Instructions must not depend solely on sensory characteristics — shape, color, size, location, orientation, or sound.
Use of Color
Color must not be the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
Audio Control
Any audio that plays automatically for more than 3 seconds must have a mechanism to pause, stop, or mute it independently from the overall system volume.
Images of Text
Use real text rather than images of text, except where a particular visual presentation is essential or the text is part of a logo or brand name.
Timing Adjustable
Time limits set by the content must be adjustable: users must be able to turn off, adjust, or extend any time limit before encountering it.
Three Flashes or Below Threshold
Web pages must not contain anything that flashes more than three times in any one-second period, unless the flashing is below specific brightness thresholds.
Language of Page
The default human language of each web page must be programmatically determinable through the `lang` attribute on the `<html>` element.
On Focus
When any UI component receives focus, it must not initiate a change of context — no surprise navigation, no popup opening, no form submission triggered by focus alone.
On Input
Changing the value of a UI component must not automatically cause a change of context unless the user has been advised of the behavior in advance.