Guide to Web Accessibility and ADA Compliance for Shopify

Back to blog

Guide to Web Accessibility and ADA Compliance for Shopify

Posted April 06, 2023

AudioEye

Posted April 06, 2023

A stylized image of a website with a light-blue accessibility symbol in the bottom left corner.
A stylized image of a website with a light-blue accessibility symbol in the bottom left corner.

Ready to see AudioEye in action?

Watch Demo

In this guide, we explain the importance of web accessibility for e-commerce sites, discuss the latest legal requirements, and share tips on how you can make your Shopify store more accessible.

Last Updated: April 2023

If you run a Shopify store, you probably spend a lot of time figuring out how to reach more people — and turn them into loyal customers.

But have you thought about the accessibility of your website? Or how accessibility issues like missing alt text and low color contrast can affect the one in four U.S. adults who live with some type of disability?

Just 3% of the internet today is accessible to people with disabilities. It’s a big gap that needs to be closed, but also a huge opportunity for businesses that focus on accessible design — or the practice of building sites that can be used by everyone, regardless of ability.

In this guide, we explain the importance of web accessibility for e-commerce sites, discuss the latest legal requirements, and share tips on how you can make your Shopify store more accessible.

Want to see where you stand today? Get a free scan of any URL to identify accessibility issues on your site →

Web Accessibility Is Good Business

According to a report by Statista, revenue from retail e-commerce in the United States was $856.8 billion in 2022 — more than double the revenue in 2017. By 2027, that number is projected to exceed $1.5 trillion.

Unfortunately, most e-commerce sites — including many built on Shopify — are not accessible to people with disabilities.

In 2022, AudioEye analyzed more than 3,500 websites across 22 industries to better understand the state of digital accessibility.

Almost every website we tested had accessibility issues, but e-commerce sites performed worse than most: 83% had severe accessibility issues, including the inability to view product descriptions, make a purchase, or book an appointment.

It’s not like these issues were limited to a single product image or page, either. On average, e-commerce sites had 203 issues per page — and 20% of those issues were severe enough to impact a user’s ability to complete key tasks.

A list of accessibility issues: low contrast text, missing alt text, empty links, missing input labels, empty buttons, and missing document language.

So what does that mean for businesses?

Beyond the reputational hit that can come from a web accessibility-related lawsuit, there’s also an opportunity cost to accessibility barriers.

According to one study, people with disabilities — along with their friends and family — control up to $13 trillion in disposable income. If your website is plagued by accessibility issues like missing alt text or keyboard traps, these would-be customers may end up shopping elsewhere.

“People with disabilities tend to be more loyal consumers. We will stick with companies that go out of their way to make us feel welcome.”


Maxwell Ivey | AudioEye A11iance Advocate

There’s also a clear link between web accessibility and SEO. For example, sites with clear, descriptive headings — the same kinds of headings that make navigation and comprehension easier for people with disabilities — are also easier for search engines like Google to crawl.

Related Reading: Learn what 500 business leaders said about digital accessibility in our white paper on Building for Digital Accessibility at Scale →

Why Does ADA Compliance Matter for Shopify Websites?

There are plenty of reasons for Shopify stores to prioritize accessibility. Not only is it good for business, but it’s also the right thing to do.

However, there’s another aspect of web accessibility that should not be ignored: the number of web accessibility-related lawsuits continues to rise, with 2022 setting another record for the number of claims filed in federal court.

It isn’t just large enterprise brands getting sued, either. Every business should be checking their website against international accessibility standards like the Web Content Accessibility Guidelines (WCAG).

In 2022, the Department of Justice (DOJ) published new guidance reiterating its position that web accessibility is a requirement under the Americans with Disabilities Act (ADA) — and recommended that businesses use WCAG when testing web content for accessibility.

Related Reading: Learn more about WCAG conformance and the Americans with Disabilities Act →

A collage of more than a dozen websites, with each one showing different elements on the page

How Can I Make My Shopify Website ADA-Compliant?

Although there are accessibility features built into Shopify’s platform, it’s still important to test your website’s accessibility — and conformance with WCAG.

So, how can you tell if your Shopify website is accessible, and to what degree? Here are some tips to get you started.

1. Check Your Website’s Accessibility

You can start by using AudioEye’s free website accessibility checker to scan any page on your website. Our checker runs more than 400 tests to help you identify accessibility issues on your site.

You can also manually test your site. As a best practice, we recommend that you work with assistive technology testers to better understand the user experience; however, you can also try simulating the experience yourself:

  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. Then, test all of these functions: press the Enter key to activate buttons and links, the spacebar to select or deselect checkboxes and radio buttons, and the arrow keys to change selections in open dropdowns and pre-selected radio buttons.
  2. In order to read text comfortably, some users need to be able to change the way it is displayed. This includes changing the text size, spacing, font, and color. Zoom in your browser to see if content overlaps. If it does, you may need to increase the line height or letter spacing of your site.
  3. Hover over and read the browser tab when a page is loaded. Each tab should have a unique title that clearly explains 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.

Not sure how to get started? Learn about AudioEye’s approach to expert human testing and remediation.

2. Provide Alt Text for Every Image

Alt text is a written description of an image that screen readers can read out loud — or convert to Braille — for people with visual impairments, sensory processing disorders, or learning disorders.

Done right, alt text can paint a complete picture of a website for people who cannot perceive images visually.

Unfortunately, many designers and content creators forget to provide alt text. Or they write something so non-descriptive — like an image of a menu that is simply labeled “menu” — it might as well not be there.

3. Design for Sound Off

If you have a Shopify store in 2023, there’s a good chance that video is a big part of your marketing strategy.

In HubSpot’s Not Another State of Marketing Report, a survey of marketers said that video is the top content type being produced in their content marketing programs, passing blog posts for the first time.

Whether you use video for promotional campaigns, product explainers, customer testimonials, or some combination of the three, it’s important to do it in a way that doesn’t exclude anyone. And often, that means adding captions and descriptions of visuals that help everyone enjoy your videos.

Read More: 6 Tips to Make Your Videos Accessible →

4. Help Users Navigate Your Page With Clear, Descriptive Headers

For general readability, we always recommend breaking up large blocks of content into smaller sections. However, it’s also important to remember to use headers and maintain proper header order. Screen readers will announce each header, and it can be confusing for users if you skip heading ranks.

Pro Tip: You can use formatting (like bold and italic font) to draw attention to a particular word or phrase, but you shouldn’t use it in place of proper header structure.

6. Avoid Using Color Alone To Convey Information

A common UX practice is to convey information using color, whether it’s setting a different color for links or adding a red outline to indicate errors. Unfortunately,  color differences like this can be missed by people with visual impairments.

As a best practice, we recommend underlining inline links and avoiding any kind of status update (such as an error or success message) that relies on color alone.

Want to check your color contrast? Try using AudioEye’s free Color Contrast Checker →

A stylized web browser with green checkmarks showing accessibility errors that have been fixed, next to an accessibility icon

Take the Next Step Toward a More Accessible Website

Remember: Digital accessibility is not a one-time project, or something you can fix once and forget about. Every update to a website — whether it’s adding a new banner on your homepage or uploading product photos — is a chance to accidentally introduce new accessibility issues.

For ongoing accessibility, it’s important to create an accessibility plan that includes regular monitoring and maintenance of your website.

Want to learn more? Check out how AudioEye’s solution seamlessly integrates with Shopify or get a free scan of your website to uncover accessibility issues on your site.

Ready to see AudioEye in action?

Watch Demo

Ready to test your website for accessibility?

Scan your website now.

Share post

Topics:

Keep Reading