The 10 Most Common Accessibility Mistakes in Webshops (and How to Fix Them)

Q: Does a free scan catch all these mistakes?

An automated scan reliably detects about 57% of the problems by machine; the rest requires human review. That 57% covers exactly the mistakes above — contrast, alt text, labels, buttons, headings — so a scan brings the lion's share into view right away, with the fix included. Curious which of these ten are on your site? Paste your URL and scan one page for free at full depth — no account, in under 60 seconds.

June 4, 2026

Short answer. Most webshops don't fail on hundreds of different things, but on the same handful of mistakes: too little colour contrast, missing alt text, buttons and links without a name, fields without a label, a messy heading structure, and poor keyboard operability. The good news: that's exactly what makes it fixable — often theme-wide, so one fix instantly covers hundreds of pages.

The WebAIM Million study shows that ~96% of homepages have measurable WCAG errors, and those concentrate on the ten below. Want to know which ones your site has? Scan one page for free at the bottom.

1. Too little colour contrast

By far the most common mistake. Light-grey text on white, or a button colour that's just a touch too faint, is unreadable for people with low vision and in bright sunlight on a phone. The standard calls for a contrast ratio of at least 4.5:1 for normal text (3:1 for large text).

Fix: make the text or background colour darker or lighter until the ratio checks out. In Shopify you set this once in your theme settings → colours, and it applies to your whole store immediately. More on this in colour contrast: the WCAG requirement and how to measure it.

2. Images without alt text

A product photo without alt text is invisible to a screen reader — a blind customer then has no idea what the product is. This hits your sales directly.

Fix: give every informative image a short alt text that describes what it shows. In Shopify: product → media → "edit alt text". Purely decorative images get an empty alt (alt=""). See writing alt text that works.

3. Buttons without a name

A button that shows only an icon (cart, search, menu) is read out by a screen reader as "button" — without the user knowing what it does.

Fix: give the button text, or an aria-label that describes the action, for example aria-label="Add to cart".

4. Links without clear text

Just like buttons: a link that consists only of an icon, or "read more" links without context, don't tell a screen reader user where they're going.

Fix: give the link visible, descriptive text, or an aria-label ("View cart" instead of a bare cart icon).

5. Input fields without a label

Search, login, and checkout fields without a linked label are hard or impossible to operate with assistive technology. At checkout in particular, that costs you customers.

Fix: link a visible <label> to every input field (via for/id), or use an aria-label if there's no room for visible text.

6. A messy heading structure

Screen reader users navigate by headings, the way you'd use a table of contents. If you jump from an H1 to an H4, or use headings only for styling, that structure breaks.

Fix: use headings in logical order (H1 → H2 → H3) and handle styling with CSS, not with the heading level.

7. Missing language attribute

Without a language attribute, a screen reader doesn't know whether your page is in Dutch or English, and pronounces everything with the wrong accent.

Fix: set lang="nl" (or the correct language) on the <html> element. In Shopify this lives in theme.liquid — usually already present, but sometimes empty.

8. Not operable with the keyboard

Many people don't use a mouse. If a menu, slider, or pop-up only works with the mouse, or if you can't see where the focus is, you shut those visitors out.

Fix: make sure everything is reachable with the Tab key, that there's a visible focus outline, and that pop-ups don't "trap" the focus.

9. Misused ARIA

ARIA attributes can help assistive technology — but used incorrectly or invalidly, they actually do harm. This often creeps in through installed apps or theme components.

Fix: use ARIA only where needed and with valid values. If it comes from an app or theme, check that component.

10. No clear page title

A page without a unique <title> shows no recognisable name in the browser tab or to screen readers — navigating between tabs becomes guesswork.

Fix: give every page a unique, descriptive title. Shopify usually fills this in automatically; check your custom templates.

What is the most common accessibility mistake?

Too little colour contrast is by far the most common mistake — it tops nearly every large-scale study by a wide margin, because it slips unnoticed into theme colours, button text, and price labels. It's also one of the easiest mistakes to fix: set your theme colours correctly once and it applies store-wide.

Can you fix these mistakes all at once?

Often, yes. Because a webshop works with templates, the same mistake usually appears on hundreds of pages at the same time — and can therefore be repaired theme-wide. One change to your theme (colours, headings, labels) then covers your entire store in one stroke.

Does a free scan catch all these mistakes?

An automated scan reliably detects about 57% of the problems by machine; the rest requires human review. That 57% covers exactly the mistakes above — contrast, alt text, labels, buttons, headings — so a scan brings the lion's share into view right away, with the fix included.

Curious which of these ten are on your site? Paste your URL and scan one page for free at full depth — no account, in under 60 seconds.