The price is…which?

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. 😕

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 readerFootnote 1 , 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 AdidasFootnote 2 :

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. 😔

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>
Code language: HTML, XML (xml)

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

<div class="price-wrapper">
  <span>$25</span>
  <s>$35</s>
</div>
Code language: HTML, XML (xml)

• 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>
Code language: HTML, XML (xml)

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;
}
Code language: CSS (css)

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>
Code language: HTML, XML (xml)

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! 🎉

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>
Code language: HTML, XML (xml)

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.

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. 🙂

• Deque University Screen Reader Keyboard Shortcuts and Gestures guides
• See No Evil: Hidden Content and Accessibility by Paul Hebert
• The A11Y Project – Hide content