My journey in creating an accessible Shopify store step-by-step – Part 1
Recently I was tasked with creating a Shopify store that would be accessible for people with disabilities (ADA compliant). I work with Web Content Accessibility Guidelines (WCAG 2.1 level AA) on a daily basis, but e-commerce is something new for me and I decided to write about my journey in this series of posts 🙂
Since I feel comfortable working with Bootstrap and I know they take accessibility seriously and have a great community, chances were there was already some kind of Shopify Bootstrap theme that I could use to jump-start my project… and I wasn’t disappointed!
Shopify Starter Theme powered by Bootstrap framework (v5 and v4), developed respecting Shopify themes requirements, accessibility best practices, and of course our own experience in developing themes for more than 15 years now.
While it might seem that with Bootstrap on board, and a theme that’s “developed respecting accessibility best practices” everything concerning accessibility is taken care of, that’s not the case… ever.
Web Content Accessibility Guidelines can’t ever be automated, plugins that claim accessibility can be achieved by just installing them are snake oil that can do more harm than good. And while themes claim that are way much better, in my experience they always have their own limitations, not to mention the limitations of Bootstrap in that regard.
For example, looking at the theme demo page;
- the navigation bar has an improper focus order
- keyboard focus isn’t always visible
- there are 6 links all called “Learn more”, but every one of the links to something different
- the YouTube and Google Maps iframes don’t have titles describing their contents
- some texts don’t have proper contrast
- focus doesn’t always have proper contrast
- the newsletter input doesn’t have a compliant label
- only the main menu has a skip option for people using a keyboard to navigate
- the carousels can’t be paused
And these are just problems I’ve noticed after a 3-minute look without any automated tests. Later on, I’ll use Axe “The Standard in Accessibility Testing” and W3C Markup Validation Service to find more problems, and of course conduct an in-depth manual audit, because the automated tests can detect only a handful of problems, and they aren’t even in any way reliable.
But that’s a problem for later, now I have to set up my BootShop environment, a Shopify shop, sync both, create an initial layout for my shop and start improving accessibility, so see you in part 2!
FYI Before diving into Shopify I took a couple of Udemy courses on the matter since Shopify uses a lot of custom solutions, and of course, I wanted to know how to best promote my clients’ products. I’m not affiliated with Udemy in any way (or Shopify for that matter), I’m just a fan of the platform and I think if you’re just starting with Shopify yourself it might be also a good idea for you.
Share