How Shopify ships accessible themes for merchant storefronts
By prioritizing accessibility earlier in the product life cycle, the Themes Team gets ahead of usability bugs.
Making commerce better for everyone
Shopify is a global commerce company that offers retailers a platform with a suite of services including payments, marketing, shipping, and customer engagement tools. On a mission to help people achieve independence by making it easier to start, run, and grow a business, Shopify aims to reduce the barriers to business ownership to make commerce better for everyone.
Identifying an efficiency opportunity
Most companies that build digital products consider accessibility closer to the end of the product creation lifecycle. At this point, accessibility is a costly endeavor; many teams have signed off on designs and prototypes, and the marketing team is poised for launch.
Scott Vinkle, Accessibility Specialist at Shopify, saw a better way. A front-end developer by trade, Scott understood the need to tackle the misconceptions that accessibility slows down the product development process. He saw the potential to be more proactive by considering accessibility in the initial stages of product creation and made a business case for growing a cross-functional accessibility workflow. If Shopify would “shift left” (i.e., incorporate inclusive research and design practices early on), they would be more efficient and more inclusive.
“Right away I saw value in this product; I knew it would be the right solution for our needs in making Shopify more accessible by default.”
Scott Vinkle
Accessibility Specialist at Shopify
A vision for efficiency and usability
Scott was clear about what success would look like:
“By the time a developer wishes to release a new feature, there should be very few to no [accessibility] issues found during code review.”
Scott believed usability testing would play a critical role in the success of this new workflow, and so he reached out to Fable. Scott recalls the story:
“I’d gotten to know a few folks at Fable from attending industry conferences and local meetups. After attending a Fable demo session, I was able to see how the platform worked in person. Right away I saw value in this product; I knew it would be the right solution for our needs in making Shopify more accessible by default.”
And so a mutual partnership between the two organizations began.
Practical application: the Dawn Theme
Scott started working with the Themes Team who is responsible for creating Shopify’s free themes. Excited about the prospect of making beautiful themes for merchant storefronts highly accessible by default, Scott and his team got to work testing as early as possible.
The goal: to make the storefront work no matter which AT (assistive technology) was in use. When a merchant installs one of the themes and uploads their content, shoppers with disabilities would be able to perceive, operate, and understand the UI that they’re interacting with.
It was step 3 of this workflow where Fable stepped in and helped the team. Components were reviewed and suggestions on how to increase the usability of a component were given. This feedback was also shared with the rest of the team, including team leadership, to help scale accessibility knowledge at Shopify.
“By using a combination of accessibility tools, partnering with Fable, and measuring our effort along the way, we’re working to become one of the most accessible commerce platforms.”
Scott Vinkle
Accessibility Specialist at Shopify
Design systems thinking
Implementing a design system is key in any large scale platform. Common patterns and components ensure consistency in user experience and user interaction, and therefore increase the success of a product.
The same holds true when implementing accessible solutions. Designing for accessibility from the start, then scaling across the system, improves the quality of the experience for both developers and the end users.
Scott shares a turning point when the Themes Team released net new themes to the Shopify Theme store:
“Over the years I’ve formed a habit; when a new product is released, I’d spend some time testing for accessibility, and if I found defects, I would report to the team responsible. But when our free themes launched, I went through the same motions and realized, ‘I don’t need to do this. Our themes are highly accessible already!’ It was a liberating moment to realize our efforts of shifting accessibility left had paid off.”
How does a product team know when accessibility is baked-in by default? Part of the process is to measure the accessibility of a product. Scott’s team is able to do this by leveraging Fable’s compatibility test and the AUS (Accessible Usability Scale) score. Over time, Scott tracks AUS scores to reveal the team’s progress.
“The AUS scores showcase the accessibility of various user journeys – data I can share with the rest of the team to inform us how usable our products are and where to prioritize effort and focus in the workflow.”
Increased confidence
With theme components well-tested and regarded as highly accessible, the Themes Team felt a newfound sense of confidence on launch day. Not only were the themes beautiful, performant, and usable for any desktop/tablet/mobile device, they were also highly accessible for people who rely on assistive technology.
So what’s next for Scott and the team at Shopify? Scott explains:
“With the success of shifting accessibility left within our free themes offerings, the next step is to replicate and scale this practice with other product teams… By using a combination of accessibility tools, partnering with Fable, and measuring our effort along the way, we’re working to become one of the most accessible commerce platforms.”
Scott encourages all companies to invest in usability testing with people with disabilities, because it makes products and services more available to a greater number of people. Which in turn, means more growth opportunities, increased revenue, and positive public perception.
Scott still sees a lot of opportunity for other companies, citing the The WebAIM Million, a study which reviews the accessibility of the top 1 million homepages.
“If you want to have an advantage over your competitors, implementing accessibility and inclusive design in your product and core workflows will help make this a reality. People will take notice and recognize this is a part of your business values.”
