Guide to Web Accessibility and ADA Compliance for Shopify

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(opens in a new tab) who live with some type of disability?

Just 3% of the internet today is accessible(opens in a new tab) 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(opens in a new tab), 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(opens in a new tab). If your website is plagued by accessibility issues like missing alt text or keyboard traps, these would-be customers may end up shopping elsewhere.

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(opens in a new tab) (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(opens in a new tab) (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 →

Several translucent browsers float over a purple to green gradient

How Can I Make My Shopify Website ADA-Compliant?

Although there are accessibility features built into Shopify’s platform(opens in a new tab), 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(opens in a new tab), 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.

5. Write Descriptive Links

Descriptive links help users understand where clicking the link will take them. Screen reader users often navigate emails by going from link to link, so providing links that make sense is an important part of the user experience.

For example, an inline link that reads “View our collection of jackets here.” can leave screen reader users wondering where exactly they’ll be taken. Instead, try writing “Click here to view our collection of jackets.”

Read More: Ultimate Guide to Accessible Web Design →

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.