When the price isn't the price...

· 3 min read

Hi again,

Here’s a quick quiz! What’s the price of this item?

Product card showing two blurred jackets and text reading ‘Awesome product sale’. A large red sale price of £135.99 appears beside a smaller crossed-out price of £159.99
Visually, it’s clear which price is current - but that clarity disappears for anyone using a screen reader.

Most people would say: “Easy - £135.99”.

And they’d be right.

But that’s because they can see it.

For someone using a screen reader, both prices are just read out in order: “£135.99, £159.99”

No indication of which is the real price.

That single moment of doubt causes confusion, and confusion can cost sales.
If you saw two prices and weren’t sure which you’d actually pay, would you still click Add to Basket?

Here’s what that code usually looks like:

<div>
  <span class="product-price__current">£135.99</span>
  <span class="product-price__previous">£159.99</span>
</div>
Screen readers will announce both prices in order, leaving the user unsure which one’s correct.

And here’s the small change that fixes it:

<div>
  <span class="visually-hidden">Sale price:</span>
  <span class="product-price__current">£135.99</span>
  <span class="visually-hidden">Previous price:</span>
  <span class="product-price__previous">£159.99</span>
</div>
The “visually-hidden” class keeps the design exactly the same for sighted users -
the text is invisible on screen but read aloud by screen readers.

It’s a tiny fix, but it changes everything.

It turns a confusing moment into a confident one. And it builds trust.

It makes sure every customer knows the price they’ll pay — not just the ones who can see it.

That’s what accessibility is: clarity that earns confidence.

Talk soon,
Dave

P.S. I’d love to know - have you ever spotted something like this on your own site, or a client’s? Just hit reply and tell me.