USER AGENT: Use of <del> or <ins> is not supported by all screen readers

Link to USER AGENT: Use of <del> or <ins> is not supported by all screen readers copied to clipboard

user-agent-semantic-del-ins

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

NOTE: Not all screen readers support (announce) and elements.

Fix this issue by using a text-based method to convey the meaning of the deleted or inserted text in addition to <del> or <ins> elements. The text can be provided for screen readers only or be visible on screen.

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