Exposing Style Information To Screen Readers

On many websites, I have come across situations where text has been crossed out using the <del> or <strike> tags. Unfortunately, most browsers don't expose the role of these tags to screen readers, so text coded with these tags can be confusing. Take, for example, the product tile below.

Clearance Sale
Internet Explorer
T-Shirt
$30.00 $10.00

If you use a screen reader and tab into the product tile, more likely or not, your screen reader will announce something like "Link, Clearance Sale. Internet Explorer T-Shirt $30.00 $10.00". Screen reader users would not know that the $30.00 is crossed out to denote that the price has dropped to $10.00.

So how can we fix this so screen readers announce the text as deleted or as strike-through text?

Solution: Use Visually Hidden Text

recommended solution This is the best way to implement style information to screen readers.

The most bulletproof way to fix this today that I know of is using visually hidden text to ensure that screen readers know it is old information. Notice that I am not using del or ins tags here: this is because some screenreaders do not read text inside del and ins reliably. Some web browsers, like Voiceover with Safari, don't even read the content at all. When the user tabs into the product tile below, screen readers will announce something like "Link, Clearance Sale. Internet Explorer T-Shirt Old Price: $30.00 New Price: $10.00"

Clearance Sale
Internet Explorer
T-Shirt
.
Old Price: $30.00 New Price: $10.00

Let's walk through how we ensure this stricken text is read correctly by screen readers and other assistive technologies.

Code Walkthrough of the Above Example

Below is the HTML of the above example. Use the dropdown to highlight each of the individual steps that make the example accessible.

☜ Scroll to read full source ☞

                    
                

How we use this in Enable

Highlighted text can also be marked up in a similar way to emphasize that it is highlighted. Take this example (which is the same markup we use in the code walkthroughs to highlight text). It has visually hidden text to tell screen reader users where the highlighted code begins and ends (e.g. in Voiceover's reading mode, the highlighted code will read "Start of highlighted code" and "End of Highlighted code" at the beginning and end of the code that is highlighted)


<div>
  Start of highlighted code.<del>
  $30.00
</del>End of highlighted code.
</div>
  

Code Walkthrough of the Above Example

Below is the HTML of the above example. Use the dropdown to highlight each of the individual steps that make the example accessible.

☜ Scroll to read full source ☞