Magento Accessibility Checklist 2026 | WCAG 2.1 AA & EAA Compliance
Last updated: 2026-03-22
Magento, now known as Adobe Commerce in its enterprise form, is a powerful open-source e-commerce platform used by mid-size to enterprise businesses worldwide. Magento's architecture is complex, with a layered system of PHTML templates, XML layouts, UI components built on Knockout.js, and RequireJS-managed JavaScript modules. The default Luma theme provides a reasonable baseline for accessibility, but the platform's complexity means that customizations, third-party extensions, and theme modifications frequently introduce accessibility barriers. Magento's checkout flow is particularly challenging because it relies heavily on Knockout.js for dynamic rendering, which can create issues with screen reader announcements, focus management, and keyboard navigation. Product catalog features like layered navigation, configurable product options, and the mini-cart all involve dynamic JavaScript interactions that must be made accessible. With many Magento stores serving international customers, the European Accessibility Act creates direct compliance obligations, and ADA lawsuits targeting e-commerce sites continue to increase. This checklist addresses the most impactful accessibility issues specific to Magento stores, from template-level HTML semantics to complex checkout interactions, providing concrete remediation guidance for Magento developers and store administrators.
Common Accessibility Issues
Magento uses Knockout.js extensively for dynamic content rendering, particularly in the checkout flow, mini-cart, product options, and customer account sections. When Knockout.js updates the DOM, screen readers are not automatically notified of the changes. This means that validation errors during checkout, cart total updates, shipping method changes, and step transitions are all silent to assistive technology users.
Add aria-live regions to Knockout.js component templates that contain dynamic content. For the checkout flow, modify the checkout step templates (app/design/frontend/[Theme]/[theme]/Magento_Checkout/web/template/) to include aria-live='polite' on error message containers and status update regions. Use Magento's customer-data.js events to trigger screen reader announcements when cart contents change.
<!-- Knockout checkout error (no SR announcement) -->
<div class="field-error"
data-bind="visible: error()">
<span data-bind="text: error"></span>
</div><!-- Knockout checkout error (with SR announcement) -->
<div class="field-error"
role="alert"
aria-live="assertive"
data-bind="visible: error()">
<span data-bind="text: error"></span>
</div>Magento's layered navigation (faceted search) allows customers to filter products by attributes like price range, color, size, and brand. Many custom themes implement these filters using JavaScript-enhanced controls (sliders, color swatches, expandable panels) that only respond to mouse interactions. The price range slider is particularly problematic, as custom slider implementations rarely provide keyboard operability.
Replace custom slider controls with native HTML range inputs styled with CSS, as they are keyboard accessible by default. For color swatch filters, use button elements with aria-label describing the color name and aria-pressed indicating the selected state. Ensure all expandable filter panels use button elements with aria-expanded to toggle visibility and can be operated with Enter/Space keys.
Magento's default Fotorama image gallery and many third-party gallery replacements implement zoom and lightbox features that create keyboard traps. When a user opens the lightbox view, focus may not move into the lightbox, the Escape key may not close it, and Tab may cycle through page elements behind the overlay rather than within the lightbox content.
Customize the gallery component's JavaScript to implement proper focus management: trap focus within the lightbox when open (cycling between close button, previous, next, and image), handle Escape key to close the lightbox, and return focus to the thumbnail that triggered the lightbox when it closes. Override the Fotorama templates or replace the gallery with an accessible alternative.
<div class="fotorama-lightbox"
style="display:block">
<img src="product-large.jpg">
<span class="close"
onclick="closeLightbox()">X</span>
</div><div class="fotorama-lightbox"
role="dialog"
aria-label="Product image gallery"
aria-modal="true"
style="display:block">
<button type="button" class="close"
aria-label="Close image gallery">
<span aria-hidden="true">X</span>
</button>
<img src="product-large.jpg"
alt="Product name - full size view">
<button type="button"
aria-label="Previous image">Prev</button>
<button type="button"
aria-label="Next image">Next</button>
</div>Magento's checkout is rendered through Knockout.js templates that generate form fields dynamically. Some fields may have labels that are not properly associated with their inputs due to dynamically generated IDs that do not match the label's for attribute. Custom checkout extensions frequently add fields without any labels at all, relying on placeholder text.
Audit all checkout step templates in your theme for proper label-to-input associations. Magento's UI component system uses a naming convention for input IDs; ensure labels reference these IDs correctly. For custom checkout fields added by extensions, modify the field configuration to include proper label definitions. Add aria-required='true' to required fields and aria-describedby for help text.
While Magento's Luma theme includes some landmark regions, many custom themes strip out the skip navigation link and use generic div elements for page structure. The complex header region with search, account links, cart, and navigation means that keyboard users must tab through dozens of interactive elements before reaching the main content on every page.
Add a skip-to-content link as the first focusable element in your theme's default.xml layout or 1column.phtml template. Ensure the page structure uses semantic HTML: header for the top section, nav for navigation menus (with aria-label to distinguish primary from secondary navigation), main for the content area, and footer for the bottom section.
Magento-Specific Tips
- Use Magento's XML layout system to add accessibility enhancements globally without modifying individual PHTML templates. Add skip links, ARIA landmarks, and screen reader announcement containers through layout XML blocks in your theme's default.xml to ensure they appear on every page.
- When customizing the Knockout.js checkout, always test each step of the checkout flow with keyboard-only navigation and a screen reader. Focus particularly on the transition between shipping and payment steps, as dynamic content rendering during step changes frequently loses focus position.
- Leverage Magento's UI component mixins to add accessibility attributes globally. Create a custom mixin that adds aria-invalid, aria-describedby, and aria-required attributes to all form fields rendered by the UI component system, rather than modifying each template individually.
- Audit every third-party extension installed on your Magento store for accessibility, as extensions that modify the front-end often introduce inaccessible patterns. Request accessibility documentation from extension vendors and test their output with automated tools before deploying to production.
Recommended Tools
axe DevTools
A browser extension essential for auditing Magento's complex rendered output, identifying WCAG violations in Knockout.js-rendered components, checkout forms, and product page interactions.
Pa11y
An automated accessibility testing tool that can crawl multiple pages of your Magento store, particularly useful for testing product catalog pages, category listings, and CMS pages at scale.
NVDA Screen Reader
A free, open-source screen reader for Windows that is essential for manually testing Magento's complex interactive features like the checkout flow, product configuration, and cart management that automated tools cannot fully evaluate.
Further Reading
Other CMS Checklists
Get our free accessibility toolkit
We're building a simple accessibility checker for non-developers. Join the waitlist for early access and a free EAA compliance checklist.
No spam. Unsubscribe anytime.