Magento Accessibility Checker

Accessibility on Magento

Magento Open Source is the free, self-hosted edition of Magento. Because you host and maintain it yourself, accessibility depends on the theme you run, the extensions you install and how current your version is. Many stores still use the default Luma theme or a child of it, and some have moved to Hyvä or a fully custom front end.

Magento storefronts use a lot of JavaScript to draw swatches, the mini cart, layered navigation and the checkout. When that script misses a label or a focus rule, the result is a store that looks fine and does not work for keyboard or screen reader users.

WebAIM’s annual analysis of the top one million home pages finds detectable WCAG failures on the vast majority of them, with low-contrast text, missing alternative text and missing form labels among the most common. Online stores are not an exception. (opens in a new tab, source: WebAIM Million)

Common Accessibility Issues on Magento Sites

• Swatch options

  Configurable product swatches are often built from elements that cannot be reached with Tab, or that have no text describing the color or size they represent.

• Layered navigation

  Filter links and sliders on category pages can lack names and state, and the product list that changes after a filter is applied is not announced.

• Checkout step forms

  The multi-step checkout is drawn by script, and field errors or step changes can appear without any announcement to assistive technology.

• Product images and content

  Catalog imports and bulk uploads often leave image alt text blank or fill it with file names, and CMS blocks use styled text instead of real headings.

• Extension modals and popups

  Newsletter popups, cookie banners, review and wishlist extensions each add their own dialogs, and each can trap or lose keyboard focus.

How AccessBell Scans Your Magento Site

1. Enter any public page. Paste the address of a page on your Magento site into the scanner above. There is nothing to install: no plugin, no code snippet and no login.
2. We load it in a real browser. AccessBell opens the page in headless Chrome and runs its scripts, so it tests what your visitors actually see, including content added by your theme, apps or plugins.
3. We run the WCAG rules. The open-source axe-core engine checks the page against the standard you choose, and every result is mapped to the WCAG success criteria it affects.
4. You see what is wrong in seconds. The free scan lists every issue it finds, ranked by severity, with the WCAG criteria each one fails. Start a free trial to get the failing code and the fix for each one. Our methodology explains exactly what runs and what still needs a person.

What You Get From the Free Scan and the Free Trial

Free, with no account

• 63 automated rules for WCAG 2.2 Level AA, or presets for WCAG 2.1 AA, the ADA, Section 508 and EN 301 549
• Every issue found on the page, ranked by severity from critical to minor
• The WCAG success criteria each issue fails, which you can look up in our WCAG library

With a 3-day free trial

• The failing HTML, so you can find the element in your Magento editor or code
• How to fix each issue, with a corrected example
• Every page scanned, up to 500 per domain, with daily monitoring and an email when something breaks
• A list of checks that need a person to review, so nothing is missed
• A dated record of your scans and fixes

Start 3-day free trial

How to Fix What the Scan Finds

1. Fix theme issues in a child theme, so they survive Magento upgrades, rather than editing core or vendor files.
2. Use a bulk update or import step to fill in product image alt text, so you fix the whole catalog instead of one product at a time.
3. Rescan after each upgrade, patch and extension change. Upgrades are where regressions most often come from on a self-hosted store.
4. Run a free scan above on your homepage and a few key pages, fix issues starting with critical and serious, then rescan to confirm.
5. For ongoing protection, AccessBell Pro monitors up to 500 URLs per domain every day and alerts you when a theme, app or plugin update introduces a new issue.

Related Guides

• WCAG 1.4.3 Contrast (Minimum) Explained in Plain EnglishWCAG 1.4.3 Contrast (Minimum) explained simply: the 4.5:1 and 3:1 ratios, what counts as large text, the exceptions, fixes and how to test your colors.
• WCAG 1.1.1 Non-text Content Explained in Plain EnglishWCAG 1.1.1 Non-text Content explained simply: how to write alt text for every kind of image, icon, chart and CAPTCHA, with code examples and a test routine.
• Keyboard Accessibility TestingA practical guide to keyboard accessibility testing: what to check, the exact keys to use, and a component-by-component reference table mapped to WCAG.
• WCAG Success Criteria LibraryLook up any success criterion the scan flags, in plain language.
• Magento ADA Compliance CheckerThe same scan with the ADA preset, plus the ADA risks specific to Magento sites.
• Free Accessibility Statement GeneratorPublish a statement once your Magento site's known issues are fixed.

Magento Accessibility — Frequently Asked Questions