PricingGuidesLog in
← All guides

Magento WCAG Compliance Checklist for Spanish Retailers

Why Accessibility Matters for Magento Stores

Magento and Adobe Commerce power thousands of online retailers across Spain and Europe. The European Accessibility Act (EAA) enforcement date of June 28, 2025 means your store will be legally required to meet WCAG 2.1 Level AA standards. Beyond compliance, accessible stores convert better — users with disabilities have strong spending power, and screen reader users often share their experiences on social media. Fixing accessibility issues now prevents costly redesigns later and reaches a broader customer base.

Your Accessibility Checklist

Image Alt Text

The issue: Product images, banners, and icons without alt text leave blind and low-vision users unable to see what you're selling or understand page content.

  • [ ] Every product image has a descriptive alt attribute (e.g., "Red leather crossbody bag with adjustable strap" instead of "product-001.jpg")
  • [ ] Decorative images use empty alt attributes (`alt=""`) so screen readers skip them
  • [ ] Banner and hero section images have alt text that describes their content or purpose
  • [ ] CMS block images (blog posts, promotions) all have meaningful alt text

How to check on Magento: Go to Catalog > Products, open each product, and verify the "Image" field has alt text filled in the "Alt Text" input. For CMS pages, edit the page in CMS > Pages, inspect uploaded images in the WYSIWYG editor.

Color Contrast

The issue: When text and background colors are too similar (low contrast), users with low vision or color blindness cannot read your content. This affects product descriptions, buttons, and form text.

  • [ ] Body text has a contrast ratio of at least 4.5:1 against its background
  • [ ] Large text (18pt+ or 14pt bold+) has a contrast ratio of at least 3:1
  • [ ] Buttons, links, and interactive elements meet contrast minimums
  • [ ] Form input borders and placeholder text are visible against the background
  • [ ] Error messages and validation text are readable, not just colored differently

How to check on Magento: Use a browser tool like WAVE (WebAIM) or axe DevTools (free browser extension). Run the tool on your store's product pages, checkout, and account pages. Pay attention to any contrast warnings, especially in footer text, disabled form fields, and custom CSS styling.

Form Labels

The issue: Input fields without labels (like email, password, or address fields) confuse screen reader users who cannot determine what data to enter where.

  • [ ] Every text input, select dropdown, and textarea has a visible `<label>` tag associated with it
  • [ ] Labels are programmatically linked to inputs using the `for` attribute matching the input's `id`
  • [ ] Placeholder text does not replace labels — labels must be visible
  • [ ] Required fields are clearly marked (with asterisk or text like "required")
  • [ ] Checkout form fields all have labels, including "Company" and optional address fields

How to check on Magento: Inspect your contact forms, account registration, and checkout pages in your browser's developer tools (right-click > Inspect). Look for `<label>` tags wrapping or associated with each `<input>`. If you see inputs without `<label>` elements, that's a failure.

Link Names

The issue: Links that say "Click here," "More," or contain only icons are meaningless to screen reader users. They cannot tell where a link goes or what it does.

  • [ ] Every link has clear, descriptive text that explains its destination or action (e.g., "View product details" not "More")
  • [ ] Icon-only links (social media, search button) have hidden text or aria-label so screen readers understand them
  • [ ] Links to external sites or PDFs are clearly identified (e.g., "Download product manual (PDF)")
  • [ ] Navigation menu links describe their target pages clearly
  • [ ] Related products or "Continue shopping" links have meaningful text

How to check on Magento: Use axe DevTools or open any page in your store, right-click a link, and select "Inspect." If the link contains only an `<img>` without alt text, or no text at all, it fails. Test your main navigation, category pages, and product links.

HTML Language Declaration

The issue: If your page's `<html>` tag lacks a `lang` attribute, screen readers cannot determine which language to use for pronunciation, and search engines may not serve your page correctly.

  • [ ] The opening `<html>` tag includes `lang="es"` (or `lang="es-ES"` for Spain specifically)
  • [ ] If you have multiple language versions (Spanish and English), each page declares its correct language
  • [ ] Inline content in other languages (e.g., a German brand name on a Spanish page) uses `<span lang="de">` to mark it

How to check on Magento: View the page source (Ctrl+U or Cmd+U in your browser) and check the very first line. You should see `<html lang="es">` or similar. If it's missing or says `lang="en"` on your Spanish store, it's incorrect. Check this on your homepage, product pages, and checkout.

Button Labels

The issue: Buttons with no text or only icons force screen reader users to guess what a button does — "Add to cart" and "Proceed" must be visible or announced.

  • [ ] Every button has clear, actionable text visible to all users (e.g., "Add to cart," "Continue to payment")
  • [ ] Icon buttons (heart/wishlist, zoom, menu toggle) have hidden text via aria-label or aria-describedby
  • [ ] Submit buttons on forms clearly state their purpose (not just "Submit" — say "Complete purchase" or "Create account")
  • [ ] Buttons look and function like buttons (not styled as links) so they're predictable

How to check on Magento: Inspect buttons in your browser developer tools. Look for text inside the `<button>` or `<input type="submit">` tag. If you see only an icon and no text, add an `aria-label="Button purpose"` attribute. Test your product pages, cart, and checkout flow.

Next Steps

Prioritize image alt text and form labels first — they affect your most vulnerable users daily. Use free tools like axe DevTools, WAVE, or Lighthouse (in Chrome DevTools) to scan your entire store and generate a priority list. For Magento-specific implementation, your development team should review the Adobe Accessibility module and ensure all custom extensions follow WCAG guidelines. Create a schedule to audit and fix issues before the June 28, 2025 EAA enforcement date.

This is technical WCAG guidance, not legal advice.

Related guides