A Guide to Magento Accessibility and ADA Compliance

Back to blog

A Guide to Magento Accessibility and ADA Compliance

Posted September 05, 2023

AudioEye

Posted September 05, 2023

A stylized web browser with a number of accessibility issues highlighted by red exclamation points, next to icons of a wrench and some gears.
A stylized web browser with a number of accessibility issues highlighted by red exclamation points, next to icons of a wrench and some gears.

Title III of the Americans with Disabilities Act prohibits discrimination against people with disabilities in “places of public accommodation,” which courts have repeatedly ruled includes websites. Here’s what businesses that build their websites on Magenta need to know about web accessibility and ADA compliance.

Originally Published: 04/25/2022

As one of the world’s most popular e-commerce platforms, Magento (now Adobe Commerce) is used by hundreds of thousands of businesses, including Nike and Samsung.

Whether you already have a store with Magento or you’re considering migrating from another platform, your e-commerce site needs to be accessible to people with disabilities — and compliant with the Americans with Disabilities Act (ADA).

In this Magento guide, we’ll discuss why accessibility is important for e-commerce sites and share tips on making your site more accessible to everyone, regardless of ability.

What is Magento ADA Compliance?

Title III of the ADA prohibits discrimination in “places of public accommodation,” which the U.S. Department of Justice (DOJ) has repeatedly stated includes websites.

People with disabilities can file lawsuits against businesses that fail to provide accessible digital experiences, including websites and mobile apps. The number of web accessibility lawsuits continues to rise each year, and e-commerce websites are frequent targets.

Why? For starters, online stores generally have poor accessibility. In 2023, AudioEye scanned thousands of retail sites as part of our Digital Accessibility Index and found that online retailers performed worse-than-average in key areas like image and form accessibility — impacting people’s ability to compare products or fill out a checkout form.

To help retailers deliver accessible experiences to every shopper, the World Wide Web Consortium (W3C) created the Web Content Accessibility Guidelines (WCAG), a series of technical rules for creating accessible websites.

Do E-commerce Websites Need to be ADA-Compliant?

To stay compliant with the ADA and other non-discrimination laws, the DOJ recommends testing content against WCAG’s Level A/AA requirements(also known as success criteria).

The bottom line: To create an ADA-compliant Magento store, you’ll need to test against WCAG. The best practice is to use the latest version of the guidelines (currently, WCAG 2.2).

If you’re feeling overwhelmed, don’t worry. WCAG enforces the best practices of web design, and testing your content is fairly straightforward. First, you’ll need to set a conformance goal — and to do that, you’ll need to understand how WCAG is organized.

Understanding WCAG Levels

WCAG includes three levels of conformance (“conformance" means voluntarily following the guidelines): 

  • Level A: A basic level of accessibility. Level A websites are usable for most people with disabilities, but may not provide a great experience for users.
  • Level AA: A reasonable level of accessibility. Level AA includes all Level A success criteria and adds additional requirements.
  • Level AAA: The most strict level of accessibility. Some types of content cannot meet all Level AAA requirements. Level AAA includes all Level A and Level AA success criteria. 

If your Magento store fails WCAG’s Level A requirements, you’ll need to address those issues as soon as possible. As you develop your accessibility strategy, you should aim for full conformance with Level AA — and wherever possible, fulfill Level AAA success criteria to provide the best possible user experience.

For a more detailed description of WCAG’s levels, read: WCAG 2.1 Compliance, Explained.

Examples of WCAG and ADA Compliance

So, what does ADA compliance look like? If you need inspiration, here are 10 examples of accessible, compliant websites. 

The purpose of the ADA is to ensure that consumers with disabilities enjoy the same access to goods and services as consumers without disabilities. WCAG uses a principle-oriented approach to help website owners reach that goal. 

An accessible Magento store will avoid the common barriers that impact internet users with disabilities: 

  • Missing image alternative text (also called alt text), which may prevent users with visual disabilities from understanding content. For example, an image of a t-shirt should include an accurate description of the t-shirt (including relevant details like colors and logos) so that users with visual impairments can decide whether to purchase the product.
  • Poor keyboard accessibility, which affects people who use a keyboard alone (with no mouse) to browse the web. 
  • Missing form labels and instructions, which may prevent some users from completing your store’s checkout process. 
  • Missing captions and transcripts for video content, which may impact users with sensory disabilities. 
  • Poorly structured pages with improper semantic HTML, which can make navigation difficult and frustrating for people who use AT. 
  • Poor color contrast, which may make text unreadable for people with color vision deficiencies.

This is not a comprehensive list of ADA compliance issues — to improve compliance, you’ll need to test against all WCAG Level A/AA success criteria. Below, we’ll explain how to start testing your content.

Image of a browser with gears, keyboard, and magnifying glass with steps on how to make a website more accessible.

How to Make Your Magento Website Accessible

Most e-commerce platforms, including Magento, start you with basic accessibility features and offer accessibility guidelines. However, you’ll need to consider your actual users — if you don’t spend some time thinking about accessibility, it is unlikely your website will be fully compliant or provide a positive user experience to someone navigating your page using assistive technology (AT). 

For example, Adobe’s developer guidelines recommend providing text alternatives for non-text content. Image alternative text is crucial for accessibility, but writing accurate text requires some judgment: You’ll need to ensure that each description is descriptive enough to explain the function of the image.

Additionally, adding animations, installing certain Magento plugins, or introducing pop-up offers could impact accessibility. Even if you follow Magento’s guidelines, you may not achieve compliance unless you test your online store against WCAG.

By auditing your website — and thinking carefully about your users when creating new content — you can avoid the common mistakes that impact users with disabilities.

Audit Your Website

There are two basic ways to test web content for accessibility:

Automated tests check content against WCAG using simple pass-or-fail rules. Automated testing is ideal for finding barriers on large amounts of content, but cannot identify certain types of issues.

Manual testing is performed by a human (ideally, a person who has experience with screen readers and other AT). Manual tests are more time-consuming, but they’re essential for evaluating WCAG requirements that rely on human judgment. 

To audit your e-store for accessibility, you should use a combination of automated and manual tests. For detailed step-by-step guidance, read: A Quick Guide to Digital Accessibility Audits.

Manually Audit and Fix Issues

Testing for accessibility and usability involves using the same technology as your users. Ideally, manual tests are performed by an experienced AT user. Read about AudioEye’s expert testing and remediation services.

However, you can perform some basic tests to find potential usability issues (and gain crucial perspective about how your users experience your website).

To troubleshoot, try using, testing, and validating your website’s content in different ways, including: 

  1. Navigate using only the keyboard. The Tab key should jump your cursor focus top to bottom in logical order down the page, highlighting each interactive element. Now, test all of these functions: the Enter key to activate buttons and links, the space bar to select or deselect checkboxes and radio buttons, and the arrow keys to change selections in open dropdowns and preselected radio buttons.
    Zoom in your browser to 200%. If content overlaps and is made illegible, change the browser window width. 
    Hover over and read the browser tab when a page is loaded — each tab should have a unique title explaining the page’s purpose.
    Enter incorrect data on your forms to check if the error messages are clear and help fix the problem. Make sure you’re using an indicator other than color to denote errors.

Before fixing any accessibility issue, it’s important to understand how it affects your customers. AudioEye’s Active Monitoring and Expert Reporting provides guidance for making fixes that actually improve the user experience — rather than checking off a box to meet a compliance requirement.

Monitor Ongoing Accessibility of Your Website

Here’s the thing about accessibility: It’s not a one-time project.

Accessibility is an ongoing effort, which means every time you change your website, you need to check it for accessibility.

If you’re regularly updating your Magento site with new content, you’ll need to come up with an accessibility plan that builds in regular monitoring and maintenance. 

Some tips for building your accessibility strategy:

  • Publish an accessibility statement. Your accessibility statement outlines your goals and provides your customers with ways to report accessibility barriers. 
  • Test your website whenever content changes. E-commerce websites often update every day — if that’s the case, you should test content daily with automated tools.
  • Communicate the importance of accessibility to your entire team. Developers, designers, and content writers play important roles in creating inclusive content. 

AudioEye offers ongoing automated testing and remediation along with expert custom testing from members of the disability community, helping businesses of all sizes stay accessible and ADA compliant.

Stylized web browser surrounded by people icons.

The Importance of Web Accessibility

Customers on your website want information — and they want it right away. Time is precious for everyone, so getting the right information in front of a prospect ASAP is critical to completing a sale. 

The same logic applies to shoppers accessing your site using assistive devices. Many blind or visually impaired shoppers use screen readers to navigate websites and read webpage content aloud using text-to-speech software. 

Without accessibility features on your website to make this process as seamless as possible, people with disabilities will click away and move on to a competitor.

And it’s also important to remember that disabilities affect everyone. When your brand embraces inclusive design, your brand benefits.

Benefits of WCAG Compliance

The ecommerce market is competitive, and prioritizing web accessibility is an excellent way to set your business apart from the competition. When you show your users that you care about their experiences, you build a stronger brand — and following WCAG benefits every user, regardless of their abilities. 

If you’re still wondering whether digital accessibility is worth the effort, consider the following: 

  • The best practices of accessibility overlap with the best practices of search engine optimization (SEO). Accessible e-commerce stores are well-positioned to perform well in search and attract more customers.
  • Many accessibility improvements benefit all users. For example, WCAG’s color contrast requirements ensure that content is readable for people with color vision deficiencies — but appropriate contrast will also make content readable for people who view your website in bright natural light.
  • An accessible checkout process can decrease shopping cart abandonment and improve other key e-commerce metrics.

In the U.S., consumers with disabilities control about $490 billion in discretionary income. If you’re ignoring those consumers, you’re missing an opportunity.

Stylized web browser next to pop up box that reads 'top automated fixes' with accessibility icon over it.

Accessibility is Smart Business

The digital world never stops evolving. Opening your digital doors to all users is not just a standard operating procedure — it’s crucial to your future success.

AudioEye seamlessly integrates with Magento. Our platform tests content as the page loads and remediates many issues automatically. A dashboard provides a real-time view of your store’s accessibility, along with guidance for custom fixes and a 24/7 help desk.

By combining industry-leading automation with expert guidance, we believe that our solution provides the best path to digital compliance. Try it for free or schedule a demo.

Ready to test your website for accessibility?

Scan your website now.

Share post

Topics:

Keep Reading