PricingGuidesLog in
← All guides

Shopify WCAG Compliance Checklist for EU Stores

Why Accessibility Matters for Shopify E-Commerce Stores

The EU's European Accessibility Act (EAA) takes effect on June 28, 2025, and e-commerce platforms are explicitly in scope. Shopify stores built and operated in the EU must meet WCAG 2.1 Level AA standards. Beyond legal compliance, inaccessible sites exclude potential customers with disabilities — and accessibility improvements like better contrast and clearer buttons improve the experience for *everyone*, including people on slow connections or older devices.

Image Alt Text

Images without alternative text make your products invisible to screen reader users and fail when images don't load. This is especially critical on Shopify stores where product images drive purchasing decisions.

How to check on Shopify:

  • Go to Products → select a product → edit each image in the Images section and confirm the "Alt text" field is filled with a clear, descriptive phrase (e.g., "Blue cotton T-shirt with crew neck" not "image123" or left blank).

What to fix:

  • Write alt text for every product image, lifestyle photo, and decorative graphic.
  • Describe what the image shows and, for products, include the key visual details (color, material, style).
  • Keep alt text under 125 characters and avoid starting with "image of" or "picture of."
  • If an image is purely decorative (like a background pattern), mark it as decorative in Shopify's alt text field or leave it empty only if truly ornamental.

Color Contrast

Text that blends too closely with its background is hard to read, especially for people with low vision or color blindness. On Shopify stores, this often appears in product descriptions, call-to-action buttons, or custom CSS.

How to check on Shopify:

  • Use a free tool like WebAIM's Contrast Checker or the Axe DevTools browser extension; paste your Shopify store URL, inspect text on your pages, and check the contrast ratio of text against its background.

What to fix:

  • Aim for a contrast ratio of at least 4.5:1 for small text (under 18px) and 3:1 for large text (18px+).
  • Check buttons, links, form labels, and product prices — these are common problem areas.
  • If you use custom CSS or a custom theme, audit headings, body text, and any overlaid text on images.
  • Test your colors in grayscale to see if text is still distinguishable without relying on color alone.

Form Labels

Checkout and contact forms without proper labels confuse screen reader users because they can't tell what each field expects. This directly blocks purchases and customer inquiries from people with visual impairments.

How to check on Shopify:

  • Open your checkout page and any contact or newsletter forms; use a screen reader (NVDA on Windows or VoiceOver on Mac) or the Axe DevTools extension and listen/check whether each input field has a clear, associated label.

What to fix:

  • In Shopify's form settings (Checkout settings, custom forms via apps, or theme code), ensure every input field (`<input>`, `<textarea>`, `<select>`) has a `<label>` element with a `for` attribute that matches the field's `id`.
  • Don't rely on placeholder text alone — placeholders disappear when users click a field, leaving no label for screen readers.
  • For custom forms built with theme code, manually add labels and ensure they're properly associated.
  • Test by tabbing through the form with a keyboard; each field should announce its label when focused.

Link Names

Links need clear text so users know where they'll go or what happens when clicked. "Click here" links or icon-only links without alt text fail for screen reader users and keyboard navigators.

How to check on Shopify:

  • Use the Axe DevTools extension or WAVE (WebAIM's web accessibility evaluator); scan your site and look for links flagged as having no name or only icon/image content.
  • Manually inspect your store: check product links, navigation, footer links, and "Learn more" buttons — are they descriptive?

What to fix:

  • Replace generic link text like "Click here," "More," or "Read more" with descriptive phrases: "Learn more about our return policy" or "View blue cotton T-shirts."
  • If a link is an icon or image, add alt text to the image or add hidden text using Shopify's theme code (e.g., `<span class="sr-only">Product details</span>`).
  • Check navigation menus, breadcrumbs, and related-product carousels — all must have clear link text.
  • For icon buttons (e.g., a shopping cart icon in the header), add a `title` attribute or aria-label to describe the link's purpose.

HTML Document Language

Your site's `<html>` tag must declare the page language so screen readers pronounce words correctly and search engines serve your site to the right audience. This is a quick fix that has outsized impact.

How to check on Shopify:

  • Open your store in a browser, right-click → View Page Source, and search for `<html` at the top of the page.
  • Confirm you see something like `<html lang="en">` (for English) or `<html lang="de">` (for German), etc.

What to fix:

  • If your `<html>` tag has no `lang` attribute or says `lang=""`, edit your theme.
  • In Shopify: go to Online Store → Themes → Actions → Edit code → find `layout/theme.liquid` (or equivalent base template) and locate the opening `<html>` tag.
  • Add or update it to `<html lang="en">` (replace "en" with your store's primary language code: "de" for German, "fr" for French, "nl" for Dutch, etc.).
  • If your store is multilingual, use Shopify's built-in language settings and ensure each region/locale's `<html>` tag has the correct lang attribute.

Button Names

Buttons need clear text that describes what they do. Icon-only buttons without labels are invisible to screen reader users and confusing for keyboard navigators.

How to check on Shopify:

  • Use Axe DevTools or WAVE to scan your site for buttons with no name.
  • Manually check your store: "Add to cart," "Buy now," "Search," "Filter," and icon buttons (menu toggle, close modal) — do they have visible or hidden text labels?

What to fix:

  • Buttons with only an icon must have a hidden text label using an `aria-label` attribute or a visually-hidden `<span>` with the button's purpose.
  • For example, a "≡" menu toggle button should have `<button aria-label="Open navigation menu">≡</button>`.
  • In Shopify Liquid theme code, add labels to icon buttons: `<button class="icon-button" aria-label="Close">×</button>`.
  • Test by using a screen reader; when you focus on a button, you should hear its purpose clearly described (not just "button").
  • Check the "Add to cart," "View cart," filter buttons, and checkout buttons — all must have clear, descriptive text.

Next Steps

Start with image alt text and form labels — these are the most common barriers on Shopify stores and are quickest to fix. Use free tools like Axe DevTools, WAVE, or WebAIM's Contrast Checker to audit your site in under an hour. Assign ownership of each issue to your team: product descriptions go to merchandising, theme code to your developer, and content to your editors. Test your fixes with actual assistive technology (screen readers, keyboard navigation) rather than relying on automated tools alone. The EAA enforcement date of June 28, 2025, is a real deadline; starting now gives you time to remediate without rushing.

This is technical WCAG guidance, not legal advice.

Related guides