With more than 2 million active users (PDF), Shopify is one of the world’s most popular eCommerce platforms. For businesses, Shopify offers some obvious advantages: It’s easy to use, secure, and endlessly customizable — and with a bit of effort, Shopify websites can be accessible for users with disabilities.
That’s an important consideration: In 2022, at least 1,378 lawsuits were filed under the Americans with Disabilities Act (ADA) against businesses in the consumer goods, services,& retail industry, per a report from Accessibility.com.
Businesses have a legal and ethical responsibility to provide their users with accessible content. For eCommerce stores, non-compliance can be costly — and if customers can’t complete your checkout process, you’re missing out on conversions.
Fortunately, Shopify treats accessibility as a priority. By following the Web Content Accessibility Guidelines (WCAG), you can avoid common mistakes, improve ADA compliance, and reach more potential customers. Here are a few simple ways to get started.
1. Start with an accessible Shopify theme
If you don’t have a team of designers, there’s a good chance that you’re starting your Shopify site with a pre-built theme.
Here’s the good news: Shopify has focused on accessibility in recent years, and the Shopify Theme Store has fairly strict accessibility requirements. To be featured on the store, themes must have a minimum average Lighthouse accessibility score of 90.
Lighthouse is an automated accessibility audit, and as we’ve discussed in other articles, Lighthouse is not a perfect tool for evaluating accessibility. Even so, Shopify themes can be expected to meet certain WCAG requirements:
- All parts of the page must be accessible with a keyboard alone (no mouse).
- Form input elements must have labels with “for" attributes.
- Themes must use valid semantic HTML.
- Demo store product images must have alternative text.
In short, if you download your theme from Shopify’s store, you’ll have some assurance that the theme follows the basic requirements of accessibility — but the decisions you make when setting up your theme will determine whether your website is truly accessible.
Some important tips to keep in mind:
- Your website must maintain appropriate color contrast. This ensures that content is readable for people with certain vision disabilities. Learn more about color contrast and accessibility.
- Your website should not use color alone to convey information. If you ask users to “click the red button" or take any other steps that require visual perception, your website isn’t accessible for some users.
- No Shopify theme can automatically generate alternative text (also called alt text). We’ll discuss alt text in detail later in this article.
- If you edit your theme’s stylesheets, remember that all interactive elements must have a clear visual indicator when receiving keyboard focus. Learn more about visual focus and keyboard accessibility.
- Each hyperlink must have descriptive, unique link text. Learn why “click here" isn’t enough context for hyperlinks.
Ultimately, you’ll need to think about accessibility before making any change — and test your content against the latest version of WCAG before publishing your changes.
2. Use text headings in their sequential order
Subheadings help to break up your content into manageable “chunks" of information. However, they need to use appropriate HTML. Often, Shopify creators choose subheadings based on their visual appearance — but the level of subheading (H1, H2, and so on) can impact accessibility.
Use subheadings in proper sequential order. In other words, an H2 tag should only be used under an H1 tag, and an H3 tag should always appear below an H2 tag.
It’s also important to write descriptive subheadings that describe the content. People who use screen readers (software that converts text to audio) may jump around to different subheadings when browsing your site. If the subheadings aren’t descriptive, these users will have to do more work to find the content they need.
For additional guidance, read: 3 Common Subheading Mistakes That Can Create Accessibility Issues.
3. Make sure all Shopify product images have alternative text
People with low vision may not be able to see your product images — and if your images fail to load for any reason, you’ll want to provide your customers with a description of the missing content.
As you add products to your Shopify store, you should write descriptive alt text for every image. Here’s how to add alt text from the Shopify admin portal:
- Go to Products.
- Select the product you want to edit.
- On the product details page, select a media item to view the Preview Media page.
- Select Add alt text, write your alt text, then click Save alt text.
You can also add alt text at scale by importing the descriptions via a CSV (comma-separated values) file. Review Shopify’s guide for using CSV files to import and export products.
Before writing product alt text, learn the best practices: 5 Steps for Writing Alt Text for Accessibility.
4. Pay attention to your online store’s slideshows
Slideshows can be a great way to highlight new products, but if they operate automatically, they can annoy some users. That’s especially true for people who use screen readers: The slides may change before the user’s software can announce the content.
To make your slideshows accessible, follow these tips:
- Avoid using autoplay.
- If you must use autoplay, don’t autoplay audio or video content.
- Make sure that users can easily pause or stop the slideshow with on-site controls.
- If your slideshows have videos, provide captions and transcripts for any audio content.
For more guidance, read: Are Product Carousels Bad for Accessibility?
5. Have an accessibility testing strategy
Every choice you make when building your Shopify site could affect accessibility. To that end, you should have a testing strategy that uses the latest version of WCAG. Some quick tips:
- Don’t rely on Shopify accessibility checker extensions. While extensions can be useful for finding certain barriers, other issues require human judgment.
- Use a combination of automated and manual tests. Learn why a hybrid approach is the best path to digital compliance.
- Consider a full accessibility audit after major changes (such as a site redesign or rebranding).
Remember, accessibility is an investment. Following WCAG may improve social media engagement, customer retention rates, and other key eCommerce metrics.
If you’re ready to build a long-term strategy for digital compliance, the Bureau of Internet Accessibility can help. Send us a message to connect with a subject matter expert or get started with a free automated WCAG compliance summary.
