Firstly, we wanted to know what their approach is to Accessibility. This is the opening gamut on what Shopify has to say on Accessibility:
“Shopify is committed to treating all people in a way that allows them to maintain their dignity and independence. We believe in integration and equal opportunity. We are committed to meeting the needs of people with disabilities in a timely manner, and will do so by preventing and removing barriers to accessibility and meeting accessibility requirements under the Accessibility for Ontarians with Disabilities Act.”
It’s a reasonable opening statement and there’s more behind it too - for example you can read more about Shopify’s roadmap plan here - but it’s primarily about them and their own policy on accessibility for Shopify as a firm NOT on the platform.
Note: while Shopify operates under the jurisdiction of Canadian law, the equivalent of the AODA, for most of the UK (for Eng, Sco and Wal), is the 2010 Equality Act. We’re not lawyers or legal experts but our understanding is that for the broad purposes of this post, they (and associated and supporting legislation) are similar.
So, next we wanted to know if it is possible for a Merchant to use Shopify to build a compliant online store?
This is where it starts to get a little more interesting and a little DIY too ...
- Shopify will not be liable if the Merchant receives a lawsuit for not complying with applicable laws or regulations
- Ultimately, it seems, it is the Merchant’s responsibility to ensure compliance with all applicable laws and regulations (including the ADA)
For the most part, this seems reasonable - apart from the fact a Merchant (sometimes even a developer or Shopify agency) doesn’t have access to certain parts of a platform that might be in contravention of some aspect of accessibility. We’ll come back to this.
Merchant responsibility
So, for Shopify, it is clearly the Merchant’s responsibility to ensure that its storefront complies with all applicable laws and regulations in the Merchant’s jurisdiction and in the jurisdiction of each of its customers, including all laws and regulations which relate to web accessibility. And in the event of any query or challenge, the suggestion seems to be for the Merchant to seek its own independent legal counsel.
Furthermore, if the Merchant asks whether their store is ADA compliant (or whatever local legislation that applies), meets WCAG standards, or is simply accessible, the advice seems to be that you can install and run an automated test suite.
The following are Shopify’s recommended automated accessibility testing tools:
- aXe by Deque
- WAVE by WebAIM
- Accessibility Insights by Microsoft
And they’re all good tools (we use all of them here at Un.titled).
If a Merchant would like additional help to fix and remediate any issues found they can reach out to an accessibility Partner. As we’re a Shopify Plus Partner and since we put such a high currency on accessibility, we’ll take that 😉
Up to this point Shopify is basically saying we have our own accessibility statement thank you very much but as a Merchant you’re on your own in terms of compliance and if you need any help, here are some tools or go find an expert.
So far, so normal SaaS platform. So what about under the hood - themes, apps and the Shopify generated code a Merchant would never really tamper with, without fear of breaking their entire store.
Core
The main thrust here is that in terms of what Shopify outputs from core (which might not always be compliant), it doesn’t look like there’s anything which a good Shopify developer hasn’t got access to OR that they can’t overwrite.
Apps
While there's rightly a plethora of guidance around data privacy and global GDPR compliance, security and a well documented review process, there’s little in Shopify’s app guidance that specifically name checks accessibility. So it’s back to those testing tools and regimes. There’s even some nice looking Shopify accessibility apps that look interesting (though it again asks the question, why not have these in core?)
The use of apps should preferably be kept to functional apps if possible in order to not change the markup rendered on the front end of the site.
If an app is front end interactive it would be preferable that the it utilises existing modules from within the theme like button and image markup, meaning that if our markup is already compliant then any app interaction on the front end should be compliant too.
However most apps are created by third party Shopify developers and may generate non compliant markup which may be difficult to control. So if the app developers aren't accessibility conscious, new problems could be created.
It's not recommended that clients attempt to tamper with code in the editor unless they’re experienced in HTML and CSS. We do suggest that the client use as many tools at their disposal to analyse accessibility whether that be apps or analysis tools.
Again it feels as if Shopify have relinquished responsibility for accessibility or perhaps even passed the buck to theme and app developers, Shopify agencies and ultimately individual store owners and merchants.
Accessible Shopify Themes
Themes are where most if not all of the tension comes and what Shopify has to say here is striking. Basically at this time, the officially supported Debut theme, paired with Checkout, is Shopify's most compliant offering. And there’s practical advice, that, if you’re auditing your custom theme (call those Shopify accessibility Partners again), a Merchant can consider switching to Shopify's Debut theme in order to provide a more accessible experience.
But is Debut any good. Is it compliant?
Why Debut?
According to Shopify, Debut is recommended as it has gone through a full audit to meet WCAG2.1 standard.
This means Debut's underlying code does a lot of the heavy lifting in creating an accessible experience.
There’s the perfectly reasonable expectation that the Merchant (or agency they’re working with) still needs to do stuff - namely ensure:
- Logically ordered headings (h1-h6) in content
- Proper ul/ol list structure for related content items
- Color contrast
- alt text for images which require descriptions
- Semantic data table structure
- And more (content which they control)
However, while it’s good, it’s not 100% compliant - for example, when we ran an audit on the theme, there were a number of WCAG 2.1 violations (6 in code and 2 for colour contrast). Whilst a theme might be visually altered to match the vendor’s brand (so we can affect and ‘fix’ the colour contrast issues), those in code are core and we might argue are Shopify’s responsibility (as the sponsor of the Debut theme and the simple fact that it’s highly unlikely that a Merchant will have access to remedy them).
What about Shopify Checkout?
Shopify Checkout is special. As any experienced Shopify theme user knows, one of the main restrictions of the platform is that there are limited changes you can make to the checkout pages. To clarify, Shopify does allow all Merchants to customise the cart page through the theme editor (or by modifying the cart-template.liquid file directly), but this is distinct from the checkout pages. And if you’re a Shopify Plus Merchant, then you do get more control but for the majority, it’s locked down. And there are good reasons for this (not least regulatory, security and compliance issues).
So how does Checkout perform? There’s good news here it seems, as Checkout has gone through a full audit and remediation project to meet WCAG 2.1 AA and any remaining issues are being addressed. Checkout's accessibility compliance level is high and continues to improve with time.
This is a welcome note from Shopify, as achieving the required standards will involve time and iteration within their theme base.
What have we learnt from recent projects?
We recently carried out accessibility remedial work with the Sir John Soane Museum across both their Drupal-powered museum site and integrated Shopify store. This covered a range of updates and improvements, including ensuring the presence of alt tags, clear tabbing and headers being in the correct order.
We also reordered heading tags for the Museum using CSS classes to control the size of headings in some cases. We also updated the pagination markup to include visually hidden link text and use more accessible tags, and we added visually hidden text to some links for accessible screen reader descriptions. Updates to the general Drupal theme were carried over to the Shopify Debut theme.
As already mentioned, the Debut theme is considered the most accessible Shopify theme. Even so we carried out a number of improvements with the Sir John Soane Museum. Working our way through Debut, making a number of accessibility enhancements, we folded these improvements back into our own version of Debut. This is useful for future Shopify projects, and is as close to 100% accessibility as it can be.
The Un.titled team has done similar work around Shopify accessibility with NMC Recordings and with St Albans Museums. For these clients, we amended the use of description list tags across the sites, and amended tab indexing for sliders. We also improved Aria label usage for teaser images across both sites.
Collectively, this kind of work means it’s fair to say we are now very astute when it comes to enhancing accessibility on Shopify.
Summary
As already reflected, Shopify basically says you’re on your own in terms of compliance and if you need any help, then there are experts you can lean on. To a degree this works and is not uncommon when it comes to SaaS platforms view of their responsibilities when it comes to accessibility.
Where it starts to unravel a little is, unfortunately, in the detail. For example Debut is a decent theme (in terms of compliance) yet still fails compliance testing (using the same tools Shopify recommend using to help ensure compliance).
Even ignoring the fact that Debut fails compliance, is that it? Dozens and dozens of themes, submitted and approved through a fully audited process and there’s (only) one theme that can be recommended as accessible?
This paucity of fully compliant, accessible themes is exacerbated by the fact that while the theme submission guidelines give some space to accessibility, it looks very specific in terms of what is required and misses the opportunity to insist that all themes are fully WCAG 2.1 compliant.
On the more positive side, there appears to be nothing which a good Shopify developer can’t remedy or overwrite. How accessible and comforting most Merchants find that is a different matter, their expectation (rightly or wrongly) might be that Shopify has a bigger role to play.
But hey. Shopify Checkout is good and that’s definitely a good thing 🙂
School report? B+ Quite good but could probably still do better ...
To the interested and passionate … some additional reading:
- https://www.shopify.com/partners/blog/developing-shopify-themes-with-accessibility-in-mind
- https://help.shopify.com/en/manual/using-themes/change-the-layout/accessibility
- https://www.shopify.com/partners/blog/search?q=accessibility
- https://ux.shopify.com/tagged/accessibility
- https://shopify.dev/tutorials/review-theme-store-requirements-files#accessibility
