Deleted, Inserted And Irrelevant Text (<del>, <ins>, <s>)

When To Use

• Use <del> elements to denote text as deleted from a document. ¹
• Use <ins> elements to denote text as added to a document. ²
• Use <s> elements to denote text as no longer relevant or accurate. ⁵

Rules

• It is recommended to use the <s> element in many situations instead of the <del> element, as the <del> element is specifically designed to indicate changes made to a document. Conversely, the <s> element can be used more generally. For instance, one can use the <s> element to indicate menu items that are sold out in a restaurant menu. ³
• The <del> and <ins> elements both provide support for attributes that allow for the definition of the time of an edit and the URI of the resource that explains the edit. The "datetime" attribute can be used to specify the date and time of the edit, while the "cite" attribute can be used to provide a URI to a resource that provides further information about the edit. ²
• It is not recommended to use the <del> and <ins> tags on multiple paragraphs simultaneously. Instead, it is better to use these tags to indicate edits, deletions, or insertions on each paragraph individually. This approach provides greater clarity and specificity regarding the edits being made to the content. ¹
• It is not recommended to wrap the <del>, <ins>, or <s> elements around a <li> or <tr> element to indicate the deletion, insertion, or strike-through of an entire list item or table row. Rather, it is best practice to place the <del>, <ins>, or <s> elements inside the <li> or <tr> elements to specify the specific changes made to the item or row. This approach provides greater accuracy and clarity about the edits being made. ¹
• Don‘t use CSS "line-through", since this is less semantic and is never conveyed to screen reader users. ³
• Most screen readers do not announce the <del>, <ins>, and <s> elements by default. There is however a technique to let these elements get announced. This technique is added to the examples below.
  • It is important to note that some users may intentionally disable the announcement of certain content that creates unnecessary verbosity. While this technique will still provide an announcement for these users, it is best to use this method only when it is absolutely necessary to understand the content. This ensures that users who do not want the extra verbosity will not be burdened with unnecessary announcements. ⁶
  • The quality of the code may decrease with the use of this method as it involves adding content to the CSS. ⁴
  • Also users who deactivate CSS do not get these elements announced to them.

Examples

Added announcement for <del> elements: ⁴

/* hide the pseudo-elements visually but not for screen reader */
del::before,
del::after {
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
 
/* add announced text before and after the element */
del::before {
  content: " [deletion start] ";
} 
del::after {
  content: " [deletion end] ";
}

Sources 

1. HTML Spec: Living Standard, 4.7 Edits, del is licensed under Creative Commons Attribution 4.0 International License
2. HTML Spec: Living Standard, 4.7 Edits, ins is licensed under Creative Commons Attribution 4.0 International License
3. WebAIM: Text/Typographical Layout © WebAIM
4. Adrian Roselli: Tweaking Text Level Styles by Adrian Roselli © Adrian Roselli
5. MDN: <s>: The Strikethrough element by Mozilla contributors is licensed under CC-BY-SA 2.5
6. MDN: <del>: The Deleted Text element by Mozilla contributors is licensed under CC-BY-SA 2.5