The annual WebAIM Million survey results are out! The WebAIM Million survey runs automated accessibility testing on the top million website homepages, and analyzes the results based on several dimensions, including countries, industries, and sectors. While there has been significant improvement in the accessibility of certain categories of sites, including government, personal finance and social media; e-commerce is in last place, with an average increase of 40% in detectable accessibility errors.
With the impending European Accessibility Act (EAA) deadline of June 2025, this is disappointing news, and small business owners face a veritable minefield trying to figure out what they need to do in order to comply with regulations. With thousands of Euros in fines on the line, accessibility should be a high priority for all merchants in the EU or those targeting EU customers.
The EAA is new, but many other non-European countries also have legal requirements that regulate accessibility, and merchants who do not consider it not only deliver a subpar experience to their customers, they also face increased legal risk.
The vast majority of merchants are not building a website completely from scratch, they are turning to e-commerce platforms to take care of the technical component. Many services advertise their ease-of-setup, all you have to do is bring your content and ideas, and the platform will take care of the rest for you. As a result, many merchants are shocked when they receive an accessibility lawsuit, wondering "Shouldn't the platform take care of this?"
While the end-result of using a platform like Shopify is a single store, the code that makes up that storefront often comes from different places. The typical store consists of a 'theme', which supplies the basic front-end functionality of the storefront. A theme can be installed through Shopify's official Theme Store, or it can be downloaded or developed by third-parties unconnected to the Theme Store. On top of the theme, a merchant may choose to add optional 'apps', either through the app-store or third parties. Apps can either be merchant-facing or customer-facing. Just recently, Shopify has added a feature for adding AI-generated blocks into the theme editor, where a merchant can enter a prompt and it will spit out the corresponding code.
All these sources of code have different minimum levels of accessibility. To briefly summarize:
- First-party Shopify themes (created by Shopify) are traditionally held to a high standard. It is fully possible to build a Web Content Accessibility Guidelines (henceforth, WCAG) 2.2 AA compliant store with pre-Horizon themes (I've written about first-party Shopify themes in detail previously!) However, with the launch of new Horizon themes, there are opportunities to improve in critical areas such as missing focus styles and auto-playing moving/animated areas with no ability to pause/stop/hide them.
- Themes in the Theme Store have some accessibility guidelines they must comply with before being accepted on the store
- Themes installed through other parties are not monitored by Shopify and have no minimum accessibility requirements
- Apps have accessibility recommendations they can follow, but they also have no strict accessibility requirements, and there are no requirements for the code generated on storefronts
- AI-generated code is non-deterministic (ie. gives a different result each time), so the accessibility may vary wildly. Shopify has not published any material on minimum accessibility standards for AI-generated blocks or what quality checks occur before the blocks are injected into a merchants stores.
Having recently gone through the process of submitting a Shopify theme myself, I thought it would be helpful to provide greater awareness of the specific requirements that Shopify has for the Theme Store, as well as ways to find an accessible Shopify theme. Many themes from the store advertise that they are accessible because they meet Shopify's minimum requirements, but how far does that get you in terms of an accessible store? Let's find out!
The Numbers
Most e-commerce sites should be striving for a minimum of WCAG 2.2 Level AA compliance. If I've counted correctly, there are 31 Level A criteria and 24 Level AA criteria, for a total of 55 criteria that we need to worry about. If we add up the total WCAG success criteria represented by Shopify's requirements, you get a total of 9-12 criteria, depending on how generously you choose to interpret them.
For a rough estimate of how much WCAG coverage you get from Shopify's requirements, we can divide those numbers by 55 to get around 16% - 22% coverage. While I do have to give Shopify credit for picking high impact criteria that will affect all stores, it is estimated that automated accessibility testing tools can catch between 30 - 50% of errors, which provides room to strengthen the requirements without requiring manual testing of every theme.
Those familiar with accessibility will know that accessibility is a continuous process. As new, more complex features are added to a codebase, it's easy for regressions to happen. I hope that Shopify will continue to test themes as new features are added in order to ensure that themes don't backslide once they've been accepted to the store.
As a result, the overall picture for theme accessibility has a lot of room for improvement. It's certainly better than an ecosystem with no requirements at all, and a much greater percentage of themes would pass the tests I initially did in 2020,so progress is being made! It is a great thing that there are now tangible, testable requirements, particularly focusing on making sure users can complete that critical add to cart flow. However, the European Accessibility Act does require additional requirements even beyond WCAG, so I'm looking forward to a future where the requirements become more stringent.
At the time of writing, 215 out of 242 Shopify themes target the EU by featuring translations for European languages (including French, Italian, German and Spanish). Shopify has a huge recent focus on internalization and supporting multiple markets regardless of the stores headquarters, it would be a missed opportunity to not continue to lead in this space by ensuring that merchants can confidently sell in the EU without being concerned about fines or lawsuits.
How Can I Find An Accessible Theme?
The big question remaining is, if the Shopify theme store listing doesn't provide information about accessibility by default, how can we find accessible themes? Until there is a way to surface this information, merchants must verify the accessibility of the themes they purchase themselves. The remainder of this article will serve as a guide to accessible procurement. While it was written with themes in mind, the following tips can apply to any software.
Look for a VPAT/ACR
A Voluntary Product Accessibility Template (VPAT for short) is a template that vendors can fill out with information about how their product meets different accessibility standards, including WCAG. The completed template is called an Accessibility Conformance Report (ACR), but this distinction is often not well understood so you may need to search for both. Major organizations with a commitment to accessibility would likely have these for their products.
When evaluating an ACR, reports completed by the organization itself should be taken with a grain of salt, as well as reports that show perfect passing scores without any qualifying notes. Although the basics of accessibility are simple, complex user interfaces/software will likely need to make tradeoffs in some areas, and these should be noted. An ACR third-party completed by a reputable person or organization in the field of accessibility is most ideal.
Look for an accessibility statement
An accessibility statement is a way for an organization to declare how they support and enforce accessibility. While these are legal documents that are often produced by a legal team, it can be fairly easy for even a small organization to produce a statement using existing templates. An accessibility statement is also required for businesses under the European Accessibility Act.
Reach out to the team behind a product
Even if an organization doesn't have public facing material on accessibility, how they respond to inquiries about accessibility can be helpful, even if no concrete information is provided. If they don't take your inquiries seriously or give vague answers, it doesn't bode well for the accessibility of the product. A good answer may include a list of concrete steps a vendor is taking to ensure accessibility, and may include advice or resources on how to best implement it accessibly.
Run an automated scan
The good thing about themes on the theme store is that they have public demo stores. Not all software products provide a public facing demo link, so it's good to take advantage of this. Running automated scans from tools such as IBM Equal Access, axe DevTools or WAVE Web Accessibility Evaluation Tool can provide useful insights. As mentioned previously, automated tools only catch a percentage of accessibility issues, and can sometimes return false positives, but I would personally be wary if a page had an issue count in the triple-digits.
A clean score here doesn't mean too much – it's not uncommon for developers to aim for a passing score on these tests just to avoid drive-by lawsuits.
Check out the demos
Even if you're not a professional accessibility tester, there are still a few things even someone with no technical knowledge can evaluate. One such criterion is 2.2.2. Pause Stop Hide. There is more detail within the criterion, but to put it very simply, non-essential animated or moving content that appears with other content and lasts for more than five seconds should allow the user to pause, stop or hide it. You can look at a site with marquees, carousels or autoplaying background video, and if they don't provide a mechanism to pause, stop or hide it, that should be a red flag.
This is a criterion that is difficult to test with automated testing tools, so it can provide some extra context without significant effort.
Hire a consultant
Choosing a theme can be a huge, early decision for any new store. When a merchant works with a developer or a designer, it's really common to loop them into this decision. Accessibility folks often talk about 'shifting left', about moving accessibility thinking into the design phase, but in this case we have the opportunity to shift left even further, and think about accessibility in the procurement phase. Creating a shortlist of potential candidates and having a skilled consultant would probably cost several hours of their time, which sounds expensive until you consider the cost of remediation, which may tack an additional zero or two onto the end of that price.
Closing Thoughts
I know what you're probably thinking. Isn't it highly inefficient to have every merchant have to seek out this information on their own? I fully agree. While having baseline requirements for accessibility is a good start, and I acknowledge that the effort required to surface this information is not small, I am looking forward to a potential future where merchants have the tools they need to help them navigate complex accessibility laws. Shifting accessibility left to the procurement phase is one of the most powerful tools available for mitigating legal risk and providing a better user experience for all.
About the Author
Author Nic Chan is an independent front-end web developer and accessibility specialist from Hong Kong. She has recently co-founded Ultramarina, a digital studio which has just launched an accessible Shopify theme called Primavera.
Want to See More Content Like This?
Want the latest blog posts, videos, white papers, and announcements? Sign up for our mailing list and stay in the loop!
We're Here to Help When You're Ready
Take a deep breath. Then feel free to reach out to our team when you're ready to discuss your accessibility needs.
0 comments on “Accessible Shopify ThemesBreaking Down Shopify’s Accessibility Requirements”