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.
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.
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.
Bypass Blocks
A mechanism must be available to bypass blocks of content that are repeated on multiple web pages — typically the header, navigation, and announcement bar. The dominant pattern is a "Skip to main content" link as the first focusable element.