A Strong Guide to Shopify ADA Compliance

Shopify website owners have been relentlessly targeted in ADA website compliance lawsuits. In fact, many of our clients are Shopify small business owners who have been sued in New York and California.

Shopify owners have been sued for years and the trend is not slowing down as of August 2024.

In this guide, we’ll provide an introductory tutorial with instructions along with screenshots on how to start making your Shopify ADA Compliant (emphasis start), but let’s first explain why Shopify store owners continually get sued.

Why Do Shopify Store Owners Keep Getting Sued?

A huge chunk of our clients are Shopify owners and every single one of them has come to us after being sued over website accessibility.

Legal Reason

The general legal reason that Shopify owners are targeted is ecommerce websites are online stores and so it’s easy for plaintiffs’ lawyers to make the case that ecommerce websites fall under one of the 12 categories of places of public accommodations under Title III of the ADA.

For those of you keeping score at home, ADA Title III Sec. 12181. Definitions is the place to read:

(7) Public accommodation

The following private entities are considered public accommodations for purposes of this subchapter, if the operations of such entities affect commerce

(E) a bakery, grocery store, clothing store, hardware store, shopping center, or other sales or rental establishment;

This is why, of all of the website types on the internet, there seems to be a gravitational pull for ecommerce websites to be sued over ADA compliance.

Technical Reason

The technical reason why so many Shopify owners can’t get out of the way of litigation is because there are so many different dynamic/interactive elements located in so many different files within Shopify themes that it’s really hard to wrangle everything.

If you’re a confused small business owner, it’s not like there’s this on/off switch for accessibility that you’re missing out on. Or it’s not like there’s just a few toggle buttons and checkboxes inside the dashboard that you need to take care of.

Here’s a screenshot to illustrate what I mean.

This screenshot is specifically for accessibility options (e.g., skip to content) in your Shopify theme, but merely filling this out won’t make your website “ADA compliant,” not even close.

You really need to have an experienced developer who needs to either be proficient in accessibility or skilled enough to pickup accessibility through instructions. And this is because there’s advanced coding stuff that needs to be accounted for.

Your Shopify Theme Choice

Every single Shopify owner has probably come across the Dawn theme at some point in time. It’s the default out-of-the-box theme that you’re presented with when you sign up for Shopify.

The theme you select has a huge impact on your accessibility and how much work needs to be done. If you choose a theme that hasn’t incorporated accessibility, you’ll have much more work ahead of you.

If your theme claims accessibility and features WCAG 2.1 AA conformance, that’s a really encouraging start, but there’s no reason reason to drop your napkin and run to the buffet. You still need to make sure the claims aren’t just there for the sale and everything’s hollow underneath the surface.

It’s kind of like those brand new apartments that look super nice and say they have all sorts of amenities, but as soon as you live there a month you realize that the dog park isn’t going to be built for months, the walls are paper thin, and the dishwasher doesn’t really wash anything.

Anyway, your theme’s accessibility is crucial, but it isn’t everything. Here’s why.

In a vague way, this kind of answers the question why Shopify doesn’t do more in the form of out-of-the-box accessibility: there are a lot of various themes being used and they’re not really policing accessibility.

Well, I suppose you can say they’re policing accessibility in a very lightweight way. Like Lulu Lemon token rental security guard kind of way.

Here are the Shopify theme accessibility rules straight from the horse’s mouth:

Theme Store Requirements

All themes must meet all of the following requirements to be published on the Shopify Theme Store. If your theme is missing any of the requirements in this list, then your submission will be rejected and you will need to make further changes to your theme before it can be resubmitted.

5. Lighthouse performance and accessibility

Themes must have a minimum average Lighthouse performance score of 60 across the theme’s product, collection, and home page, for both desktop and mobile. Tests are run using a benchmark dataset.

Themes must have a minimum average Lighthouse accessibility score of 90 across the theme’s product, collection, and home page, for both desktop and mobile. Tests are run using a benchmark dataset.

Not that it really matters, but is it 60 or is it 90? You can read the Shopify theme accessibility requirements for yourself and see if you can figure out why they just repeated the paragraph a second time with 90 instead of 60.

But they could have said 100 and it wouldn’t make a difference.

Google Lighthouse is a light automated accessibility scan that flags a very limited subset of accessibility issues. And just like all scans, it flags issues non-conclusively which means even of the issues that scans flag, they still can’t catch some things.

It doesn’t matter whether you use Google Lighthouse, WAVE, AXE, PowerMapper, or any other popular scan (checker), none are going to tell you how to make your Shopify website “ADA compliant.”

They’re a very nice tool to start with and we always recommend getting your WAVE errors down to zero, but that’s only a start.

So to recap, requiring an average Google Lighthouse score of 60 or 90 means very, very little. Sure, it can help accessibility a little bit. But by no means does this mean you can pick up a theme off the street and think your website is “ADA compliant.”

Customizing Your Shopify Theme

Even if you were to cherry pick the saintliest of themes that had perfect WCAG 2.1 AA – or even better, WCAG 2.2 AA conformance, any customization you do or any content you upload can easily introduce accessibility issues that could lead to a lawsuit.

Going with the classic alt text example, let’s say you upload product images, but don’t add alternative text or mark non-meaningful images as decorative, you would introduce accessibility issues by doing so.

And the same possibility can happen by relying upon store apps, integrating a newsletter, adding new custom features, and so on.

How Do You Make Your Shopify Theme Accessible?

You have to have everything in place in the easy settings options and then you have to ensure that everything is coded accessibly.

That second part is not for the feint of heart because, as we’ve said, there are a lot of files and a lot of code to get through. Let’s cover some of the accessibility considerations as you add products and fix the backend of your Shopify website.

Adding a New Product

Starting off easy, we can make several accessibility considerations just when adding a new product to our store:

• Descriptive title
• Alternative text for images
• Closed captioning for videos
• Audio descriptions for videos
• Subheadings
• Descriptive anchor text for links

There can be more, but these items are what we’d focusing in on when adding a new product.

How to Edit Your Theme’s Code

Next, let’s jump straight into the hard part: editing code in the various files that serve as the foundation to your theme.

There are a few ways to get to the actual code, but the one shown in the screenshot is we’re going to the Shopify dashboard and under the Sales channels category, we’re going to Online Store and then themes shows up as a sub category along with blog posts, pages, navigation, and preferences.

We’re going to click on themes and then we’ll see whatever our current theme is featured. For the purposes of this guide, we have the Dawn theme set. And now we go to customize and we can choose the edit code option from the pop up.

And now you’ve arrived into flavor country. This is where the heavy duty, Ford truck accessibility work goes in and ADA website demand letters are sent or never written.

On the screen shot, we have several tabs of important Shopify sections open such as:

• footer.liquid
• main-product.liquid
• page.liquid
• main-search.liquid

And the list goes on. The current file being edited is main-product.liquid. Some of the main accessibility considerations here will be:

• semantic HTML
• programmatic form field labels
• name, state, role, and/or value for interactive elements
• keyboard navigability

But we’re going to have to go through all of the files with accessibility implications for our store and make sure everything is coded correctly.

And when you consider that there are 5 billion Shopify themes, it now makes more sense why there isn’t a giant, universal tutorial on how to make Shopify websites ADA compliant.

The good news is we’ll now tell you the technical standards and broad accessibility considerations you need to keep in mind and implement when improving your theme’s accessibility.

By the way, we have a course specifically designed to prevent ADA website lawsuits that goes into detail on how to find issues and fix them. Learn more about our ADA Compliance Essentials course.

WCAG 2.1 AA

Everything starts with the Web Content Accessibility Guidelines (WCAG). These are the technical standards that we reference for how to make a website accessible. And by no coincidence, they’re also a best practice for ADA website compliance.

But let’s put WCAG 2.1 AA into practice in terms of what the success criteria mean for Shopify accessibility. Here are most of the key accessibility considerations you need to account for (we’ve left out some WCAG success criteria that don’t usually apply to Shopify websites).

Note: WCAG 2.1 AA is comprised of 50 success criteria or requirements for conformance. Think of success criteria as things to do for accessibility.

Shopify Accessibility Checklist

Inside your Shopify dashboard, you not only have full control over your content, but you have full code access. This is a huge benefit to using Shopify as an ecommerce platform.

No, Shopify doesn’t have accessibility integrated into the platform, but with some website builder platforms, you don’t even have the ability to make your website fully WCAG 2.1 AA conformant.

Given that you have full editorial control with Shopify, here are many of the accessibility considerations you need to put into place (or make sure already exist). Note that these are not specifically WCAG 2.1 AA success criteria, but, rather, think of them as the practical explanation of many of the success criteria.

Second note: the Web Content Accessibility Guidelines can be quite technical and layered so this list by no means is meant to cover all of the details and exceptions.

Use of Semantic HTML

• Purpose: Semantic HTML helps screen readers and other assistive technologies understand the structure and navigation of your website.
• Implementation: Use headings to indicate the main topic and sub topics of a page. Use semantic bulleted lists rather than dashes. Use appropriate HTML tags like <header>, <footer>, <main>, <nav>, and <article>. For interactive elements such as buttons or links, ensure you use <button> or <a> tags instead of non-semantic <div> or <span> tags.

Alt Text for Images

• Purpose: Alt text helps users who cannot visually see images understand what meaning they convey. Remember, for decorative images, you should leave the alt attribute blank – unless the image is linked.
• Implementation: Every image on your Shopify site should have a concise and descriptive alt attribute. For example, <img src="example.jpg" alt="Detailed description of the image's context">.

Keyboard Navigability

• Purpose: Ensures users can navigate your site using a keyboard, particularly important for those with motor disabilities.
• Implementation: All interactive elements should be accessible by tab keys. Use tabindex to manage focus among interactive elements. Regularly test keyboard navigation to ensure all content is accessible.

ARIA Attributes for Accessibility

• Purpose: ARIA (Accessible Rich Internet Applications) attributes help provide additional information to screen reader users.
• Implementation: Use ARIA roles and properties to enhance accessibility, especially for dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies. For example, aria-label, aria-hidden, and aria-live can be crucial.

Ensuring Sufficient Contrast

• Purpose: Text and background should have enough contrast so that text is readable by users with visual impairments.
• Implementation: Use tools like the WebAIM Contrast Checker to ensure that text and background colors meet a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text.

Accessible Forms

• Purpose: Forms should be programmatically labeled, fully keyboard navigable, and allow for autocomplete when possible.
• Implementation: Label all form elements clearly with <label> tags. Use id on the form element and for on the label for association. Ensure error messages are also accessible and clearly state how users can fix submission errors.

Responsive and Mobile Accessibility

• Purpose: Your website should adapt to and perform well on different devices, displays, and landscape and portrait orientation.
• Implementation: Use responsive design practices to ensure your Shopify site works well on both desktop and mobile devices. Test accessibility on mobile to ensure features like touch targets are large enough and spaced appropriately.

Link Text Purpose

• Purpose: Clear link text ensures that users, especially those with screen readers, understand the purpose of each link without requiring additional context.
• Implementation: Use descriptive link texts that provide clear information about the link’s destination or function. Avoid vague text like “click here” or “learn more.”

Error Identification and Suggestions

• Purpose: Helps users identify, understand, and correct errors easily, particularly important for form inputs and data entry.
• Implementation: Provide clear, specific error messages that appear adjacent to the relevant input fields. Use role=”alert” for dynamic error messages to make them more noticeable to assistive technologies.

Page Titles and Language

• Purpose: Clear, descriptive page titles enable users to know the page is about and. Assigning language programmatically ensures that screen readers announce the text correctly.
• Implementation: Use meaningful titles for each webpage and set the page language using the <html lang="en"> attribute (or another language) accurately to reflect the content’s language.

Skip Links

• Purpose: Skip links provide a way for users to skip directly to main content or navigation, bypassing blocks of content like repetitive menus.
• Implementation: Implement visible skip links at the top of each page that become visible when focused and link directly to the main content or primary navigation.

Headings and Structure

• Purpose: Proper use of headings and structured content helps users navigate and understand the layout and information hierarchy.
• Implementation: Use heading tags (<h1>, <h2>, etc.) to structure content logically. Ensure that heading levels are not skipped, which can confuse screen reader users.

Customizable Text Size and Spacing

• Purpose: Allowing users to customize text size and spacing ensures readability for those with visual impairments.
• Implementation: Use relative units (like ems or percentages) instead of pixels for font sizes and spacing to ensure that layout and text remain scalable and responsive.

Consistent Navigation

• Purpose: Consistency in navigation helps users learn and remember ways to navigate your site, reducing confusion and cognitive load.
• Implementation: Keep navigational elements consistent in location and style across all pages. Repeating your main navigation menu in the same order at the same place on every page helps orientation.

Multimedia Control

• Purpose: Control over multimedia elements prevents automatic playing that can be disruptive or make navigation difficult.
• Implementation: Provide controls for any media that starts automatically, allowing users to pause, stop, or adjust the volume. Ensure that controls are accessible via keyboard.

Color Blindness Considerations

• Purpose: Ensuring that information is not conveyed by color alone benefits users who are color blind.
• Implementation: Use text, patterns, or shapes alongside color to convey information. Test your site’s color scheme with a color blindness simulator to identify potential issues.

Focus Indicators

• Purpose: Focus indicators enhance keyboard navigability by clearly showing which element has focus.
• Implementation: Ensure that all interactive elements have a visible focus indicator, such as a border or background change. Avoid CSS that removes outline on focus unless replaced with another clear indicator.

Zoom Text Compatibility

• Purpose: Ensures that users who need to enlarge text to read it can do so without losing content or functionality.
• Implementation: Design your site so that it remains functional and visually coherent when text size is increased up to 200%. This includes avoiding fixed-width containers and using responsive design principles.

Logical Tab Order

• Purpose: A logical tab order facilitates navigation for users who rely on keyboards.
• Implementation: Organize the HTML structure so that the tabbing order follows a logical and intuitive sequence, matching the visual layout of the page.

Live Content Announcements

• Purpose: Users who rely on screen readers need to be aware of content that updates live on the page.
• Implementation: Use ARIA live regions to ensure updates (like live feeds or status changes) are announced to screen readers without requiring a page refresh.

Closed Captions for Videos

• Purpose: Closed captions provide a text-based representation of all auditory information in videos, making content accessible to individuals who are deaf or hard of hearing.
• Implementation: Include closed captions for all video content on your site. Ensure that captions accurately reflect spoken words, sound effects, and other relevant audio cues. Captions should be synchronized with the audio and available through a toggleable player control.

Audio Descriptions for Videos

• Purpose: Audio descriptions offer additional narration for visual information in videos, assisting those who are blind or have low vision in understanding visual content that isn’t conveyed through the main audio.
• Implementation: Implement audio descriptions that describe significant visual details not explained by the main audio. These descriptions should fit into natural pauses in the audio track. Provide an option for users to turn audio descriptions on or off as needed.

Accessible Modal Dialogs

• Purpose: Modal dialogs (i.e., pop-ups) must be accessible, ensuring that users can interact with them effectively.
• Implementation: Ensure that when a modal is open, focus is trapped within it until it is closed, and that screen readers announce its appearance and content. Provide clear controls for closing the modal.

How Do You Make a Shopify Website ADA Compliant?

Now that we’ve gone through our Shopify accessibility checklist, you have an excellent idea of what you need to account for in terms of accessibility.

But how exactly do you make your Shopify website ADA compliant?

And what clients really mean when they ask us this question is, how do I prevent being sued or receiving a demand letter?

How Do You Prevent a Shopify Accessibility Lawsuit?

There are 15 accessibility issues that are claimed over and over again in ADA website complaints filed in court by the 30 most active plaintiffs’ law firms in this space. You need to fix these issues first.

Not only this, but you need to focus on your 5 most important pages or page layouts first and then continue to the next 5.

Because DIY website accessibility can take multiple months, you need to prioritize and fix these first.

The beauty is as you’re genuinely improving your accessibility but you’re doing so in a strategic way so that you lower your risk of an ADA website lawsuit as you fix the issues.

Most digital accessibility companies either don’t know this or they have an idea but won’t tell you the direct approach; many companies are focused on selling you a scan or some other software that you don’t need.

Our ADA Compliance Course tells you exactly what to do:

• The exact order of how to prioritize the issues
• how to find the issues
• how to fix the issues
• code examples to use as a model when remediating

You can learn more about the course at ADACompliance.net.

What is the Law for Website Accessibility?

The law is technically unclear because Title III of the Americans with Disabilities Act (ADA) doesn’t explicitly state what is required for websites. However, the Department of Justice’s stance is:

Even though businesses and state and local governments have flexibility in how they comply with the ADA’s general requirements of nondiscrimination and effective communication, they still must ensure that the programs, services, and goods that they provide to the public—including those provided online—are accessible to people with disabilities.

ADA.gov Web Accessibility Guidance

And given that the Title III explainer on ADA.gov states that, “businesses, including nonprofits, that serve the public (also called public accommodations) include” shops among a list of other private entities, the DOJ’s stance implicitly requires ecommerce websites to be ADA compliant.

Here is a list of other places of public accommodation that are covered by Title III:

• Retail stores
• Restaurants
• Hotels/motels
• Shops
• Movie theaters
• Private schools (including housing)
• Doctors’ offices and private hospitals
• Day care centers

Moreover, practically, it’s plaintiffs’ lawyers that have taken advantage of this stance to sue website owners over technical accessibility issues, even though some of those issues may not even constitute a barrier to access.

Nevertheless, WCAG 2.1 AA is being applied very strictly against website owners, many of which use Shopify.

Will a Shopify App Make My Website ADA Compliant?

No, none of the accessibility apps in the Shopify App Store will make your website ADA compliant. Nor will they stop lawsuits. In fact, some plaintiffs’ lawyers target websites with apps or plugins installed because that almost always means the website owner hasn’t manually remediated their website.

Will a Widget Make My Shopify Website ADA Compliant?

No, no accessibility widget is a “solution” for WCAG 2.1 AA conformance or ADA compliance. Widgets are basically another reference for apps and plugins and they don’t stop lawsuits or make your Shopify website ADA compliant.

Are There Any ADA Compliant Shopify Themes?

According to a reply of a post, Is Dawn 5.0 theme ADA compliant?, in the Shopify discussion forum, a Shopify staffer writes:

At this time, Shopify’s free OS 2.0 themes (including the Dawn theme), paired with Checkout, is Shopify’s most ADA compliant offering.

Shopify Checkout has gone through a full audit and remediation project to meet WCAG 2.1 AA. Remaining issues are still being addressed. Checkout’s accessibility compliance level is high and continues to improve with time.

Shopify’s free OS 2.0 themes are recommended as they have gone through a full audit + remediation process to meet the WCAG 2.1 AA standard. This means the theme’s design and code do a lot of heavy lifting in creating an accessible experience by default.

Shopify Staffer

However, two replies refuted this claim:

Is Shopify compliant? I have found issues with the Dawn theme in regards to contrast because of the theme’s inherent rgb variables. As well as issues with ARIA and redundant links in the collections feeds. These are all things SHOPIFY should be responsible for fixing. Non-compliance puts clients (esp. in the US at risk for lawsuits).

Fangirlstar

I have found these same issues to be non-compliant and am dealing with legal issues surrounding these problems which must be coded out by a PAID “expert”. Absolutely unbelievable that shopify is offering themes that are essentially illegal for clients to use! If anyone can direct me to affordable solutions I would greatly appreciate it.

BusStop

We’re sure some themes are developed with accessibility and ADA compliance in mind, but we would need to audit the theme before declaring it WCAG 2.1 AA conformant out of the box.

The reality is even if theme developers have the best of intentions, they may still be learning about accessibility and not know accessibility issues exist. Also, some digital accessibility companies return poor quality audits which means they miss many or significant accessibility issues.

Additionally, many digital accessibility companies will not remediate or fix websites so the work gets sourced out to other contractors. Not only is this process disjointed, but the remediation teams can return poor quality work as well and miss fixes.

Also, keep in mind, even if a theme – Shopify, WordPress, or otherwise – is fully WCAG 2.1 AA conformant out of the box, you can introduce new accessibility issues by:

• editing the code
• uploading or adding new content
• using embeds
• using other third-party integrations such as plugins or widgets

In summary, a theme that declares WCAG 2.1 AA conformant is a much better start than one that doesn’t address accessibility, but we’d like to see documentation such as a VPAT / ACR behind the claim beyond just the claim itself. And, again, here we have to look at the provider – some accessibility providers return poor quality deliverables and miss important issues.

The website accessibility marketplace is difficult to know who the best providers are because many website owners don’t want to leave reviews and draw attention to their website. And of the reviews or testimonials that are available, many are fake or from people who receive compensation or affiliate commissions, directly or indirectly.

Is There an ADA Compliance Checker for Shopify?

Many people use the term ADA compliance checker to refer to an automated scan. Scans do not, in any way, check for ADA compliance, but they do help us instantly flag a number of accessibility issues for manual review.

And it’s always best if you have as few scan errors as possible – ideally 0 – returning for your Shopify website.

What’s important to remember about scans is that they are extremely helpful, but also extremely limited. They only flag approximately 25% of WCAG 2.1 AA success criteria for review and there are routinely false negatives where a scan can’t detect an issue even when one exists.

WAVE by WebAIM is the most popular scan as it’s beginner friendly and can even help you learn about accessibility as you go through the scan results.

AXE is another good scan that is more developer-centric.

And many people like Google Lighthouse because it returns a percentage score.

The good news is scans are free and a nice way to get started with accessibility. While scans are always nice to use, they’re also never conclusive and don’t flag most accessibility issues.

Can You Help Me with Shopify ADA Compliance Services?

Yes, Accessible.org provides the professional manual services you need to make your Shopify website ADA compliant. We offer audit, remediation, and user testing services to ensure your website is WCAG 2.1 AA conformant and follows best practices for ADA compliance.

We can also provide website accessibility certification of your Shopify store. Our user testing certification not only includes documentation of user testing, but also a video recording of the user testing session that demonstrates an accessibility professional who is blind or visually impaired and using a screen reader was able to use your website and your Shopify store is free of accessibility issues.

Our ADA Compliance Program is affordable and exactly what Shopify owners need to gain confidence and relief from lawsuits and demand letters.

Do You Offer Consultant Services for Shopify Accessibility?

Yes, we offer consulting on Shopify accessibility and working towards practical ADA compliance. Even if you’re taking the DIY approach, consulting before you start your project can be a tremendous help. Our clients almost always learn something new and critical about ADA compliance and accessibility that they didn’t realize before hiring us as a consultant.

Related Posts

• How to Make Your Website ADA Compliant
• ADA Website Compliance Lawsuit Settlement Amounts
• How to Certify a Website as ADA Compliant
• Is 100% Perfect Website Accessibility Impossible?