These styles may not be beautiful (they aren’t), but they work for screen reader users who cannot see them (including multilingual support), they work in Windows High Contrast Mode (WHCM), and they work when printed. That means you can steal the CSS and fold it into your own eye-catching styles to make them accessible. Also, the contrast in these examples is sufficient, but be sure your own styles have good contrast too.
<del> element on
text that we are indicating is deleted. It should be obvious which text we just cut.
Opposite of the last one, this is . We do this with the
Read more in my blog post Tweaking Text Level Styles, where I also discuss
<s>. I have screen shots of print styles and WHCM, and videos of screen readers.
- This pen is for the May 2018 week 1 CodePen challenge, HTML Buddies.
- You can see a wrap-up of week 1 on the CodePen blog.
- See all four of my pens for this challenge at my site with additional context.