The 10 most common accessibility errors on e-commerce sites
· 5 min read
The most common accessibility errors on online shops are low text contrast, images without text alternatives, form fields without labels, buttons and links without accessible names, and controls that do not work with a keyboard. Most of them sit in a few theme templates, so fixing them once improves every page. Here are the ten patterns that appear again and again, with what they mean for customers and how to fix them.
1. Low text contrast
What it is. Light grey text on white, white text on a pastel banner, a pale "sale" badge. WCAG asks for at least 4.5:1 for normal text and 3:1 for large text (SC 1.4.3).
Why it matters. Customers with low vision — and anyone on a phone in sunlight — cannot read prices, sizes or delivery information.
How to fix. Adjust the colour tokens in your theme settings. On Shopify most themes expose text and button colours in the theme editor; on WooCommerce, check the theme's customiser and any page builder styles. Placeholder text counts too.
2. Product images without alt text
What it is. Images with no alt attribute, or alt text like "IMG_2041.jpg" (SC 1.1.1).
Why it matters. A screen reader user hears a file name or nothing at all, and cannot tell products apart.
How to fix. Fill in the alt text field for each product image in your shop admin. Describe what matters for buying: colour, material, view. Decorative images get an empty alt.
3. Form fields without labels
What it is. Checkout, newsletter or search fields that rely on placeholder text instead of a real, connected label (SC 1.3.1, 3.3.2).
Why it matters. When the placeholder disappears, sighted users forget what to type; screen reader users may hear only "edit text". In checkout this can block a purchase.
How to fix. Use a visible <label> connected to the input. If your theme hides labels visually, make sure they remain available to assistive technology.
4. Buttons and links without a name
What it is. Icon-only buttons for cart, search, wishlist, close or menu — with no text alternative (SC 4.1.2, 2.4.4).
Why it matters. A screen reader announces "button" with no hint of what it does.
How to fix. Add visually hidden text or an aria-label such as "Open cart" or "Close". Check sliders and quick-view buttons from apps as well.
5. Keyboard traps in pop-ups
What it is. Cookie banners, newsletter pop-ups, chat widgets or quick-view modals that you can tab into but not out of, or that cannot be closed with Escape (SC 2.1.2).
Why it matters. Keyboard users are stuck and leave.
How to fix. Make modals closable with Escape and a labelled close button, return focus to where it was, and test each third-party widget.
6. Invisible focus
What it is. Themes that remove the focus outline with outline: none (SC 2.4.7), or sticky elements that hide the focused item (SC 2.4.11, new in WCAG 2.2).
Why it matters. Keyboard users cannot see where they are on the page.
How to fix. Add a clear focus style with enough contrast, and leave space under sticky headers and banners.
7. Tiny targets
What it is. Quantity steppers, swatches and close icons smaller than 24 × 24 CSS pixels without spacing (SC 2.5.8, new in WCAG 2.2).
Why it matters. People with tremors — and everyone on a small phone — tap the wrong item.
How to fix. Increase the clickable area with padding; the visible icon can stay small.
8. Missing or wrong page language
What it is. The lang attribute is missing or does not match the content, common on multilingual shops (SC 3.1.1, 3.1.2).
Why it matters. Screen readers pronounce German text with English rules, or the other way round.
How to fix. Set the correct lang on the <html> element for each language version; translation apps usually have a setting for this.
9. Unclear error messages
What it is. A red border with no text, or a generic "There was an error" at the top of the checkout (SC 3.3.1, 3.3.3).
Why it matters. Customers do not know which field is wrong or how to fix it, and abandon the order.
How to fix. Show a text message next to the field ("Enter a postcode with 5 digits"), and move focus or announce the error.
10. Broken heading structure
What it is. Headings used for visual size rather than structure, missing H1s, or product names styled as plain text (SC 1.3.1, 2.4.6).
Why it matters. Screen reader users navigate by headings; without them, a product page is one long block.
How to fix. One H1 per page (usually the product or category name), followed by logical H2 and H3 sections. Fix it in the template, not page by page.
What these errors have in common
Almost all of them live in templates and settings, not in individual pages. A shop with ten thousand products often has fewer than ten templates. That is good news: a focused round of fixes changes the whole site.
Most of the ten can be detected, at least partly, by an automated scan. Keyboard traps, focus visibility and error message quality need a manual check. That is why our reports are an automated check, not a full audit, and not legal advice, and why we recommend a short keyboard test of your checkout after every major update.
Next steps
- Use the WCAG 2.2 checklist for a complete pass.
- If you sell to consumers in the EU, check who the EAA applies to and read the EAA guide for online shops.
- Selling in the US? See ADA website compliance.
- Avoid shortcuts: why accessibility overlays don't work.
Want to know which of these ten your shop has? Run a free check.