<del>: Das Deleted Text-Element

Probieren Sie es aus

<blockquote>
  There is <del>nothing</del> <ins>no code</ins> either good or bad, but
  <del>thinking</del> <ins>running it</ins> makes it so.
</blockquote>

del {
  text-decoration: line-through;
  background-color: #ffbbbb;
  color: #555555;
}

ins {
  text-decoration: none;
  background-color: #d4fcbc;
}

blockquote {
  padding-left: 15px;
  border-left: 3px solid #d7d7db;
  font-size: 1rem;
}

Dieses Element wird oft (aber nicht zwingend) durch Anwenden eines Durchstreichstils auf den Text angezeigt.

Attribute

Die Attribute dieses Elements umfassen die globalen Attribute.

cite

Eine URI für eine Ressource, die die Änderung erklärt (zum Beispiel Sitzungsprotokolle).

datetime

Dieses Attribut gibt die Zeit und das Datum der Änderung an und muss ein gültiger Datumsstring mit einer optionalen Uhrzeit sein. Wenn der Wert nicht als Datum mit optionalem Zeitstring geparst werden kann, hat das Element keinen zugeordneten Zeitstempel. Für das Format des Strings ohne Zeitangabe siehe Datums-Strings. Das Format des Strings, wenn er sowohl Datum als auch Zeit enthält, wird in Lokale Datums- und Zeit-Strings behandelt.

Barrierefreiheit

Die Anwesenheit des del-Elements wird in den Standardeinstellungen von den meisten Screenreader-Technologien nicht angekündigt. Es kann angekündigt werden, indem die CSS-Eigenschaft content zusammen mit den Pseudoelementen ::before und ::after verwendet wird.

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

del::before {
  content: " [deletion start] ";
}

del::after {
  content: " [deletion end] ";
}

Einige Menschen, die Screenreader verwenden, deaktivieren bewusst die Ankündigung von Inhalten, die zusätzliche Ausführlichkeit erzeugen. Aus diesem Grund ist es wichtig, diese Technik nicht zu missbrauchen und sie nur in Situationen anzuwenden, in denen das Nichtwissen um den gelöschten Inhalt das Verständnis beeinträchtigen würde.

• Short note on making your mark (more accessible) | The Paciello Group
• Tweaking Text Level Styles | Adrian Roselli

Beispiele

<p><del>This text has been deleted</del>, here is the rest of the paragraph.</p>
<del><p>This paragraph has been deleted.</p></del>

Ergebnis

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• <ins>-Element für Einfügungen in einen Text
• <s>-Element für Durchstreichungen, die getrennt von der Darstellung der Textlöschung sind