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.
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
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"
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.
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.