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

In this guide, we’ll start with the practical side of making your ecommerce website accessible and ADA compliant. If you need further help, we offer high quality website accessibility services, ADA website compliance training (you can access this right now), and website accessibility certification documentation (as the result of using our services) that your website has been formally evaluated and tested and is accessible.

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 what the success criteria mean in terms of 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

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 provide 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 provide additional contexts to assistive technologies.
  • 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 accessible so that users can easily interact with them.
  • 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 site should be accessible on all devices.
  • 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.
  • 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 Recovery

  • Purpose: Helps users identify, understand, and correct errors easily, particularly important for forms 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 page titles and proper language settings help users understand context and facilitate language processing tools.
  • Implementation: Use meaningful titles for each webpage and set the page language using the <html lang="en"> attribute accurately to reflect the content’s language.
  • 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.

Shopify ADA Compliance

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.

My 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 access the course right now 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:

  • 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