Exposing Style Information To Screen Readers
On many websites, I have come across situations were text has been crossed out using the <del> or
<strike> tags. Unforunately, 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 1: 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 inside to the del
tag to ensure that screen readers know it is old information. 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 makes 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 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 makes the example accessible.
Solution 2: Using CSS Generated Content
Although this works with the majority of screen readers out there, we do not recommend using this solution in production. While this seems to be a common way to fix this issue (since it does not require changing the HTML markup), this violates Failure of Success Criterion 1.3.1 due to inserting non-decorative content by using ::before and ::after pseudo-elements and the "content" property in CSS. The main issue with using this is that if a user uses a custom stylesheet to navigate the web, the code in this solution may be removed. While some may say this is an edge case, it is still technically a violation, which is why we warn against using it. We do, however, present this solution for informational purposes, and point to some blog posts arguing to using it below.
Another (flawed) way to tell screen readers about styled content is use visually hidden CSS generated content to insert visually hidden text before the striken price so screen reader users can understand that this was the old price. For most screen reader users that tab 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"
When you go through the code walkthrough below, you can see we use ::before and ::after rules to insert the added text into the accessibility tree.
While using CSS generated content for non-decorative content is a failure of WCAG 1.3.1 because this information will be lost of the user turns off CSS in their browser, Adrian Rosselli has a great article that questions its inclusion as a strict violation. Because it is considered a failure in the WCAG documentation, we cannot really recommend the use of this code pattern. That said, we include the following code walkthrough to explain its use in case you see it in the wild (and we are pretty sure this discussion will be an ongoing one).
Here is how the example above is coded:
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 makes the example accessible.