Example 1 - Lost In Translation, HTML text-level semantic elements and screen readers

Summary

Screen readers do a poor job of communicating text-level semantics, even when the information is marked up using the appropriate html semantic tags.

Examples

Examples include:

Delete and insert using the <del> and <ins> elements.
Old and new price, marked up using the <s> and <ins> elements.
Importance marked using the element.
Emphasis using the element.
Footnote reference using the element.

Using <del> and <ins> elements

Screen readers should announce a "delete" indicator for "blue", and insert indicator for "red" in the following sentence.

My favorite color is ~~blue~~ red.

Using <s> and <ins> elements.

We mark the old price using the s element and the new price using the ins element. Screen readers should somehow indicate that the higher price is no longer relevant and that the new price was inserted.

The price for the Useless Blender 3000 is ~~$2999~~ $999

There is strong, and there is

Screen readers should put special emphasis on the word "never" in the following sentence.

You should never eat the yellow snow, unless you really want to.

Testing the tag

Screen readers should put special emphasis (such as using different voice) on the word "really" in the following sentence.

Do we really have to have this discussion again?

Using superscript to indicate a footnote reference.

Screen readers should announce the word "superscript" before the number one in the following sentence, or indicate its presence in some other way.

Please read our terms and conditions¹.

Explanations

HTML offers a number of elements that can be used to indicate semantically meaningful text. Even though most of these elements have been part of the HTML spec for years, screen readers generally ignore them. There is partial support in some screen readers but it requires the user to switch to an advanced speech scheme; one that users primarily associate with proof reading documents in text editors, not for use while browsing webpages.

Retail websites occasionally use the <del> or <s> tags to indicate old prices and the <ins> tag to mark the new special price. It is an effective way to advertize their sales. Browsers support this message with their visual styling. Similarly developers may want to emphasize a word or phrase on the webpage without making it into a heading. If the phrase is part of a text, a heading would not be appropriate. The superscript tag is a standard way to mark up references to footnotes or disclaimers.

The screen reader user misses out on this information because the semantic markup is not communicated. Developers have to use other techniques such as visually hidden text, which is hard to maintain in a rapidly evolving world of e-commerce. Sometimes the semantic information is extremely important, e.g. when used to communicate price changes or information before and after content updates or reference important disclaimers. Who would not want to notice the special offer price for their favorite product?

Imagine...

Your website is running a sale. You use the <s> and <ins> elements to communicate the original and sales prices.

A client who uses a screen reader calls and complains that he cannot figure out the product prices. But your boss tells you that more work cannot be fit into the website budget and points out that the semantic markup communicates all the information.