PricingGuidesLog in
← All guides

WooCommerce EU Accessibility Checklist (WCAG/EAA)

Why WooCommerce Accessibility Matters for EU Teams

WooCommerce powers over 5 million online stores, many operating in the EU. The European Accessibility Act (EAA) makes web accessibility a legal requirement from June 28, 2025 onwards — and it applies to ecommerce sites. Inaccessible product pages, checkout forms, and navigation don't just exclude disabled users; they block sales, harm your reputation, and create legal exposure. This checklist helps you fix the most common barriers your WooCommerce store likely has right now.

Image Alt Text

Screen reader users and anyone with images disabled can't see your product photos, banners, or icons without alt text. In WooCommerce, this is critical because product images are how sighted users decide to buy — blind users need that same information in words.

How to check: Go to Products in your WooCommerce admin, edit any product, find the product image, and look for the "Alt Text" field in the image settings. It should describe what you see, not just say "product" or "image." Check product gallery images too — they need alt text as well. Search your site for decorative images (icons, spacer images) — these can use empty alt text `alt=""`, but meaningful images must have descriptions.

  • [ ] All product images have descriptive alt text (not just "product photo")
  • [ ] Product gallery thumbnails have alt text
  • [ ] Category page images have alt text
  • [ ] Banner and promotional images have alt text
  • [ ] Icons that convey meaning (e.g., a star for ratings) have alt text or hidden labels
  • [ ] Decorative images are properly marked as decorative (`alt=""`)

Color Contrast

If your button text is light gray on white, or your price text is a thin red on pink, people with low vision or color blindness won't be able to read it. WooCommerce stores often use custom colors for branding, but if contrast is too low, you're making your site unreadable.

How to check: Use the WAVE browser extension or Axe DevTools (both free) to scan your store. They'll flag text and background colors that don't meet the WCAG AA standard (4.5:1 for normal text, 3:1 for large text). Pay special attention to form fields, buttons, price displays, and sale badges.

  • [ ] Product title text has sufficient contrast against its background
  • [ ] Price text (especially sale prices) is readable
  • [ ] Button text (Add to Cart, Checkout, etc.) has adequate contrast
  • [ ] Form input text and borders are clearly visible
  • [ ] Links are distinguishable from surrounding text
  • [ ] Sale badges, discount labels, and alerts have readable contrast

Form Labels

Your checkout and account pages have forms — and if the fields don't have visible, associated labels, screen reader users won't know what to enter where. This also confuses sighted users on mobile or when autofill doesn't work.

How to check: In WooCommerce, edit your checkout form via Checkout settings or a form plugin. Each input field (email, phone, address, etc.) must have a `<label>` element linked to it. In WordPress, use the "Label" setting in form builders. Use Axe DevTools or inspect the page source — you should see `<label for="field_id">` paired with `<input id="field_id">`.

  • [ ] Billing email field has a visible label
  • [ ] Billing address fields (name, street, city, postcode) all have labels
  • [ ] Phone number field has a label
  • [ ] Shipping address fields have labels
  • [ ] Custom checkout fields (if any) have labels
  • [ ] Login and registration form fields have labels
  • [ ] Search bar has an associated label (can be hidden visually)

Link Names

"Click here," "read more," or icon-only links don't tell screen reader users or keyboard users where they're going. On a product listing page with 20 "Read More" links, a screen reader user has no way to know which product each link refers to.

How to check: Use a screen reader (NVDA is free) or the WAVE extension to navigate your store. Activate each link and listen — you should hear a meaningful description, not just "click here" or an unlabeled icon. On product pages, category pages, and blog posts, check that links have descriptive text. Use Axe DevTools to scan for "Links without names."

  • [ ] Product category links have clear, descriptive text (not "More")
  • [ ] "Add to Cart" buttons and links identify the product
  • [ ] "View Details" or product page links include the product name
  • [ ] Footer links have meaningful text
  • [ ] Related products links are descriptive
  • [ ] Social media links in the footer have text labels, not just icons
  • [ ] Pagination links (Next, Previous) are clearly labeled

HTML Document Language

Your site's `<html lang="">` tag tells screen readers and search engines what language you're using. Without it, screen readers might try to read English in French pronunciation, and your site might appear in the wrong search results.

How to check: View your site's source code (right-click > View Page Source), look at the very first line after `<!DOCTYPE html>`. You should see `<html lang="en">` (or `lang="de"`, `lang="fr"`, etc.). If it's missing or empty, your site needs this fix. In WordPress, this is often set automatically, but check Settings > General and in your theme settings.

  • [ ] The `<html>` tag has a valid `lang` attribute (e.g., `lang="en"` for English, `lang="de"` for German)
  • [ ] The language matches the actual content on the page
  • [ ] If you have multiple language versions, each has the correct language tag

Button Names

Buttons with only an icon (a shopping cart, a menu hamburger, a search magnifying glass) are invisible to screen readers unless you add a label. Even sighted users on low-speed connections might not load the icon image.

How to check: Use a screen reader or WAVE to test every button on your site. Activate it and ask: does it tell me what this button does? Look for buttons with icons on your header (search, account, cart, menu toggle). Check your Add to Cart buttons, quantity adjusters, and filter buttons. In WooCommerce PHP code or theme templates, icon buttons should have an `aria-label` attribute or hidden text inside them.

  • [ ] Search button has a label (visible text or `aria-label`)
  • [ ] Shopping cart icon/button has a label (e.g., "Shopping Cart" or "View Cart")
  • [ ] Account/login button icon has a label
  • [ ] Menu toggle button (hamburger icon) has a label
  • [ ] Add to Cart button has clear, readable text
  • [ ] Quantity adjust buttons (+/-) have labels
  • [ ] Filter and sort buttons on category pages have readable names
  • [ ] Close buttons on modals and pop-ups have labels

Getting Started

Pick one section above and fix it this week — it's better to complete one issue fully than to half-fix everything. Start with images and forms, since those block the most users. If you use a page builder like Elementor or Divi, it often has built-in accessibility checks in the preview. For custom code, the Axe DevTools browser extension is your fastest way to spot barriers.

The EAA enforcement date of June 28, 2025 is a real deadline for EU ecommerce sites. Even if you're outside the EU, fixing these issues improves usability for all visitors, reduces bounce rates, and builds trust.

This is technical WCAG guidance, not legal advice.

Related guides