Issue #12 - crossed out content

HTML provides us with 2 different ways of identifying crossed out text*, the s and the del element.

<h3>Vietnamese Rose Wood Nose Flute</h3>
<p>
  The nose flute is the <del>mots</del> <ins>most</ins> beautiful instrument in the world.
</p>
<p>
  <s>Original price: € 19.99</s>
</p>
<p>
  <strong>Special offer: € 9.99!</strong>
</p>

* “Crossed out” in terms of its semantic meaning, usually but not necessarily displayed as crossed out text.

The s element

Use the s element to highlight contents that are no longer accurate or no longer relevant. A typical example is the old and the new price for a product.

<p><s>Original price: € 19.99</s></p>
<p><strong>Special offer: € 9.99!</strong></p>

Original price: € 19.99

Special offer: € 9.99!

The important bit here is that you don't display the price alone with no text because not all screen readers announce the s element as such.

€ 19.99

€ 9.99!

<p><s>€ 19.99</s></p>
<p><strong>€ 9.99!</strong></p>

If you have to display the price only, hide the text visually.

.sr-only {
  position: absolute;
  white-space: nowrap;
  width: 1px;
  height: 1px;
  overflow: hidden;
  border: 0;
  padding: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  margin: -1px;
}

<p>
  <span class="sr-only">Original price: </span><s>€ 19.99</s>
</p>
<p>
  <span class="sr-only">Special offer</span><strong>€ 9.99!</strong>
</p>

Original price: € 19.99

Special offer€ 9.99!

Steve Faulkner and Adrian Roselli present a different technique involving pseudo elements for making the s element accessible in Short note on making your mark (more accessible) and Tweaking Text Level Styles.

The del element

Use the del element to highlight a removal from the document. Use the optional cite attribute to link to more information about the edit and the datetime attribute to add the date (and time) of the edit.

<p>
  The nose flute is the <del datetime="2021-09-03T17:42:30">mots</del> <ins datetime="2021-09-03T17:42:36">most</ins> beautiful instrument in the world.
</p>

The nose flute is the mots most beautiful instrument in the world.

Talkback on Android announces this sentence as “The nose flute is the mots deletion most insertion beautiful instrument in the world“, but VoiceOver and other screen readers announce “The nose flute is the mots most beautiful instrument in the world“. To force screen readers to announce the edit, Adrian and Steve recommend using pseudo elements.

del::before, del::after, 
ins::before, ins::after {
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  width: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}

del::before {
  content: " [deletion start] ";
}

del::after {
  content: " [deletion end] ";
}

ins::before {
  content: " [insertion start] ";
}

ins::after {
  content: " [insertion end] ";
}

Using this technique results in VoiceOver announcing “The nose flute is the deletion start mots deletion end insertion start most insertion end beautiful instrument in the world“.

As always, test with your users to find the best solutions for them.

Resources

• Tweaking Text Level Styles
• Short note on making your mark (more accessible)
• Vietnamese Rose Wood Nose Flute