An inclusive price update

people fighting at the door to a stores sales with the text reading as an inclusive price update Reading Time: 5 minutes

This blog post discusses the importance of providing an inclusive experience when presenting an updated and cheaper price. It first suggests a simple solution of using phrases like “Was $59. Now $49! Per seat, per month”. It then explores a coded solution.

Using HTML and CSS, a wireframe presents the pricing update audibly and visually, and without adding clutter. This highlights a need to know a little of a11y and inclusive design, and HTML and CSS.

We need to take greater care between prettying up designs in Figma and offering an inclusive experience.


  • We want to display an updated and cheaper price against the earlier more expensive price.
  • We want to attract all our visitors to the value proposition and drive conversion.
  • In testing with a screen reader, we are failing to meet our objective.

mock-up funny UI sales funnel box with sale price of $49 $59 per seat, per month. The $59 amount is struck through.

The implemented strike-through of the old price isn’t read by all screen readers. VoiceOver announces our pricing copy as follows, “$49 $59 per seat per month”. There’s no clue on which price is correct, or if there is a mistake. For example, is this $49 per seat and $59 per month?

Simple solution

Sometimes we can’t convert our design to an inclusively coded solution. Then we can consider writing something like:

Was $59. Now $49!
per seat, per month

The punctuation may insult writing standards and the content is universally available. Alternative phrasing is available. Think around the value of saving dollars and something will come to mind.

A coded solution

The following wireframe explores the presentation of our planned price update pattern.

Our aim is for people using a screen reader to enjoy the same experience as visual users. We need to present the same information audibly and visually, and without adding clutter.

Old then new, or new then old?

Should the new price be followed by the old price, or read the other way around?

That’s a great question and one that depends on the solution you choose. In the following wireframe, you can update the visual order of the content nodes without affecting their order in the DOM.

I’m a great believer in the last thing you read is what you remember. It’s why we should consider positioning Don’ts before Do’s. With that belief applied here, then our new price should be the second one we read. However, as the content is only short, then this may not be a concern. 

The intention isn’t to learn the old price, but to contrast it with the value of the new one. A visual reader may only scan the pattern and understand the contrast whatever the order.  You’ll have to decide on what you want and discover what your consumers need. 

“…You need to have a good understanding of the content before you even think of tackling the IA. If you don’t, your IA and content just won’t fit together later”

(Spencer in Godfrey, P. 2019)


We want our new price to contrast with the old price. We can use a monochrome colour scheme or introduce one from our design dialogue. In the following wireframe, we’ve styled the colours using the del and ins selectors.

The sharp-eyed among you will spot that we are enclosing the prices in the paired del and ins tags like Ying and Yang. It’s reasonable that when editing copy, we’ll insert copy when replacing copy that we marked for deletion.

There’s a chance the del strike or line-through will emphasise the degradation of the old price. The styles applied to our ins tag aim to contrast with the del tag and emphasise the fresh new and improved price.

Results with screen readers aren’t promising. The previous simple solution is the winner when an alternative CSS-based text displacement strategy isn’t available.

The wireframe

Model 1. Fully encoded.

per seat, per month

Use the following form to configure the presentation:

Choose a content order:


In our visual experience, the stronger emphasis of the new price gives it a clear hierarchy over the old price. The lower contrast former price emphasises the benefit of the new price. It’s strike-through shows that it’s no longer used.

Note: In Model 1, each node of content is has its own colour, contrast, and scale.

Adding emphasis
$59 $49 per seat per month

There’s a risk that a person using a screen reader can miss the meaning of our content. For example, the line-through style and del tag isn’t read by my VoicOver in Chrome.

We can use a combination of codes to improve the content experience for everyone. Let’s write some content–you can write better; this is only a demo.

price per seat per month used to cost $60 now it costs $49

This may be too verbose for your preferred visual design. It offers an inclusive audible experience though, and that’s where we’ll start.

Next, we can use CSS to make the excess content invisible to the eye while available to screen readers.

Removing excess content from sight

per seat per month $60 $49

Next, we can add the strike-through and visual emphasis for visual users:

Adding ins and del tags

per seat per month $60 $49

Using CSS Grid, we can swap the content nodes around. This shouldn’t affect the reading order that screen readers announce, so always test.

Updating the visual order using CSS Grid

$60 $49 per seat per month 
$49 $60 per seat per month

There. Now people relying on a screen reader can read and understand our content in context. Our visual design is clutter free and is understood at a glance.

The basic HTML and CSS

The following outlines the basic HTML and CSS code for the wireframe. An engineer can tidy it up and save one or two kilobytes for sure.

Note: Adding an id attribute to each content node allows us to insert dynamic text copy. We can then store and call the prices and allied content in a separate data file. This will save on page maintenance.

<p id="deal" class="deal"><span class="deal__copy"><span class="invisible">The price </span><span id="mycopy">per seat, per month</span></span><br/>
<span class="deal__oldPrice"><span class="invisible"> Formerly cost </span><del id="myold">$60</del></span><br/>
<span class="deal__newPrice"><span class="invisible"> Now it costs only </span><ins id="mynew">$49</ins></span>

.inline {
.deal {
  'new old copy';
  justify-content: start;
.deal span {
  padding:0 0.5rem 0 0;
  align-self: center;

.deal__copy {
.deal__oldPrice {
.deal__newPrice {
ins {
del {
.invisible {
clip: rect(0 0 0 0); 
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap; 


  • This page demonstrates a concept and not a final product.
  • Not all screen reader technologies are created equal. Beware ins and del failing to announce.
  • Using span can frustrate screen readers depending on their settings.
  • ARIA may be used in preference to the .invisible content class, and why? (1st rule of ARIA: don’t use ARIA).
  • Visual consumers using a screen reader may experience some disorientation when their screen reader focus doesn’t follow the visual reading order.
  • I’ve not mentioned using a slash in this pattern. So don’t use a freaking slash! It’s crass. Write words.


Content design isn’t all writing. It’s an empathetic UI and UX craft. We need to take greater care between prettying up our imaginations in Figma and offering an inclusive experience for all.

We UI designers and UX writers really do need knowledge of a11y, inclusive design, HTML, and CSS. We also need our engineers to meet or update our ambitions!


Leave a Reply

Your email address will not be published. Required fields are marked *