Building accessible themes on Shopify

Introduction

Accessibility is about creating experiences, products, and spaces that everyone can use, as independently as possible. When you customize your theme, it’s a good idea to make design and content choices that help keep your online store accessible. By designing your themes, emails, etc. with accessibility in mind, you provide a better experience for people with disabilities and increase the overall usability of your store.

By the end of this guide you’ll know:

• Why accessibility is important
• What Shopify does to help design and build with accessibility in mind
• What accessibility best practices to follow when building your Shopify store
• What tools and testing procedures can help you build an accessible store
  

Why is Accessibility Important?

To be mindful of the needs and abilities of others

When building themes with accessibility in mind, think about the needs of others and how to make the customer's experience as enjoyable as possible. We suggest watching at least one of Molly Burkes YouTube videos to see how accessibility can affect people.

To ensure that the greatest number of customers can shop

While building a store on Shopify, a lot of effort is placed on building a great store, optimizing it for SEO, and marketing it to reach as many people as possible. If you don’t build with accessibility as a consideration, you exclude a portion of the buyer population. According to the World Health Organization, approximately 15% of people worldwide live with a form of disability.

To avoid legal action

Historically, one of the most potent levers of change in the fight for web accessibility has been litigation. Though there are no web accessibility ‘police officers’ scouring the web for non-compliance, customers may decide to consider legal action if they feel that they're not receiving the same service as others. The Americans with Disabilities Act (ADA) and Web Content Accessibility Guidelines (WCAG) provide guidelines on accessible web content requirements. 

Note: For the purposes of this document, we will only be covering themes. However, there are other considerations to make when reviewing your online accessibility including emails, general web content, marketing campaigns, and other customer-facing content.

Accessibility on Shopify

When you customize your theme, it’s a good idea to make design and content choices that help keep your online store accessible. An accessible website is designed so that it can be used by everyone, including people with disabilities. Accessibility for your online store is essential to providing an inclusive experience for your customers.

Shopify doesn't offer ADA/WCAG compliance on a platform level, as accessibility compliance comes down to each specific theme and its configurations. While we do build our themes with accessibility in mind, we cannot guarantee the compliance of themes. 

We’d recommend having your designers and developers read this guide prior to starting the design & build phase of your Theme. This approach often saves time in the long run as opposed to considering accessibility after the design and build process has been started or completed.

Accessibility Apps

There are many apps on the Shopify App Store that you can use to add accessibility functionalities to your site. 

We also suggest using one of the WAVE Accessibility Browser Plugins to evaluate your site for potential problems and warnings.

Please note that these apps do not guarantee compliance. Ultimately, it is the responsibility of you as a merchant to ensure your shop complies with the applicable laws and regulations in your jurisdiction and the jurisdiction of your customers.

Accessibility Best Practices While Building

One of the biggest reasons cited for not focusing on accessibility during development is the perceived impact it has on your ability to launch on time. To many, accessibility is just one extra step to add to an already saturated workflow.

However, it’s vital that you interact with your online store as you build it, to check whether the changes you make are working or not. This is especially true when tweaking things with regards to accessibility, where testing and demoing changes can flag any issues or unveil additional opportunities. Here are a few key areas to examine and keep in mind while building out your store on Shopify:

Keyboard Navigation

While you’re going through your theme build, pause and review your code with some rudimentary accessibility testing. The keyboard navigation test is one of the easiest, most unintrusive, and low cost techniques you can use to assess accessibility within your build workflow. Keyboard navigation is an important tool used by people with visual disabilities, impaired motor function, and many more conditions. 

Essentially, this test requires you to try to navigate your website by relying solely on the tab & arrow keys on your keyboard. This allows you to evaluate the ease of which a user can navigate your site when trying to reach a given element via their keyboard. The keyboard navigation test also helps identify if interactive elements and modals can still be triggered without touching the mouse. 

Screen Readers

Screen readers are programs that allow visually impaired users to understand any text that is displayed on a web page. They accomplish this by “reading” the on-page text, or alt text, of a specific element out loud when a user tabs through the web page elements.

While it may be tempting to run your screen reader and keyboard navigation tests simultaneously, it’s recommended that you don’t. Many screen readers offer their own keyboard shortcuts and functionality, and thus could impact the results of your navigation test.

Use screen readers (examples below) with the browsers they were designed for. If you test your site with unsupported browsers, you can end up wasting time tracking down problems that users won’t ever encounter. Many devices such as Apple and Android phones also feature their own screen readers as part of their accessibility toolset that you can use to assess how your site reads on mobile devices.

ARIA

ARIA is an acronym for “Accessible Rich Internet Applications.” It’s a set of HTML attributes which allow web application developers to create accessible, custom components or interaction patterns using non-semantic or non-native HTML elements. 

ARIA acts as a bridge between non-native HTML elements and assistive technologies (like screen readers) by generating semantic meaning for custom components. ARIA helps to answer the question of, “What is this thing and what does it do?” for custom components. Assistive technologies consume these attributes and announce their presence to users who in turn are able to understand and interact with the components.

ARIA can be broken down into:

• Roles: define what an element is or does.
• Ex. Identifying an object as a ‘button’
• Properties: express characteristics or relationship of an element.
• Ex. an ARIA-label (accessible name) provides more context on an element
• States: define the current conditions or data values associated with the elementLike disabled/enabled - describes the state of an element
• Ex. You could have an element described with the role of checkbox, an ARIA-label of 'Apple Checkbox' and a state of ARIA-unchecked. This would allow a screen reader (for low vision users) to have the element read-out as 'Checkbox, Apple Checkbox, unchecked' (the order may differ depending on the tool they use). This enables a low-vision user to understand that they are currently hovering over an unchecked apple checkbox.

Testing and Tools

Many aspects of your site can affect accessibility, from the font you choose to your ecommerce color palette. It’s up to designers and developers to find ways to create websites and web content that can be consumed by anyone—whether they live with a disability or not. 

While the following tools can’t determine whether or not your site is accessible (this can only be accomplished through human assessment), they can help you on your path to accessibility by cutting down the time and effort it would take to implement a thorough evaluation. This will help you identify and reduce the amount of accessibility barriers on your website and in your content—improving its overall quality.

Screen Readers

Screen readers are an integral part of accessibility testing. Here are some tools to leverage while conducting accessibility testing/audits:

• VoiceOver for Mac/iOS and Safari
• JAWS for Internet Explorer
• NVDA for Windows FireFox
• ChromeVox for Google Chrome (Chrome Extension Link)

Automated Testing

When it comes to accessibility testing, no tool can replace manual testing done by an accessibility professional. However, there are quite a few automated testing tools available to find (and resolve) some of the simpler accessibility issues quickly and easily.

Example - WAVE

WAVE is a free, community-built tool designed to facilitate web accessibility testing by providing developers with a visual representation of issues directly on their page. This test assesses accessibility issues ranging from color contrast to ARIA attributes, and is based on compliance standards from both WCAG and Section 508. The browser-based WAVE tool evaluates your web content after CSS has been applied, but does not evaluate any JavaScript sources. If your site has a lot of dynamic content from scripts, you should opt for the WAVE Chrome extension—which boasts 100 per cent private and secure reporting and is great for assessing non-public (e.g. password protected) sites.

Other notable accessibility tools include:

• aXe
• A chrome extension tool that provides support for WCAG 2.0 
• Accessibility Insights
• A stand-alone app that works across Android, Web, and Windows with browser extensions available
• AChecker
• Test your web pages by entering the URL, uploading an HTML file, or by pasting the source code directly into the tool. After submitting your page, ‘AChecker’ scans your HTML and produces a report that identifies certain, likely, and potential accessibility problems
• Lighthouse Accessibility Audit
• Open-source, automated tool to improve web page quality made by Google
• Features an accessibility test that provides a report to help improve website accessibility

Visual Tools 

Color Oracle

Color Oracle is a free app that simulates various forms of colorblindness by adding a full-screen filter throughout your operating system (and works with Windows, Mac OS, and Linux). Filter options are set to more severe forms of color blindness. If your design passes with these filters, then you know it will also be easily readable by those with minor color blindness. Given that you can turn on these filters easily, this is a great tool for visual designers who want to evaluate their designs as they work. 

Photosensitive Epilepsy Analysis Tool

The Trace Center's Photosensitive Epilepsy Analysis Tool (PEAT) is a free, downloadable resource for developers to identify seizure risks in their web content and software. The process helps determine whether animations or videos you use within your web content are likely to cause seizures for users with epilepsy.

Get Help with Accessibility

Shopify Plus has put together some insightful blog content and help documents to guide you on getting your site accessibility compliant. You can find more information in the following pages:

• Accessibility for Themes - Help Document
• Developing Shopify Themes with Accessibility in Mind
• Various Blog Posts Covering Accessibility - Shopify Partners

While these resources provide some great recommendations, some of the specific actions you can take may require you to be familiar with Accessibility testing, HTML/CSS, and Shopify theme code (Liquid). 

If your team doesn’t have a background in accessibility, or you’d prefer to hire professional help in this area, Shopify Plus has multiple Partners who specialize in accessibility compliance. These Partners have the expertise to help you design and build accessible themes and provide accessibility audits to ensure that your site is compliant with the latest standards. Even for well-practiced developers who are comfortable with accessibility requirements, ensuring you have a certificate of compliance from a third-party can help protect against legal action.