Your Sale Prices Might Be Invisible to Screen Readers (And That's an ADA Risk)

You have a sale running. The product page shows the old price crossed out, the new price in bold red, and a “30% OFF” badge in the corner. To a sighted shopper, the deal is obvious in half a second.

Now imagine you cannot see the screen at all. Your software reads the page aloud, one element at a time. What does it say? Far too often, it says something like: “Forty-nine dollars. Thirty-four ninety-nine.” Two numbers, no context. Is the first one the price? The second? Which one will you be charged? Is there even a discount? The shopper has no idea — and the cheerful red color and the “30% OFF” badge told them nothing, because color and image placement are invisible to a screen reader.

This is one of the most common and least-noticed accessibility problems in online retail. Your store can look polished and still completely hide your best offers from a significant slice of customers. Worse, sale pages are exactly the kind of high-traffic, high-intent page that gets tested in accessibility lawsuits and demand letters. If a disabled shopper cannot understand your pricing, that is a real barrier to a real transaction — the legal heart of an accessibility claim.

The good news: you do not need to be a developer to find these problems or to understand the fixes. Let’s walk through what goes wrong, how to test your own store in a few minutes, and what to ask your designer or platform support to change.

Why sale prices break for screen reader users

A screen reader is software that converts what is on the screen into speech (or braille) for people who are blind or have low vision. It reads the underlying content and structure of the page — not the visual styling. That distinction is the whole problem.

When you cross out a price, you might be doing it in one of two ways without ever knowing the difference:

  • The meaningful way: the old price is wrapped in markup that actually means “this text is no longer valid” (the HTML <del> or <s> element). A few screen readers can announce this as “deleted” or with a tone change, signaling that the price has changed.
  • The cosmetic way: the old price is just normal text with a line drawn through it using styling (a “line-through” effect). Visually identical. But to a screen reader, it is just another number with no indication that it is the old price.

The overwhelming majority of stores use the cosmetic way, because that is what page builders and themes produce by default. So the screen reader reads two bare numbers in a row with nothing to distinguish “before” from “after.” The user is left guessing.

It gets worse when you add the things that make a sale feel urgent and exciting:

  • The “30% OFF” badge is frequently an image or a decorative graphic with no text alternative. To a screen reader it is silence, or worse, a filename like “sale-badge-2.png.”
  • The red color that signals “discount!” to sighted shoppers means nothing on its own. Relying on color alone to communicate information is a specific accessibility failure (it is covered by WCAG success criterion 1.4.1, “Use of Color”).
  • The countdown timer (“Sale ends in 02:14:55”) often updates silently and is never announced, so the urgency simply does not exist for these users.
  • The price itself may be marked up oddly — split across multiple elements for the dollars and cents, or hidden behind an “Add to cart” interaction — so it reads as a jumble or not at all.

None of this is malicious. It is just the default output of tools that were built to look good, not to communicate clearly to assistive technology. But the effect is that your most motivated shoppers — people who arrived ready to buy a discounted item — cannot tell what the discount is.

A five-minute test you can run yourself

You do not need special equipment. Every major computer and phone already has a screen reader built in. Here is the simplest version of the test.

On a Mac: Open your product page in Safari or Chrome. Turn on VoiceOver by pressing Command + F5. Then use Control + Option + Right Arrow to move through the page one item at a time. Listen carefully when you reach the price area. Turn VoiceOver off with Command + F5 when you are done.

On Windows: Download the free screen reader NVDA (from nvaccess.org), start it, open your product page, and use the Down Arrow to read through the page line by line. Listen to how the price is announced.

On an iPhone: Turn on VoiceOver in Settings under Accessibility, then swipe right with one finger to move through each element on the page.

As you reach your sale price, ask yourself three questions:

  1. Can I tell there is a discount at all? If you only hear two numbers with no words around them, the answer is no.
  2. Can I tell which price I will actually pay? If the old and new prices are read in a confusing order with no labels, this is a problem.
  3. Is the discount badge announced? If the “30% OFF” graphic is silent, it is invisible to these users.

Close your eyes while you do this. It is uncomfortable at first, but it is the fastest way to understand what your customers are actually experiencing. If you came away confused about your own prices, your shoppers will be too.

How to fix it — in plain language

You can describe every one of these fixes to a designer, a freelancer, or your platform’s support team without writing a line of code yourself. Here is what to ask for.

1. Label the prices in words, not just visuals

The cleanest fix is to make the text itself unambiguous, so it works no matter what assistive technology a person uses. Instead of relying on a crossed-out number, the page should communicate something like “Original price: $49. Sale price: $34.99.” This can be done with visible labels, or with text that is available to screen readers even if it is visually compact. Ask for: “The original and sale prices should each be clearly labeled so a screen reader announces which is which.”

2. Use the right markup for the old price

Ask your developer or theme support whether the crossed-out price uses the <del> element (which carries meaning) rather than a purely visual line-through. This is a small change with no visual difference, and it helps the screen readers that recognize it. Pair it with the labels above so you are not relying on <del> alone.

3. Give the discount badge real text

If your “30% OFF” or “SALE” badge is an image, it needs a text alternative that says exactly that. If it is built with styled text, make sure that text is actual readable text and not, say, an image of text. Either way, the savings should be available as words. Ask for: “The sale badge must have a text alternative announcing the discount.”

4. Never let color be the only signal

Red text alone does not communicate “this is on sale.” There must always be a word, a label, or a clearly announced badge that conveys the same information. This protects not just blind users but also the roughly one in twelve men who have some form of color blindness and may not perceive your red-versus-black price distinction at all. (Our color and contrast guide goes deeper on this.)

5. Make urgency accessible too

If you use a countdown timer to drive sales, it needs to be built so that screen readers are informed of the time remaining without being interrupted constantly. This is its own small craft — we cover it in detail in our guide to accessible countdown timers — but the headline is: the urgency you are creating should reach every shopper, not just sighted ones.

Why this is worth your time

It is tempting to file this under “edge case.” It is not. People with disabilities make up a large share of consumers and control trillions of dollars in spending worldwide. When your sale prices are confusing or invisible to them, you are not just risking a legal complaint — you are turning away ready-to-buy customers at the exact moment they decided to spend money with you.

And the legal risk is genuine. Product and checkout pages are among the most frequently cited in website accessibility lawsuits and demand letters, because they are where the barrier directly blocks a transaction. A pricing display that a disabled shopper cannot understand is a textbook example of the kind of barrier these claims target. Fixing it is far cheaper than responding to a demand letter — see our breakdown of what an ADA lawsuit actually costs a small business.

The encouraging part is that pricing fixes are usually small. You are not rebuilding your store. You are adding a few words, a text alternative, and the correct markup so that the deal you are already offering reaches everyone. Run the five-minute test this week. If your own sale prices confused you with your eyes closed, that is your to-do list — and it is a short one.

We’re building a simple accessibility checker for non-developers — no DevTools, no jargon. Join our waitlist to get early access.