Setting Up an Accessible Shopify Store

Ecommerce has come a long way in accommodating consumers with disabilities. I’ve addressed over the years many accessibility aspects of online shopping, from screen readers to lawsuits.

Shopify, the focus of this post, is a rare ecommerce platform that supplies Voluntary Product Accessibility Templates, documents explaining how accessible its product is for users with disabilities — impaired vision, quadriplegia, Parkinson’s, multiple sclerosis, and more. Shopify provides several VPATs for different aspects of the platform, such as the checkout process and the default “Debut” theme.

The voluntary character of a VPAT can sometimes mean it lacks details and accuracy. Still, Shopify’s VPATs give a lot of useful information.

Shopify provides VPATs for different aspects of the platform, such as the checkout process and the default “Debut” theme.

Any VPAT has to be interpreted carefully. For example, the Shopify Checkout VPAT applies only to the checkout process — adding items to the cart is not covered. Theme VPATs have an enormous number of “partially supports” flags because those fields are supported only if the store owner (content creator) provides the required info. VPATs address the accessibility of a product, not the content. So while VPATs help assess some aspects of Shopify, they don’t answer the entire accessibility question.

Shopify has published an accessibility policy and an accessibility plan. Both are promising signs for the future of accessibility at Shopify.

Nonetheless, relying solely on info from a vendor is generally not the best way to gauge its accessibility.

How Accessible?

How accessible is a Shopify store? To answer, I used a dual approach: (i) creating a new site to learn the native accessibility features and (ii) exploring an established store with products, integrations, add-ons, and more.

Creating a new site shows me what you’re likely to get with a fresh template. Exploring an established site — in this case, a prominent U.S.-based direct-to-consumer company — shows me the impact of a professional theme and real-world challenges.

My overall impression is both scenarios can result in a reasonably accessible site. However, there are definitely gaps.

Templates

Shopify merchants can choose to create custom templates, use stock templates, or purchase commercial templates. Shopify itself controls much of the checkout process and design. But the theme controls significant aspects of the site, and that can result in inaccessible features in your store.

I found many helpful accessibility features in my testing. Still, major accessibility flaws were present in the commercial theme but not in Shopify’s default “Debut” theme, exposing the variability.

One feature that isn’t on Shopify’s broader architecture is inheriting characteristics from a “parent” theme. Some systems allow modifying parts of a theme while still utilizing updates for the unmodified portions. Shopify doesn’t do this. So modifying a commercial or Shopify-provided theme creates headaches when implementing future theme upgrades.

The accessibility problems I found covered the entire gamut — from “confusing but functional” to “completely unusable.”

An example of “confusing but functional” appeared in the header of both themes I tested. Both include a collection of controls that toggle a menu, link to the user’s account, control a search function, and send the user to the shopping cart.

In both sites, all of these controls worked, had accessible names, and were usable by people on assistive technology such as screen readers. But the controls were confusing. They functioned in two ways: open a modal, or provide a normal link that sends somebody to a new page. However, they’re marked up in four ways.

• “Menu” is a button marked up as a drop-down disclosure widget but opening a modal.
• “Search” toggle is a link that opens a modal.
• “Account” is a normal link.
• “Cart” is a link marked up as a disclosure widget but opens a modal.

All are functional, but they’re extremely inconsistent and can create much confusion for a blind or vision-impaired shopper.

For the sighted user, none of this likely matters. A sighted user with a mouse generally doesn’t know whether a control is a button or a link, and it doesn’t matter whether it’s marked up as a disclosure widget or a modal. But the differences do matter to users of screen readers who form expectations about how the interface functions based on how it’s described.

A more intermediate flaw is the missing labels in the commercial theme. The “Quantity” input was only marginally functional by keyboard and was unlabeled. A user on a screen reader would have a difficult time discovering the purpose of the field.

A more severe element, again in the commercial theme, is the product-variation selection system. It was entirely non-functional from the keyboard and screen reader. A user of assisted technology would be unable to choose a size, color, or other product variation. Since these are critically important for many products, it’s a severe issue.

However, neither of the two material issues were present in the default theme. That’s clear evidence that Shopify values accessibility and has done the work to ensure accessible options are available. However, like all content management platforms that allow theming, it’s the storeowner’s responsibility to ensure that the chosen theme supports accessibility needs.

The Shopify theme store, unfortunately, does not identify themes that are accessible.

Content

Shopify’s duty is to ensure merchants have the means to create accessible content. Shopify provides a small editable area for product descriptions and another area to upload product media. The content editor offers basic formatting of text, inserting of tables, and adding images and video.

Product descriptions. The text formatting tools emphasize structure over appearance and don’t have features for modifying the color or size of body text. This likely leads to creators using structural headings for larger body text, which may create an improper document structure. However, the lack of font size and color tools also lowers the likelihood of the store owner creating color contrast problems or omitting a heading structure entirely

The table inserter is simple, with no mechanism for creating accessible tables. It’s still possible, however, by switching to the HTML markup view to customize the table code directly.

The image interface prominently shows the alternative text field, likely encouraging its use. But it does not explain alternative text to help editors understand its purpose.

Videos are supported only by inserting embeddable code from an external provider, shifting the accessibility responsibility to the provider. Video players from Vimeo or YouTube, for example, are effectively accessible. Other providers may not be.

Overall, merchants can absolutely create accessible product descriptions in Shopify, with, again, a couple of caveats. First, using tabular data requires editing the table code directly to ensure accessibility. Second, avoid the temptation of using headings to increase the font size of body text.

Uploading media. Store owners can upload a variety of media types, including videos, images, and three-dimensional models. All will be displayed according to your theme’s media templates. The interface is simple but provides an alternative text field only for the media thumbnail. Also, there is no way to provide captions for videos. You must upload a video with open captioning to make it accessible.

Usable, with Homework

Shopify has provided a usable, accessible interface for store owners and shoppers. However, much of the accessibility burden falls on editors and theme developers. Shopify does not provide significant help in guiding owners towards accessible themes or helping them create accessible product content. In short, do your homework to avoid accessibility lawsuits.