How much is that t-shirt in the Browser Window

This is the second post in a series on accessibility from Shopify UX’s team. We’re publishing posts every two weeks. You can check out the introduction here.

One thing that can turn a shopping experience frustrating is not being able to find the price of something. We’ve all had to do that awkward hunt around a store for an employee to do a price scan. Online, I’ve personally rage-quit countless purchases because I couldn’t find the price anywhere on the product page — we shouldn’t have to put something into a cart just to find out its cost (especially if it’s more expensive than we expected).

Pricing is one of the most important elements in any ecommerce design, but its ubiquity can make it easy to overlook when considering your designs. This is especially true when you start considering accessibility. I’d like to explore some of the issues that can arise looking at prices online and how they can impact accessibility. The techniques and ideas I encountered trying to make prices more accessible in our Shopify themes helped make pricing clearer for everyone.

Our tester chuckled, “Well, I guess that was the price? I hope I’m paying the lower one!”

My journey began during a user-testing session we performed at Shopify. We asked a non-sighted accessibility expert who relies entirely on screen readers and other assistive technologies to navigate the web (such as braille displays) to audit some of our designs. We tasked the tester with finding a T-shirt in one of our demo stores.

In hindsight, I was overconfident about how we handled prices in our themes. We hadn’t broken any of the basic rules of accessibility in our visual layout or markup. We didn’t rely on color alone to indicate state, and our contrast was pretty good (sidebar: I definitely recommend you read Ryan’s article on color contrast if you haven’t yet; it’s a key part of building accessible prices!).

Our tester navigated to our product page without issues (hurray!) but things went downhill once he reached the pricing and product descriptions for a T-shirt he liked. When his screen reader read my supposedly accessible prices, its robotic voice spewed out: “Standard Henley 100 dollars 50 dollars.” The tester chuckled, “Well, I guess that was the price? I hope I’m paying the lower one!” and moved along. I was blown away. I’d already tested that page using a screen reader and never noticed a problem with the way the numbers were being announced to the user. I was still seeing the content from a sighted users perspective and listening for obvious mistakes.

The price that started it all. Not so readable by screen readers.

When we created our checklist for making our themes accessible, we overlooked a few important questions at the core of what our design was trying to achieve. When building things, we weren’t considering the user or asking questions on their behalf. We needed to question the intentions of the designs themselves.

We needed to answer questions like:

  • If I’m color blind, can I tell the difference between the prices?
  • If there are two prices, is it clear whether it’s the sale price or possibly the price for a different size or color?
  • If I use a screen reader, can I tell the difference between the sale price and the regular price?

How to Build Better Prices

There are a number of things that can make a price hard to understand. Here’s what we’ll be covering in the rest of the article:

What are our goals?

  • Help people understand what price they’ll be paying
  • Make sure they understand the relationship between the prices they see and the product they’re looking at

What can make prices accessible:

  • Easy-to-understand visual layouts
  • Removing extra HTML markup that confounds screen readers
  • Not exclusively relying on visual cues to differentiate between the regular and sale prices

Some unexpected gotchas:

  • How to handle cents and currencies in an accessible way
  • How to deal with sale pricing

We’ll use some examples from Shopify themes to demonstrate how to fix these. Let’s start with a baseline: what I like to think of as the platonic form of pricing. It’s got everything you might want in a price and is very effective in its simplicity.

A simple effective price that’s accessible

The layout is clear. Only one price is visible, and it’s in a different color to help distinguish it from the product copy. For a visitor using a screen reader, the price would be obvious. However, things can get complicated pretty quickly.

Example of a more complicated price from our Supply theme

This one is more visually opinionated. We have a ‘save $265’ badge so people know that the product is on sale, and we got rid of the decimal point and put the cents in a <sup> tag. From a visual standpoint, this is still a fairly accessible price. The problems become apparent, however, when we turn on our screen reader and start hearing the price read back to us by the computer.

Below is an image of what the screen reader will announce when it tries to read our price. In these examples we’ll be using VoiceOver built into macOS. VoiceOver has a handy feature where it displays the content that the screen reader is reading aloud. (There are great resources available for learning how to use screen readers in your testing: I worked from this guide.)

Screenreader announcing our inaccessible pricing on Supply

My screen reader is announcing the price as ‘four five four nine nine,’ which could easily mean $45,499 or $454.99. There’s no way for someone using a screen reader to know. The root of this problem is that we’re placing our cents in a <sup> tag to facilitate our visual layout. Wrapping any part of our price in a separate HTML tag like <sup> or <span> can prevent screen readers from understanding the relationship between the numbers in the price.

<span class="product-price h1">
454<sup>99</sup>
</span>
<span class="compare-price sale-tag">  
Save $265<sup>00</sup>
</span>

Thankfully, the fix is relatively easy. We can hide the visual representation of the price using aria-hidden=”true” and expose an unformatted price to screen readers using a .visually-hidden element that is only announced by screen readers without affecting the visual layout. This is a really versatile tool for making your site more accessible and is worth adding to any project’s boilerplate CSS. Our team has built our own set of mixins and CSS rules based on the techniques outlined here by Snook.

<span class="product-price h1"> 
<span aria-hidden="true">
454<sup>99</sup>
</span>
<span class="visually-hidden">$454.99</span>
</span>

This makes our price much easier to understand for people using a screen reader. As you can see below, our price is now correctly announced as `four hundred fifty four dollars and ninety nine cents.’ We also get the benefit of including a currency symbol that will help screen readers understand which currency is being used on the shop.

Screenreader announcing our updated, accessible price on Supply

Our next step is making clear to users which price they’re actually paying and how two prices might relate to each other. A lot of designs will rely on visual indicators such as a strike-through, or a different font size or color to show this. It’s fairly common that the price and sale price won’t be labelled. This is what caused our problem from the testing session I mentioned at the start of this post. A screen reader would announce the price below as ‘$218 $188.’ With two prices, it’s hard to understand which price you’re actually going to pay.

Inaccessible pricing on our Brooklyn theme

Thankfully, we can use the same techniques from our previous example, but in a slightly different way to make it clear to all our users how much they can expect to pay when they check out.

<span class="product-price">$218</span>
<span class="product-sale-price">$188</span>
<span class="product-price">
<span class="visually-hidden">Regular price</span>
$218
</span>
<span class="product-sale-price">
<span class="visually-hidden">Sale price</span>
$188
</span>

Below we can see that this gets announced in a much clearer: ‘Regular price two hundred eighteen dollars Sale price one hundred eighty eight dollars’

Screenreader announcing our new accessible pricing on Brooklyn

I hope these three examples have shown that it’s important to keep in mind building accessible prices when creating a more dynamic visual layout.

Make Pricing Better for Everyone

As a recap, remember to:

  • label your sale and regular prices
  • make it clear which price is the one the customer will be paying
  • take into account how your markup can impact the way screen readers understand your prices

And finally, having good techniques in your tool belt is great but you also want to make sure you’re doing a lot of testing. If you aren’t testing your assumptions, there’s no way to know whether they’re accurate. I found this out the hard way when we began doing user testing and getting feedback from people who were accessing our content with screen readers all the time.

If you’re on a Mac, it’s easy to start using VoiceOver during your development and adding NVDA to one of your VMs when you test your designs on Windows. If you’re on Windows, NVDA is a free download and a great alternative to the more expensive JAWS. You’ll also want to check out the accessibility tools available in iOS and Android when you’re doing your device testing. Just like you test your websites to make sure they’re responsive, this should be part of your development QA process.

I hope this has given you a little bit of insight into how prices are understood by sighted and non-sighted users, and some techniques you can start using today to improve the stores you work on. If you find a particularly good pattern on a site, I encourage you to share it with the community.