Originally Published: 04/25/2022

Considered one of the world’s leading e-commerce platforms in 2021, Magento (now Adobe Commerce) helps you create online stores and is used by hundreds of thousands of businesses, including such luminaries as Nike and Samsung. Founded in 2008, Magento continues to gain traction: In 2020, it was one of three e-commerce platforms that merchants migrated to most often.

Whether you already have a store with Magento or you’re considering a migration from a platform like Squarespace, 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 look into why accessibility is so important for e-commerce businesses. We’ll also share some tips for making your Magento site accessible to everyone, regardless of their abilities or preferences.

What Is Magento ADA Compliance?

Title III of the ADA applies to all places of public accommodation, and the Department of Justice (DOJ) has established that websites qualify as places of public accommodation. 

People with disabilities may file lawsuits against businesses that fail to provide accessible digital products. 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. Additionally, many business owners are unaware of their responsibilities under the ADA, since the law doesn’t include technical guidelines for websites.

However, the World Wide Web Consortium (W3C), which publishes standards for HTML and other internet technologies, provides the Web Content Accessibility Guidelines (WCAG), a series of robust technical rules for creating accessible websites. Read a brief history of WCAG and digital accessibility. 

The DOJ recommends testing content against WCAG’s Level A/AA requirements (called success criteria) to evaluate compliance with the ADA and other non-discrimination laws.

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.1).

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.

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 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.

1. Audit Your Website with Automated Tools

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.

AudioEye’s free Website Accessibility Checker uses powerful artificial intelligence to perform more than 400 tests and identify potential WCAG conformance issues. The scan results include the number of accessibility issues on a page, along with the severity and prevalence of each issue.

You can scan as many pages or websites as you’d like, then use the results to start making changes — but first, read on to learn the best practices of manual testing and remediation.

2. Perform Manual Audits and Fixes

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 manual testing and remediation services.

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

To troubleshoot, try manually 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.
2. Zoom in your browser to 200%. If content overlaps and is made illegible, change the browser window width. 
3. Hover over and read the browser tab when a page is loaded — each tab should have a unique title explaining the page’s purpose.
4. 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 Issue Reporting provides guidance for making fixes that actually improve the user experience — rather than checking off a box to meet a compliance requirement.

3. Make a Plan for 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 testing, monitoring, and fixes using both automated and manual solutions, helping businesses of all sizes stay accessible and ADA compliant.

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.

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.

The AudioEye solution is seamlessly integrated with Magento. Our platform tests content as the page loads and remediates many issues automatically. A dashboard provides a realtime view of your store’s accessibility, along with guidance for manual fixes and a 24/7 help desk.

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