WCAG 2.1 AA guidelines explained: a plain-English checklist for store owners
· WCAG · checklist · compliance · EAA
WCAG 2.1 AA guidelines explained: a plain-English checklist for store owners
WCAG 2.1 AA contains 50 success criteria. In practice, e-commerce stores fail on the same 8 to 10 of them, over and over. If you run an online shop serving EU customers, the European Accessibility Act has been enforceable since 28 June 2025 — which means those failures are no longer just a UX problem. They carry real legal exposure. This wcag checklist cuts through the full standard and focuses on what actually matters for retail.
The four POUR principles: what they mean for a shop
Every WCAG criterion sits under one of four principles. Understanding them helps you see why a particular failure matters, not just that it exists.
Perceivable — all content must be presentable in ways users can perceive. A product image with no alt text is invisible to a screen reader user. A video with no captions is inaccessible to a deaf customer. If information exists only in one sensory channel, it fails this principle.
Operable — all interface components must be operable. A customer who cannot use a mouse should be able to add items to their basket, fill in their delivery address, and complete checkout using a keyboard alone. If any step requires a pointer click with no keyboard equivalent, the store fails here.
Understandable — content and operation must be understandable. Form errors need to explain what went wrong, not just flag a red border. The language of the page needs to be declared so assistive technology can switch to the correct voice profile.
Robust — content must be robust enough that assistive technologies can reliably interpret it. Custom dropdown menus built with <div> elements and no ARIA roles fail here. So do form fields with no programmatic label.
The e-commerce WCAG checklist: 8 criteria that cause most failures
This is not an exhaustive list of all 50 criteria. It is the predictable failure set for retail sites, based on automated audit data across thousands of European stores.
| Criterion | Plain-English meaning | How common as a failure |
|---|---|---|
| 1.1.1 Non-text content | Every image needs an alt text, or alt="" if decorative | Extremely common — product images often carry no alt or just a filename |
| 1.4.3 Contrast (Minimum) | Normal text needs a 4.5:1 contrast ratio against its background | Very common — grey-on-white body copy, light placeholder text |
| 2.1.1 Keyboard | Every function must work with keyboard alone | Common — custom dropdowns, date pickers, modal close buttons |
| 2.4.2 Page titled | Every page needs a descriptive <title> element | Moderate — product pages with identical or empty titles |
| 2.4.4 Link purpose | Link text must make sense out of context | Common — "click here", "read more", "view" with no surrounding context |
| 3.1.1 Language of page | The lang attribute on <html> must be correct | Moderate — Czech stores declaring lang="cz" instead of lang="cs" |
| 4.1.2 Name, role, value | Form controls need a label; custom widgets need ARIA | Very common — icon-only buttons, unlabelled search fields |
| 1.4.11 Non-text contrast | UI components such as input borders and icons need 3:1 contrast | Common — light grey input borders, low-contrast icons |
1.1.1 in depth: alt text on product images
This is the criterion that catches the most stores. An image without an alt attribute means a screen reader announces the filename — typically something like "IMG_4829.jpg" or "product-variant-B-FINAL-v2.png". For a blind customer trying to understand what they are buying, that is useless.
The requirement is straightforward: every informative image needs a text alternative that conveys the same information. For a product image, that means describing what the product is — colour, material, key features — not just its name. A red cotton T-shirt is not adequately described as "T-shirt front view". It needs something like "Red cotton T-shirt, crew neck, front view on white background".
Decorative images — dividers, background textures, purely ornamental icons — should carry alt="". That signals to assistive technology that the image holds no information and should be skipped entirely.
1.4.3 in depth: colour contrast
The 4.5:1 ratio requirement applies to text under 18pt (or 14pt bold). Large text — headings and buttons at 18pt or above — only needs 3:1. This is frequently misunderstood: stores check their heading colours and consider the job done, missing the fine-print body copy that falls below threshold.
Grey text on a white background is the single most common failure. Hex #767676 on white sits at exactly 4.5:1 — the minimum passing value. Anything lighter fails. Check your placeholder text in form fields, your breadcrumb navigation, your product metadata lines (SKU, availability status), and your footer links. Those are the spots that most automated tools flag.
4.1.2 in depth: form labels and button names
A checkout form whose fields only carry placeholder text fails 4.1.2. Placeholder text disappears the moment the user starts typing. It is not a label. Every input needs either a visible <label> element — linked via the for/id pair — or an aria-label attribute.
Icon-only buttons are another persistent failure. A shopping basket icon with no text and no aria-label is announced as "button" by most screen readers, with no context about what it does. Adding aria-label="Add to basket" is a one-line fix with an immediate accessibility impact.
Criteria that trip up multilingual stores
If you sell across EU markets and your store switches between English, German, Polish, and Czech, criterion 3.1.1 becomes particularly important. The lang attribute on <html> must match the language of the page. A German-language page with lang="en" will be read aloud by German screen reader users using English pronunciation — completely unintelligible.
Czech is lang="cs". Not lang="cz". The ISO 639-1 code for Czech is cs; cz is a country code. This is a consistent error in Central European e-commerce that automated tools reliably catch.
How to audit your store today
A complete WCAG audit has three layers.
Automated scanning catches roughly 30–40% of failures. Tools like axe, WAVE, or Altvisor's WCAG checker scan your pages and flag definite violations — missing alt text, contrast failures, missing language attributes. Run this first. It is fast, costs nothing, and finds the problems that are unambiguously wrong.
Manual keyboard testing catches what automation misses. Open your store, disconnect your mouse, and try to complete a purchase. Press Tab through every interactive element. Can you reach the search bar? The basket? The checkout address form? The order confirmation button? Getting stuck at any step means you have found a failure.
Screen reader testing is the deepest layer. Use NVDA (free, Windows) or VoiceOver (built into macOS and iOS) to navigate your homepage, a product page, and your checkout flow. Pay particular attention to what is announced at each step for images, forms, and custom UI components.
Most stores benefit from addressing automated findings first — particularly 1.1.1 (alt text) and 1.4.3 (contrast) — because these account for the majority of failures by volume and are the most straightforward to fix at scale. A store with 5,000 product images and missing alt text on all of them has one systematic problem to solve, not 5,000 separate ones. That is the case for automation.
Run a free WCAG scan on your storefront to see exactly where you stand — then start free to fix image alt text at scale.