For online retailers, accessibility isn’t optional. About 1 billion people worldwide live with some form of disability, and in the United States alone, working-age adults with disabilities control about $490 billion in disposable income.
If your Shopify website isn’t accessible, you’re missing an opportunity to make a good impression on these consumers. You may also violate Title III of the Americans with Disabilities Act (ADA) and other non-discrimination laws — even if you don’t intend to discriminate on basis of disability.
Fortunately, there’s a rulebook for digital accessibility. Published by the World Wide Web Consortium (W3C), the Web Content Accessibility Guidelines (WCAG) contains technical guidance for building content that works for as many people as possible.
As one of leading eCommerce platforms, Shopify has taken steps to make accessibility easier. However, the decisions you make when configuring your store will determine whether your website conforms with the latest version of WCAG (currently, WCAG 2.1).
Here are a few ways to check your Shopify theme’s accessibility, along with tips for fixing barriers that might affect your audience.
Make sure your Shopify theme uses appropriate color contrast
In the world of eCommerce, branding is important, and choosing your color scheme is an important part of developing your brand. However, some color combinations may be less perceptible for some shoppers.
Text must maintain an appropriate color contrast ratio with its background. Color contrast refers to the difference in brightness between two colors. If text is too similar to its background, it’s harder to read — particularly for people with low vision, color vision deficiencies (CVD, also known as color blindness) and other vision-related conditions.
WCAG Success Criterion (SC) 1.4.3, “Contrast (Minimum),” addresses color contrast ratios for web content. Keep these guidelines in mind:
- Most text and images of text should maintain a contrast ratio of at least 4.5:1.
- Large-scale text (such as headings and other text with a font size of 24 pixels and up) should maintain a contrast ratio of at least 3:1.
- Non-text content that serves an important purpose (for example, clickable icons) should also maintain a contrast ratio of at least 4.5:1.
Many Shopify themes are designed with accessible color schemes that meet WCAG requirements, but this isn’t always the case. To check your eStore’s color contrast, use free tools like the a11y Color Contrast Accessibility Validator.
Related: The Basics and Importance of Color Contrast for Web Accessibility
Add alternative text to images
WCAG’s very first guideline requires text alternatives for all non-text content. This is important because some people don’t perceive media visually. Customers who are blind or who have other vision disabilities might use screen readers, software that outputs text as audio or braille. If a text alternative isn’t available, these users will be left out.
Additionally, your images might not load if the user is browsing on a slow internet connection or for various other reasons — if you’ve written image alternative text (also called alt text or alt tags), they can still understand the purpose of the image.
Get into the habit of writing accurate alternative text when adding images to your online store. Shopify makes this easy:
- When editing a product, click a media item.
- Click “Preview media.”
- Click “Add ALT Text,” then write your description.
When writing alt text, keep your descriptions simple and concise. Review our tips for writing alternative text for more guidance.
Avoid autoplay for videos and slideshows
Autoplay is bad for accessibility, and it’s not a great way to keep shoppers engaged. In one 2016 survey (PDF), 92.3% of web users said that they found autoplay “annoying,” and 76% said that when videos autoplay, they look for ways to silence the media immediately.
Videos, slideshows, and other media shouldn’t play automatically. If you’re committed to autoplay, however, you should at least provide clear controls for pausing playback and disabling sound. This conforms with WCAG’s requirements for audio controls, and it’s simply a good practice for keeping users on your site.
Related: Why Autoplay Is an Accessibility No-No
Test your Shopify store for keyboard navigation
Shopify can be customized with plugins, apps, and app extensions to add functionality and tweak the shopping experience. Of course, new features can lead to user experience problems — particularly for consumers who use a keyboard alone (no mouse) to navigate.
WCAG SC 2.1.1, “Keyboard" requires that all functionality of the content is operable with a keyboard interface alone. Many web accessibility lawsuits reference keyboard navigation barriers, so if you discover issues, you should fix them as quickly as possible.
To test your website’s keyboard accessibility, set your mouse aside and use basic keyboard commands to navigate (see our guide to keyboard accessibility testing if you’re unfamiliar with keyboard commands).
Try to add items to your cart, change product options, and place an order. Does everything work as expected? Can you easily identify your keyboard’s focus indicator? Do you ever get “trapped" in a form field?
Related: What Is Keyboard Accessibility?
Provide users with a way to submit feedback
The ultimate goal of web accessibility is to provide a better experience for real users. Even if you test your Shopify store thoroughly, it may have barriers that affect your audience.
While you should test your store frequently with automated tools (such as our free website accessibility analysis) and manual audits, you should also listen to your users. Publish an accessibility statement that includes contact information or another way to submit feedback.
Remember, when you make your website more accessible, the user experience improves for all customers — regardless of their abilities. While creating an accessible store takes work, it’s one of the best ways to ensure your business’s long-term success.
For help with specific Shopify accessibility issues, send us a direct message.
