Screen reader users need to be able to know the regular price and the sale price. But why and how? We’ll go over both. We are going to display some code here, but it is for sample purposes only. You don’t need to be a developer to understand the bits we’ll be discussing. If you are looking for more in-depth information, check out our post for WCAG (Level AA) SC 1.4.3 Contrast (Minimum) and WCAG (Level A) SC 1.4.1 Use of Color.
What makes a sales price inaccessible
Sighted users are able to see something like $10.00 $6.00 and immediately conclude the savings they’re getting. From a marketing stand-point, that makes items on sale more appealing. It’s why any store with a membership system shows both the member and non-member prices — look at all the money you could be saving! However, the strikethrough isn’t always translated to screen readers (meaning it’s just read as a number with no distinguishing features). And sometimes, depending on the type of plugin or theme you’re using, the original price is ignored by screen readers entirely and they’ll only get the sale price.
“But they still know how much it costs at the moment; that’s what matters, right?” Well, yes and no. If you don’t know how much you’re saving, how do you know how quickly you should act? If you put off purchasing an item, how detrimental could that be to one’s wallet if you come back and the item is no longer on sale? Sure, having to spend a couple extra dollars is one thing, but what if we’re talking about something substantial? $100 (USD) or more off a product could make or break a sale. So if a screen reader user doesn’t actually know how much they’re saving, they don’t know what they may be missing out on (and you could be missing out on a sale).
How to check if your sale prices are accessible
Method #1 – Copy and paste
Using a WooCommerce theme for WordPress as an example, an ideal solution is hidden screen reader text:
<div class="wc-block-grid__product-price price">
<del aria-hidden="true">
<span class="woocommerce-Price-amount amount">
<span class="woocommerce-Price-currencySymbol">$</span>99.00</span>
</del>
<span class="screen-reader-text">Original price was: $99.00.</span>
<ins aria-hidden="true"><span class="woocommerce-Price-amount amount">
<span class="woocommerce-Price-currencySymbol">$</span>95.00</span>
</ins>
<span class="screen-reader-text">Current price is: $95.00.</span>
<span class="subscription-details"> / month</span>
</div>This mean, screen reader users hear “Original price was: $99.00” and “Current price is: $95.00”, giving them context of the sale (due to the aria-hidden="true" attribute, a screen reader ignores the visual amount). However, the visual output is still “$99.00 $95.00 / month”.
So how can a non-developer test their regular and sales prices? Well, a pretty simple way to do it is just by copying a pasting any sample theme you’re considering! For example, the snippet above is from WooCommerce’s Lumière theme:
If I highlight the entirety of the sale price (as seen in the screenshot), copy it, and paste it anywhere, the output is: “$99.00 Original price was: $99.00.$95.00Current price is: $95.00. / month”. This reveals the hidden screen reader text! Using Shopify’s “Trade” theme demo, copy and pasting the sale price results in: “Regular price$309.00 USD Sale price$216.00 USD” which also reveals hidden screen reader text. Screen reader text is still content that exists, it’s just visually hidden but totally accessible via this method.
This should be checked on any theme you’re looking at. Just because one theme has optimized or retained a feature for accessibility, doesn’t mean they all have. Even if it’s a core feature (meaning it comes from the parent platform, not the theme itself), it’s not uncommon for theme developers to not be aware of this feature and do something that overrides it entirely. For example, Shopify’s “Spark” theme demo outputs “$380 $450”, meaning screen readers don’t get the context of the sale item. In Spark’s case, all that is read is “$380” despite its markup being:
<div class="#price-inner">
<div class="#price-item @regular @on-sale ">
<dt class="#price-item-heading ">Sale price
</dt>
<dd class="#price-item-value">
<span class="#price-value">$380</span>
</dd>
</div>
<div class="#price-item @compare">
<dt class="#price-item-heading ">
Regular price
</dt>
<dd class="#price-item-value">
<span class="#price-value">$450</span>
</dd>
</div>
</div>An attempt was made. However, they used display: none on the screen reader text, removing it from programmatic access (which is also why it wouldn’t be picked up in the copy/paste). This is not the correct way to handle screen reader text and good example of how a theme within the same infrastructure could be better or worse for accessibility. This will always vary from developer to developer.
Method #2 – Use a screen reader
The fact is, programming and development have a wide range of capabilities. It’s entirely possible that a dynamic method for screen readers was implemented that is not conveyed through hidden syntax. So the most reliable method is using a screen reader for yourself and listening to what your on sale products sound like. You can do that by:
- Using your built-in screen reader. Most operating systems come with a screen reader pre-installed. To find out how to use yours, refer to the article “How to turn on built-in screen readers” by North Arizona University
- Or, you can download the free screen reader NVDA, one of the most widely used screen readers.
You can find cheat sheets for your screen reader’s shortcuts online. For beginners, I always recommend learning how to turn it off before you learn how to turn it on.
How to make your sale prices accessible
Unfortunately, if you realize the sale prices on your own shop aren’t accessible, you would need the assistance of a developer to implement dynamic screen reader text (or to fix the improper handling of screen reader text in the case of the “Spark” theme example).
However, a “better than nothing” approach is implementing one of the many plugins or add-ons most eCommerce Content Management Systems (CMS) offer that add the percentage label to the sales badge (“15% off”). This at least gives visually impaired users an idea of how much they’re saving and prompting them to act sooner rather than later when considering whether or not to purchase a product while it’s on sale.
Everyone loves a good deal, and that includes those who are visually impaired. Ensuring they know exactly what kind of deal they’re getting is critical for universal experience. Additionally, even something as seemingly minor as how a sale’s price label is conveyed can be an indicator of whether or not accessibility was considered by a theme’s developers. While there is no such thing as 100% accessible, this is a good example of a potential red flag that there could be other liabilities lurking within a theme. So do your due diligence to ensure your site is welcoming to as many people as possible.
