Issue #12 - crossed out content
I was on vacation last week and I didn’t have enough time to prepare a newsletter in advance. I took my laptop with me because I wanted to write it during my vacation, but it felt like work, so I left my laptop closed. I hope you can forgive me that I skipped 2 weeks. :)
Have a great weekend (or vacation),
Manuel
View this issue in the browser.
HTMHell Newsletter 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!
Note: Your e-mail client might display the text anyway, view this e-mail in the browser, if that's the case..
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
Read this issue in your browser or share it with others: htmhell.dev/tips/crossed-out-content