The price is…which?

Written by Gerardo Rodriguez on

Illustration by Aileen Jeffries

Some of the largest sporting goods e-commerce sites don’t provide an accessible experience for sale prices. A few small changes can significantly enhance the experience.

Imagine yourself excitedly walking into a physical store looking to buy a new shirt. After browsing for a couple of minutes, you find a shirt you are thrilled to purchase. 😁

You look at the price tag, and with a confused expression, discover two prices with no visual difference: $25 $35. What is the price of the shirt? 🤔

You decide to find a store employee to ask them to clarify the price of the shirt.

“Hello! Can you help me? What is the price of this shirt?”

With a smile, the store employee responds, “$25. $35.”

Your confused expression intensifies. You ask again, “Sorry, perhaps I misunderstood. What is the price of this shirt?”

With an even larger smile, the store employee responds, “$25. $35.”

You look around, wondering if someone is trying to pull a prank on you. Determined, you ask one more time, “I don’t understand, you are giving me two prices. I’ll ask once more, what is the price of this shirt?”

With their smile persisting, the store employee once again responds, “$25. $35.”

You take a deep breath and politely say, “Thank you,” and decide today wasn’t the day to purchase that shirt, leaving it behind as you exit the store. 😕

Prices, prices, prices

You might think, “That was a frustrating experience.” I agree! You might then push back and say, “But that’s not a real experience for customers.” And to that, I respond, “You’d be surprised!”

I got curious the other day how some of the largest sporting goods e-commerce sites handle the sale price customer experience for their products. Visually, I didn’t see anything unexpected. A crossed-out price next to a non-crossed-out price with some visual styles provided enough information and context to understand why there were two prices: the original price and the sale price. You can imagine something like the following:

See the Pen
Sale price, original experience
by Gerardo Rodriguez (@gerardorodriguez)
on CodePen.

Once I turned on my screen reader1, I discovered the auditory experience was as confusing and frustrating as the imaginary experience above. My screen reader read to me something similar to:

“The Perfect Shirt”
“5 colors available”
“$25. $35.”

In the following video, I captured the frustrating customer experience on both Nike and Adidas2:

A confusing and frustrating customer experience when encountering sale prices on the Nike and Adidas e-commerce websites

I was read two prices, with no differentiation, no further information or context. Why two prices? Which one is the correct price?

This is not an inclusive experience. 😔

Creating a more inclusive experience

How might we make this a more inclusive experience? Let’s explore one possible solution together.

Below is the HTML that mimics what I found as the current experience:

<h3>Big Name Brand</h3>
<p>The Perfect Shirt</p>
<p>5 colors available</p>
<div class="price-wrapper">
  <div>$25</div>
  <div class="is-striked-out">$35</div>
</div>

First, let’s see if we can use more semantic markup:

<div class="price-wrapper">
  <span>$25</span>
  <s>$35</s>
</div>
  • The <span> tag around the current price should suffice.
  • We can use a more semantic <s> tag for the regular price and get the visual strikethrough treatment for free!

We need to figure out how to provide some more audible context to help the customer understand why there are two prices. Ideally, my screen reader should say something like, “On sale for $25, regular price $35”.

We might be tempted to use an aria-label, but since the aria-label doesn’t translate, we look at a different solution.

Instead, let’s look at adding visually hidden text to provide extra context. This text will only be accessible to assistive technologies like a screen reader and won’t impact the visual design:

<div class="price-wrapper">
  <span>
    <span class="u-visually-hidden">On sale for $25</span>
    $25
  </span>
  <s>
    <span class="u-visually-hidden">Regular price $35</span>
    $35
  </s>
</div>

And the rules for the u-visually-hidden CSS class:

/** 
 * Hide the content visually, still accessible to screen readers.
 */
.u-visually-hidden:not(:focus):not(:active) {
  border: 0; 
  clip: rect(0 0 0 0); 
  clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
  -webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
  height: 1px; 
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

Giving it a quick test with my screen reader, I hear something like:

“The Perfect Shirt”
“5 colors available”
“On sale for $25”
“$25”
“Regular price $35”
“$35”

Progress! One last detail, we don’t want to hear the same price repeated multiple times. We can use aria-hidden to hide the visual price from the accessibility tree, which the screen reader reads from:

<div class="price-wrapper">
  <span>
    <span class="u-visually-hidden">On sale for $25</span>
    <span aria-hidden="true">$25</span>
  </span>
  <s>
    <span class="u-visually-hidden">Regular price $35</span>
    <span aria-hidden="true">$35</span>
  </s>
</div>

Now, if we listen to the experience we hear something like:

“The Perfect Shirt”
“5 colors available”
“On sale for $25”
“Regular price $35”

See the Pen
Sale price, more inclusive experience
by Gerardo Rodriguez (@gerardorodriguez)
on CodePen.

So much better! Now we have a much more inclusive experience. Creating a more accessible experience did not impact the visual design while significantly enhancing the auditory experience. Win, win! 🎉

Slightly modified approach

You may have noticed that the price repeats twice in the HTML markup. If this proves a challenge (technically or otherwise), we can look at a slightly different approach to avoid this:

<div class="price-wrapper">
  <span>
    <span class="u-visually-hidden">On sale for:</span>
    $25
  </span>
  <s>
    <span class="u-visually-hidden">Regular price:</span>
    $35
  </s>
</div>

The auditory experience will be slightly different because there will be additional pauses between the visually hidden text label and the price. It’ll be something like (with VoiceOver + Safari):

“The Perfect Shirt”
“5 colors available”
“On sale for:”
“$25”
“Regular price:”
“$35”

See the Pen
Sale price, a more inclusive experience
by Gerardo Rodriguez (@gerardorodriguez)
on CodePen.

I prefer having the price read together with the visually hidden text, but that is a personal preference. This is still a much better experience than where it started.

Thoughtful, inclusive, accessible design

Regardless of your role in contributing to the web, having a fundamental understanding and basic experience using assistive technology like a screen reader is very helpful. As with any creative craft, there is no one correct answer. The best solution will depend on multiple factors, including your audience and project goals. We all strive to create the best user experiences we can; there’s an opportunity to elevate the user experience design to be more accessible. Let’s ensure we consider all our customers when designing experiences. 🙂

Extra Resources


  1. A screen reader is an assistive technology that helps people who are blind or visually impaired to navigate the web. I used VoiceOver with Safari on macOS for this exploration (the recommended combination on Mac). Remember to test across various devices and assistive technologies to ensure you are designing the most inclusive experience. 
  2. My research included a handful of sporting goods e-commerce sites, including Nike, Adidas, Puma, New Balance, Under Armour, and Reebok. This issue appears to be widespread. Out of this group, New Balance had the most inclusive customer experience. 
Gerardo Rodriguez

Gerardo Rodriguez is a developer driven by curiosity and the love of learning. His experience with art, design, and development make him a well-rounded maker of things on the web. You’ll find him sharing some thoughts and resources on Twitter via @_gerardo.

Never miss an article!

Get Weekly Digests


Leave a Comment

Please be kind, courteous and constructive. You may use simple HTML or Markdown in your comments. All fields are required.


Let’s discuss your project! Email Us