Developing Shopify Themes with Accessibility in Mind

Accessibility is all about using design and code strategically to make the content of your websites or online stores consumable for all users, whether they live with an impairment or not. If you're not already designing with accessibility in mind, you’re missing out on a major opportunity to increase the usability of your site (and the size of your client's ecommerce audience). In this blog post, we'll help you: Understand why web accessibility is becoming a mandated part of the web Identify ways to integrate accessibility testing into your existing workflow Find implementation strategies to make your Shopify themes more accessible

Do you focus on accessibility when building Shopify Themes for your clients?

If your answer is no, you’re missging out on a major opportunity to increase the usability of your site for a large portion of the population, looking for their next purchase online.

We want to help you get excited about accessibility, understand its importance within the web industry, and inspire you to integrate accessibility checks in your daily development workflow. We’ll also demonstrate some simple ways to make your clients’ online stores the best in the world, for everyone.

The importance of web accessibility

Accessibility, also know to many as simply a11y, is all about using design and code strategically to make the content of your websites or online stores consumable for all users, whether they live with an impairment or not.

According to research conducted by Cornell University, the National Eye Institute, and Microsoft, accessibility impairment is far more common than most of us would believe. In the United States alone:

• 2.3 per cent of people live with reading disorders
• As many as 8 per cent of men have a form of colorblindness
• 7 per cent of adults live with a severe dexterity difficulty
• 3.6 per cent reported a hearing disability

But these numbers only report on individuals who have self-identified as living with a permanent disability. Countless situations arise that could leave your users with temporary impairments to their vision, hearing, or dexterity. It’s vital that as a developer, your site is built to allow any of these users to easily interact with content.

Accessibility is also quickly becoming a mandated part of the web. Many of your clients, whether Shopify merchants or not, probably already live and work in jurisdictions that have legal requirements for how accessible their websites must be — with many more moving towards that standard.

That’s why when working towards accessibility, developers often refer to WCAG 2.0 — the international standard for building accessible websites. By building websites that are compliant with the WCAG standards, you’ll also be compliant with the majority of the accessibility laws in most regional jurisdictions.

It’s important to research and understand these specific accessibility mandates before beginning too much work on your project. Feel free to read more about these geo-specific regulations on W3C’s regional policies page.

You might also like: Why and How to Improve Ecommerce Website Accessibility

How to work accessibility into your existing workflow

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

But it’s vital that you interact with your online store as you build it, in order 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 methods and tools you can use to smoothly integrate accessibility checking into your existing workflow.

1. Keyboard navigation test

The keyboard navigation test is one of the easiest, unintrusive, and low cost techniques you can use to assess accessibility within your daily workflow.

Essentially, all this test requires is for you to try to navigate your website by relying solely on the tab key 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.

It should also be obvious what element you are focused on in any particular moment, while running a keyboard navigation test. For most browsers, there are default :focus css styles that are applied to focused elements, such as a blue outline shadow. However, these :focus states can be overridden in CSS, so it’s important that if they are overridden that they aren’t removed completely, but rather enhanced to match existing theming or styles.

Try tasking yourself with accomplishing a particular action on your site — say add a product to cart and checkout — when using this technique.

2. Screen reader test

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. Some keyboard interactions are only possible when a screen reader is turned on, and thus could impact the perceived results of your navigation test.

It’s important to use screen readers with the browsers they were designed for. If you test your site within unsupported browsers, you can end up wasting your time tracking down problems that users won’t ever encounter in the real world. If you’ve never worked with one before, you can use the following screen readers for your tests:

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

3. Automated accessibility tests

While the aforementioned tests require a manual process for accessibility evaluation, there are some automated options for those of you trying to keep your workflow as lean as possible.

Think of automated accessibility tests as similar to using a code-linter — just because your JavaScript passes linting, doesn’t mean it will necessarily do what you want it to. The same concept applies to automated testing tools. They will help you avoid common mistakes, but they can’t help you produce an accessible page, without manually testing your assumptions.

If you do opt for an automated accessibility test, remember that they will not provide results as accurate as manual checks.

Here are a few automated accessibility tools you can check out:

• Accessibility Developer Tools — This Chrome extension adds an accessibility audit, and accessibility sidebar pane, directly into your Chrome Developer Tools.
• Addy Osmani’s a11y tools — This series of command-line accessibility tools allow you to run audits against local or remote URLs, to identify areas where improvements can be made.
• aXe: The Accessibility Engine — An open-source JavaScript library that performs automated accessibility audits within your testing framework or browser of choice.
• HTML_CodeSniffer — A JavaScript-based bookmarklet that runs a simple accessibility audit, including color contrast checks and markup recommendations, on any web page you’re interacting with.
• Tenon.io — A paid subscription service that performs accessibility checks on your site, or in your code using API tests within your existing CMS’ publishing workflow.

You might also like: 9 Tools for Website Accessibility Testing

4. User testing

The holy grail of accessibility assessment is user testing.

Regardless of how detailed your accessibility audits are or how often your perform them, you will never actually use your website as someone with a disability would. However, many developers or clients do not have the budget, or are not willing to spend the money, to run a user accessibility test.

If you can afford it, it can be extremely insightful to get someone to test your site, app, or product from an accessibility standpoint. This will give you a thorough understanding of how a user with a disability would actually interact with your build, before launching it.

You might also like: Why, How, and When to Utilize Usability Testing

Accessibility and Shopify Themes

Now that I’ve convinced you of the importance of accessibility, let’s take a look into how you can start using accessibility principles when developing Shopify Themes for your clients.

From a development perspective, HTML is the bedrock of your website’s accessibility. By ensuring you include semantic markup and descriptive tags where appropriate, your code will be able to better inform users of the kind of content that lives on your site. For Shopify stores, the same principle applies alongside some quick changes to Liquid too.

The high-impact elements featured below are ripe for accessibility optimization, and were identified while researching and testing accessibility in our own themes on the Shopify Theme Store.

1. Images and alt text

Any graphical element on your page that contains relevant information for the user — such as a product image — should have a text fallback to be truly accessible, and for images this is the alt attribute.

Alt text is extremely important for users who rely on screen readers to interact with your on-page content. When written effectively, alt text provides screen readers with a contextual description of what is displayed within an image, rather than just a random URL that points to your jpeg file.

When drafting alt text, try to keep things clear, concise, and contextual to provide your users with the most beneficial description possible. For example, if your store includes a product image for blue suede shoes, your alt text should read “blue suede shoes” or “blue suede shoes product image.”

Shopify helps facilitate this process by automatically generating alt text for product and collection images. For product images in particular, Shopify will take the product name and automatically set it as the alt text for you.

Alt text should also be applied to any images you are uploading through your theme settings, such as heroes or slideshows. For example, if you don’t have a setting that will work contextually with the image when using a slideshow, you can add an alt setting under the image that defaults to the slide_heading setting to define your alt text.

It’s important to note that you should leave the alt tag blank where images, which are purely decorative, and not part of your theme’s core content, such as your background images. This will ensure that users are presented with only the most relevant content needed for their shopping experience.

2. Icons

Icons are used in almost every online store, as they can enhance your ability to quickly communicate key actions you want your users to take. But just like images, icons can lose this function entirely when users have a visual impairment, and rely on a screen reader to navigate the web.

I’m a firm advocate for the usage of SVG icons in all designs, but in their standard state, they can present difficulties for accessibility. Screen readers are unable to read SVG elements, and because of this they will not know to say “cart” when hovering over your cart icon.

Instead, you want to hide that element from the screen reader entirely, and opt for an additional span tag to provide fallback text. If we were implementing this for the cart icon in your main navigation bar, you’d want to include something similar to the following:

3. Forms

Forms are another prime area for accessibility improvements, considering they're widely used in almost every online store for things like email subscriptions, commenting sections, product reviews, and checkouts. It’s not just their frequency of appearance that makes them important to consider, but also the fact that they’re highly interactive elements that are used on a regular basis by site visitors.

There are two primary ways to increase accessibility on your forms. One way is to make your HTML more semantic by adding labels to all inputs, even if they are hidden to the user. The other way is to manage error and success states through the use of contextual copy, which can be read by screen readers, and not simply color alone.

Note: While these specific tips are focused on forms, they can actually apply to any interactive element on your site, such as your navigation menu.

Below is an example for a comment section on your online store. We can use a form.error Liquid object to display any errors (and likewise form.success object for successes) when users are filling out our form.

4. Tables

Tables can be exceptionally frustrating to work with, especially if you’ve ever tried to build a layout using them instead of divs or spans. However, if we use divs and spans, screen readers would have no indication of how to tie the pieces of content together, so tables are the best alternative.

To achieve accessibility in your tables, you’ll want to visually hide your header, but allow the screen reader to still read its content for visually-impaired users. At the same time, you should include labels with CSS itself to pull out the data label attribute and visually present it to readers without audio. This gives you an entirely accessible table that still allows customization on the visual layout.

Here’s a simple way of accomplishing this in your theme:

5. Pricing

Pricing can vary widely across online stores. Some display prices with decimals, without them, and some use superscripts for cent on the dollar.

While superscript looks quite visually appealing in your design, screen readers become confused when trying to understand the relation between the separate HTML tags of your price.

You can accomplish this by adopting a pattern quite similar to what was demonstrated for icons above, where we visually hide the value from the user in a second span, while hiding the first span (shown visually) from the screen reader.

Here’s an example of what that looks like applied to a price in a list item:

Sale or discount prices is another area you could optimize for accessibility within your theme. It’s common to use color and strikethrough formatting to demonstrate price differences when illustrating a sale price on your store. These visual cues allow the user to understand what is the new price, what is the old price, and what the relation is between them.

When we remove this visual cue and rely on a screen reader, we’ll often hear what sounds like two unrelated numbers sequentially — which can be very confusing for the user. To provide them with the context as to which price is the sale price, and which is not, you should add another visually-hidden span tag following your product price as shown below:

6. Color contrast and text

We can’t talk about accessibility without touching on color contrast. How you decide to pair your background images and text can severely impact the legibility of your web content for all users, not only those living with colorblindness or another visual impairment.

It’s important to check your design as you’re working, so you can catch any problems before you’ve invested too much time into your project. Otherwise, you might end up having to re-do countless hours of design work in order to make your site fully accessible.

While we don’t necessarily have a Liquid snippet you can use to tackle color contrasting, we have previously published a thorough article that covers five techniques for improving your ecommerce design for colorblind users.

Become an accessibility-informed developer

Being an accessibility-informed developer means taking the time to think about and evaluate your work, as you’re building it.

It’s taking on the perspective of your potential user and asking yourself questions, like “what happens if I hit tab on my keyboard?” or “how would I accomplish my goal if I had to use a screen-reader or another assisted web-reading device?”

Together, we can work towards a world where anyone can easily shop online, without having to worry about whether they’re actually able to interact with the website or not.

Let’s start making the web more accessible, one theme at a time.

Do you incorporate accessibility checks into your theme development workflow? Share your tips in the comments below.