Deleted or inserted text is not identified for screen readers

Rule

Information or relationships presented visually MUST also be provided programmatically or in text.

Background

People who are blind cannot perceive information that is provided only through CSS styling. In order to convey that information to screen readers it must be also provided programmatically or in text. When visual information is also provided programmatically or in text, a screen reader user will be able to understand that information.

How to Fix

Fix this issue by doing ONE or BOTH of the following:

1. Use a text-based method to convey the meaning of the deleted or inserted text. The text can be provided for screen readers only or be visible on screen. (STRONGLY PREFERRED)

<p>Price reduced! <del><span class="visually-hidden">was </span>$100</del> <ins><span class="visually-hidden">now </span>$75!</ins></p>

<p>Price reduced! <del>Was: $100</del> <ins>Now: $75!</ins></p>

2. Use <del> or <ins> elements to convey the meaning of the deleted or inserted text. (NOTE: Not all screen readers support these HTML elements.)

<p>Price reduced! <del>$100</del> <ins>$75!</ins></p>