Accessible360 Shopify Accessibility Guide

Accessible360 Shopify Accessibility Guide

Over the years, Accessible360 has worked with hundreds of Shopify merchants to support their move to WCAG Compliance and has even worked with the Shopify development team to help ensure a high standard of accessibility within their platform. We have helped sellers large and small, across many industries, and through this journey have learned a thing or two about making Shopify stores accessible. This article is aimed at walking through a few of the tips and tricks that Accessible360 has picked up to help you get your project started off in the right direction and begin your path to having a compliant website.

Because of the complexity of the Shopify platform, your specific path towards accessibility will depend on your Shopify plan level, checkout version implemented, and the amount of customization your store requires. For us to provide you with the best possible support along the way, we recommend using this article as a starting point in understanding the factors that might drive your path to compliance. From there, your best bet is to reach out to A360 so we can work together on developing a personalized project strategy, starting with a Live-User Audit or Design Review from our team of expert technologists.

If your team is considering next steps or when the right time to take action is (we highly recommend starting the conversation now – even if you act later!), many Shopify merchants reach out to engage support from A360 at the following stages:

  1. Their team just received a lawsuit or demand letter – nearly 50% of historical plaintiff suits for non-WCAG Compliance filed under the ADA are aimed at retail & e-commerce websites.
  2. They are looking at becoming WCAG compliant to build defensible actions against potential future litigation.
  3. Their team is thinking about a redesign or migration on to the Shopify platform.
  4. Internally, many times due to holistic brand beliefs and awareness, they simply want to do the right thing to make their website equally accessible to ALL consumers.

Shopify Plans and Capabilities

Shopify offers a few different plans with various levels of customization. It is important that you know what plan you are on and communicate that to the A360 Client Development team so we can provide an accurate scope and project plan that will set your team up for success.

Plan level Capabilities Allows checkout customizations?
Basic Shopify Basic site, catalog and checkout  No
Shopify Standard site, catalog and checkout with gift cards and reporting  No
Advanced Shopify Advanced site, catalog and checkout with gift cards, advanced reporting and calculated shipping  No
Shopify Plus Advanced site, catalog and checkout with gift cards, advanced reporting and calculated shipping  Yes
via JavaScript, HTML and CSS
Shopify Lite No site, no catalog. Only basic checkout for use from social media sales  No

Website Customizations

Shopify makes it easy for stores to make many different customizations to accommodate business, industry, and consumers’ goals or needs. This can be as simple as just showing or hiding pages or parts of pages, or as complicated as adding custom code snippets onto pages.

Most of these customizations have little to no risk of impacting the accessibility of your store, but in our experience, there are a few areas to keep an eye on. If you have made, or plan to make, customizations in any of these areas, these are great things to let our team know so we can make sure they are audited.

Customization Opportunities
Custom HTML policy pages Can be provided in the admin tools. Examples include Refund Policy, Privacy, and Terms of Service pages.
Gift wrap options / gift messages Can alter UI of the checkout process, usually in the shopping cart.
Order status (final page of checkout) Shopify allows you to provide additional code to this page, including HTML, Liquid code, and custom JavaScript.
Payment gateways You can choose to offer different payment methods like Shopify, Google, PayPal, and Amazon. Sometimes these can pull in buttons from external sources which may or may not be accessible.
Shipping options Some third-party apps can alter the shipping interface. Make sure you know which app does what!
Shopping cart page Very customizable, but likely has the same problems of the rest of the theme.
Tax calculation Very dependent on each store and their location.

Shopify Themes

Shopify allows you to use pre-built themes from third-party vendors via their Theme Store. However, most of these themes are not accessible ‘out of the box’ and can therefore introduce risk for your store when you do not perform a live-user accessibility audit to ensure compliance.

Screenshot of Shopify themes webpage

If you are considering using or starting off with a premade theme, reach out to our team to discuss implications and strategies, and to learn about your options. We are here to help, and we’re happy to provide feedback or insight on specific themes your team might be considering.

If you are planning to build a custom theme for your store, we recommend reading through this great guide provided by Shopify on theme accessibility.

3rd Party Apps

Based on our experience auditing hundreds of Shopify merchant sites, very few add-ons in the Shopify App Store are fully (or even partially) accessible. This means they can introduce risk to your store when you install them. We are confident (based on recent experience and conversations) this is beginning to change for many of the leading apps, but it will take some time for these vendors to build accessibility into their tools.

Before installing an app, we recommend reaching out to the vendor and asking about the accessibility features in place, and if they have a plan for remediation when new issues are identified. Understand the risks that the app may introduce to your store and create a plan for either escalating, working around, or accepting those risks. We strategize with Shopify merchants daily on how to best meet your business needs while also reducing your accessibility compliance risk, and would be happy to support your team on this front as well.

Screenshot of Shopify App Store webpage

Checkout Accessibility

Depending on your plan and the level of customizations your team has made, your store may be using one of two different checkout flows: edge or stable. The stable checkout flow is just a snapshot of the edge checkout flow that is refreshed every six months or so.

If you are on the Plus plan and have modified (or just opened and closed) your checkout.liquid file at any point, it is possible you are on the stable checkout flow. Otherwise you are most likely on the on the edge checkout.

Flow Notes Update Frequency
Edge Used by vast majority of stores across all plans Often – sometimes daily
Stable Used only by Plus plan stores that have modified their checkout.liquid template file. Roughly every 6 months

Checkout Accessibility

If you run your shopping experience on Shopify, you are in great hands from a platform perspective as it relates to your ability to make your site WCAG Compliant. Our team of experts would be happy to answer any and all questions your team has on strategy, building out a project plan, or even just providing you with a Free Quick Look to let you know the current standing of your site. To get started, simply fill out our contact form on this page and you will be on your way to an accessible shopping experience!

Credits:

Michele Landis as Co-Founder of Accessibility 360

Latest News

You might also like...

Recommended for you

We All Deserve Equal Access to Information

Want a live demo or consultation? Fill out the form.

  • This field is for validation purposes and should be left unchanged.