← All articles

Shopify accessibility checklist for the European Accessibility Act

Updated 2026-11-02

The European Accessibility Act (EAA) has applied since 28 June 2025. It covers e-commerce services offered to consumers in the EU, and the European Commission lists e-commerce among the services in scope (European Commission: European Accessibility Act). In practice, national laws and market surveillance authorities use the technical standard EN 301 549, which for web content points to WCAG 2.1 level AA.

If you run a Shopify store and sell to consumers in the EU, this checklist covers what we look at first. It is written for merchants and theme developers. It is not legal advice, and no checklist can promise full conformance.

1. Theme basics

  • Language attribute. The <html> element needs a correct lang attribute that matches each storefront language. Most Online Store 2.0 themes set this from the locale, but custom themes often hard-code it.
  • Skip link. Keyboard users should be able to jump past the header and menu to the main content. Check that the skip link exists, becomes visible on focus and points to a real target.
  • Visible focus. Press Tab through the whole page. Every link, button and form field needs a clearly visible focus indicator. Themes frequently remove outlines with outline: none in CSS.
  • Colour contrast. Body text needs a contrast ratio of at least 4.5:1, large text 3:1 (WCAG 1.4.3). Watch sale badges, light grey placeholder text, and text placed on top of banner images.
  • Heading structure. One h1 per page, followed by a logical order. Sections built in the theme editor often use headings purely for size.

2. Navigation and menus

  • Drop-down and mega menus must open and close with the keyboard, and expose their state with aria-expanded.
  • The mobile menu drawer must trap focus while open, close with Escape, and return focus to the button that opened it.
  • Icon-only buttons (search, account, cart) need an accessible name, for example visually hidden text or an aria-label.
  • The cart count should be announced when it changes, for example through a polite live region.

3. Product listing and product pages

  • Alt text. Product images need meaningful alt text (WCAG 1.1.1). Shopify lets you add alt text per media item in the admin. Decorative images should have empty alt text.
  • Variant pickers. Size and colour swatches are often built from div elements. They should be real radio buttons or buttons with a programmatic label and a selected state. Colour must not be the only way to tell options apart (WCAG 1.4.1).
  • Price and availability. When a variant changes the price or shows "sold out", screen reader users need to get that update too.
  • Image galleries and sliders. Carousels need keyboard-operable controls with names, and auto-rotating content needs a pause control (WCAG 2.2.2).
  • Quantity inputs. The plus and minus buttons need labels, and the input needs a label too.

4. Cart, forms and checkout

  • Every form field (newsletter, contact, search, cart notes, discount code) needs a visible, programmatically associated label. Placeholder text alone is not a label.
  • Error messages must be in text, linked to the field and announced (WCAG 3.3.1, 4.1.3).
  • Cart drawers and pop-ups (newsletter, cookie banners, age gates) must be dialogs that can be reached, used and closed by keyboard.
  • Shopify hosts and maintains the checkout itself. Most of the issues we fix are in the theme, apps and content around it, so these parts are your responsibility.

5. Apps and third-party widgets

Review apps, chat bubbles, upsell pop-ups and cookie banners inject their own markup. They are a common source of keyboard traps and unlabeled buttons. Test the store with apps enabled, the way customers see it.

6. Why an overlay widget is not a shortcut

Accessibility overlay widgets add a toolbar on top of the site. They don't change the underlying theme code, so missing labels, broken focus order and inaccessible variant pickers usually remain. We recommend fixing the source. That is what EAA Fix does: we change the theme code and keep a list of what was changed.

7. How to test quickly

  1. Unplug the mouse and complete a purchase up to the payment step using only Tab, Shift+Tab, Enter, Space and the arrow keys.
  2. Run an automated checker such as axe or WAVE on the home page, a collection, a product page and the cart. Automated tools catch only part of the issues, so treat them as a starting point.
  3. Zoom the browser to 200% and check that nothing overlaps or gets cut off (WCAG 1.4.4, 1.4.10).
  4. Try a screen reader (VoiceOver on macOS/iOS, NVDA on Windows) on a product page and listen to how the variant picker and add-to-cart button are announced.

8. Document what you did

Under the EAA, service providers have to provide information on how the service meets the accessibility requirements. For online shops, this usually takes the form of an accessibility statement. See our guide: Accessibility statement for Shopify stores: what to include.

Need help?

We check five pages of your store for free and send the results by email. If you want, we then fix up to 15 issues directly in your Shopify or WooCommerce theme for a fixed price of €199 net. Request a free mini-check.

This article is general technical information, not legal advice. Whether and how the EAA applies to your business depends on national law and your specific situation.