Shopify Accessibility: Why WCAG Compliance Matters for Your Store

It’s never been more important to ensure your eCommerce store is accessible. Not only does focusing on accessibility improve the number of people who can shop at your store, but it can also help you avoid legal costs and heavy fines.

Despite this, it’s not uncommon for small and mid-sized Shopify store owners to overlook accessibility. They often assume it doesn’t apply to them or consider it a task for the future, when their business is better established or more profitable.

However, this guide to Shopify accessibility explains why WCAG compliance matters for your store. It also covers common accessibility issues Shopify stores face, how to audit your eCommerce store for accessibility issues, and some quick accessibility wins for any Shopify store.

The Legal Landscape of Web Accessibility

Ensuring your store is accessible is becoming increasingly important due to changes in the legal landscape. This is true no matter the size of your store or where it’s based.

For example, in the US, the Americans with Disabilities Act (ADA) now applies to public-facing websites, not just brick-and-mortar stores.

This has caused an increase in ADA lawsuits targeting eCommerce stores, resulting in legal action and significant fines for online shop owners.

In other regions, the Accessible Canada Act (ACA) and the European Accessibility Act (EAA) include similar regulations.

When it comes to making your store accessible, following the Web Content Accessibility Guidelines (WCAG) is the goal. WCAG is a set of international standards developed by the W3C, and they’re integral to complying with regulations like the ADA, ACA, and EAA.

The latest version of WCAG, version 2.2, focuses more on improving mobile accessibility and making it easier for people with cognitive disabilities and low vision to use websites.

While WCAG covers a lot, overall, your store must adhere to the four principles of accessibility, ensuring it’s perceivable, operable, understandable, and robust.

The good news is that Shopify provides an accessible foundation for your store.

However, any changes you make, such as customizations, app installations, and publishing content, can negatively impact accessibility. For example, elements like image-only size guides, inaccessible buttons, or missing alt text can all create barriers for users who rely on screen readers or keyboard navigation.

However, while legal compliance is important, it shouldn’t be your only motivation for creating an accessible eCommerce store.

Business Benefits Beyond Compliance

Not all of the estimated 1.3 billion people globally living with a disability will be in your target market.

However, with around a quarter of the US, UK, and EU populations having some form of disability, you could be excluding a significant number of people by failing to ensure your Shopify store is accessible.

Improving accessibility can also give your store an SEO boost. Following the accessibility guidelines relating to image alt text, descriptive link text, semantic HTML, and proper heading structure not only helps screen reader users but also helps search engines understand your content better and therefore know when and where to display it in their results pages.

Accessible stores are mobile-friendly, and that is something Google takes into account when assessing a site for inclusion in its search engine results. Besides, with 68% of all eCommerce orders made on mobile devices, your store must be optimized for this growing group.

Furthermore, user experience (UX) improvements to meet accessibility guidelines also help non-disabled visitors to use your store. This can result in lower bounce rates, longer time spent on your site, increased conversions, and a more enjoyable shopping experience for all.

Focusing on accessibility can also help your brand by demonstrating that you care about all customers. It can be a point of brand differentiation, allowing you to stand out from the competition.

Common Accessibility Issues in Shopify Stores

As mentioned, Shopify is an accessible eCommerce platform.

However, you still need to ensure any changes you make to your store, including the content you publish, the apps you install, and the design changes you make, don’t affect its accessibility.

To help you avoid running into any problems when working on your store, here are some examples of common Shopify and general eCommerce store accessibility issues:

• Inaccessible size charts: Some common approaches to adding size charts, such as image-based options, can’t be interpreted by screen readers or navigated with a keyboard, making this essential part of your store inaccessible to many users.
• Missing alt text: Failing to add proper alt text to product and other images prevents screen reader users from interpreting them.
• Poor color contrast: Visitors with low vision will find reading text on your site difficult if there’s poor color contrast, especially between text and background.
• Improper heading structure: Skipping heading ranks makes navigating and understanding your content difficult for screen reader users and search engines.
• Navigation issues: Dropdown menus or modal windows that can’t be used with a keyboard or don’t work with screen readers make parts of your store inaccessible and navigating your site a problem.
• No focus indicators: Failing to add focus indicators consistently makes keyboard navigation confusing, as users can’t see where they are on the page.

While the above issues undoubtedly create barriers for disabled users, they also negatively impact usability, SEO, and conversions for everyone.

How to Audit Your Shopify Store for Accessibility Issues

Auditing your Shopify store for accessibility is essential for highlighting any issues, and with the right tools, it’s easier to do than you might think. Here are some of the options available to you:

Automated Tools

Using free automated accessibility tools is a great place to start. Some well-regarded options include WAVE and Google Lighthouse.

They’ll scan your pages and highlight any accessibility issues, with information on fixing them. There are also more robust options available, such as axe DevTools.

Manual Testing

While the automated tools will quickly highlight issues, they can’t catch everything. So to get a better understanding of how accessible your store is, you can carry out manual testing by:

• Navigating your store with only a keyboard (Tab and Shift+Tab) to ensure all links, buttons, and menus are accessible.
• Using a screen reader like NVDA (software for Windows) or VoiceOver (built into Macs) to check how content is announced and read aloud.
• Review potentially problematic elements such as modals, popups, forms, and size guides, to ensure they can be used without a mouse.

Evaluate Key Pages and User Journeys

When manually testing the accessibility of your store, pay particular attention to the most important pages and user paths through your store.

For example, you should add an item to the cart, view the cart, and complete a checkout to ensure visitors can complete this key user journey at your store.

Some important areas of your store to focus on include:

• Homepage
• Product and collection pages
• Cart and checkout
• Size guides and popups

As mentioned, things to look for when manually testing the accessibility of your Shopify store include how well you can navigate the whole site using the keyboard, how visible the focus is (i.e., can you see a border or highlight as you tab through the links, menus, and buttons), and can you successfully interact with dropdown menus, popups, modals, forms, and size charts.

You should also check how the screen reader announces page titles and headings, whether images have useful alt text, and if the reading order makes sense. Testing the checkout forms to see if they have meaningful label announcements is essential, too.

Other points include checking whether link text is descriptive rather than simply being set to “click here” and how usable the site and its content are on small screens and when zoomed in.

Using automated tools, like WAVE, and manually testing your store will help you to get a good understanding of how accessible it is and what needs improving.

Accessible App Spotlight: How CommerceGurus Size Guides Meets WCAG Standards

As mentioned, Shopify is an accessible eCommerce platform. However, installing apps that haven’t been built with accessibility in mind can negatively impact this. This can prevent people from shopping at your store and lead to accessibility lawsuits.

One example of an accessible Shopify app is our CommerceGurus Size Guides app. This app makes it easy to add accessible size charts to your Shopify store. It meets WCAG 2.2 AA standards to ensure the size guides you create won’t cause accessibility issues for your visitors.

While many stores rely on poorly formatted tables or image-based size guides that screen readers can’t understand and keyboards can’t navigate, the CommerceGurus Size Guides app generates intuitive size charts that ensure all customers can access your sizing information regardless of their abilities.

Due to the importance of accessibility, it should be a key consideration when choosing any app for your Shopify store, and especially a size guides app.

If you choose an app that isn’t accessible, it’s extremely unlikely you will be able to make it accessible. Instead, it’s highly recommended that you select an app with a focus on accessibility from the outset.

Doing so will ensure your store is open to all and help you avoid accessibility lawsuits.

Size charts can reduce returns and increase conversions, benefiting many eCommerce stores. Now, with the CommerceGurus Size Guides app, you can add accessible, mobile-optimized, and fast-loading sizing charts to your store, for free.

Quick Accessibility Wins for Any Shopify Store

Making your store more accessible might sound daunting, but if you’ve built it on a solid foundation like Shopify, it shouldn’t take much to start quickly moving the needle.

Carrying out automated and manual testing will highlight any pressing issues, but some actionable tips to help you start improving accessibility right away include:

• Add alt text to all product images: Ensure all product and promotional images have meaningful alt text that describes their content and purpose. This is something you should be able to take care of very easily.
• Ensure color contrast meets minimum WCAG standards: Use online tools to check that your text contrasts strongly with background colors, especially for buttons, banners, and navigation menus. Entering the colors used by your store into a contrast checker and then making any necessary adjustments to your theme options or adding custom CSS provides a quick way to resolve this issue.
• Use clear, descriptive link text: Avoid vague phrases like “click here.” Instead, use text that clearly describes where the link will take the user, such as “View Size Guide” or “Add to Cart”. Again, this is something that’s easy to fix as it’s simply a case of evaluating the links on your store and making their text more descriptive.
• Make sure all interactive elements are keyboard accessible: Menus, forms, and modals should all be accessible using only a keyboard for navigation. This is something that’s less straightforward to implement if you find any issues. However, the Shopify documentation explains how it can be achieved. New Shopify themes must be built with accessibility in mind, so using a newer theme is one way to avoid this issue.
• Use proper heading structure: Maintain a logical heading order (e.g., H1 > H2 > H3) so screen readers and search engines can interpret your content accurately. The Shopify rich text editor makes it easy to add headings to your content.
• Avoid image-only content: Use HTML and text instead of images to convey essential information, such as size charts and product details. Installing a size guide app with a focus on accessibility is an easy way to implement this.

Improving accessibility is an ongoing process. As your store evolves and the guidelines change, you’ll need to conduct regular testing and fix any new issues.

Summary

Making your store accessible isn’t just about avoiding fines. It helps more people buy your products.

Accessibility improvements can also enhance general usability, SEO, and conversion rates, making it something you should focus on.

To get started, we recommend auditing your store using the manual and automated tools mentioned earlier, fixing any highlighted issues, and making general improvements outlined in the quick wins section.

If you want to add size charts to your store to help customers choose the right items, check out our accessible Shopify size charts app.