Skip to content

Durchstreichen, Löschen und Einfügen

Durchgestrichener Text sollte mit dem `<del>`-Element markiert werden

Um gelöschten Text zu markieren, benutzt man das Element <del>. Eingefügter Text wird durch eine durchgestrichene Linie in der Mitte gekennzeichnet.

Kritischer durchgestrichener Text muss durch eine textbasierte Methode ergänzt werden, um die Bedeutung des Durchstreichens zu vermitteln

Im folgenden Zitat wurde der ursprüngliche Preis (100 $) markiert. Der neue Preis (75 $) wurde zum Einfügen markiert. Der verborgene Text sagt: “Preis reduziert!” 100 $ jetzt 75 $!

<head>
<title>Sample web page>
<style>
  .visually-hidden {
  position: absolute;
  clip: rect(0 0 0 0);
  border: 0;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  width: 1px;
  white-space: nowrap;
}
</style>
</head>
<body>
<p>Price reduced!
  <del>
  <span class="visually-hidden">Was</span>
    $100
  </del>
  <ins>
  <span class="visually-hidden">now</span>
    $75!
  </ins>
</p>
</body>

Text, der eingefügt werden soll, sollte mit dem `<ins>`-Element markiert werden

Das semantisch korrekte Element, das zur Markierung von eingefügtem Text (in der Regel in juristischen Dokumenten) verwendet wird, ist das <ins>-Element. Das Element wird in der Mitte des Textes eingefügt und wird durch eine eingefügte Linie gekennzeichnet.

Kritischer Text, der für die Einfügung vorgesehen ist, muss durch eine textbasierte Methode ergänzt werden, um die Bedeutung der Einfügung zu vermitteln

Im folgenden Zitat wurde das Wort “nichts” gelöscht und durch “irgendetwas” ersetzt. Der gelöschte Text ist durchgestrichen und der eingefügte Text ist unterstrichen. Es gibt Text, der erklärt, was auf dem Bild steht.

<head>
<title>Sample web page>
<style>
  .visually-hidden {
  position: absolute;
  clip: rect(0 0 0 0);
  border: 0;
  height: 1px; margin: -1px;
  overflow: hidden;
  padding: 0
  width: 1px;
}
</style>
</head>
<body>
<p>If you can't say something nice, don't say
  <del>
  <span class="visually-hidden">begin deleted text</span>
    nothing
  <span class="visually-hidden">end deleted text</span>
  </del>
  <ins>
  <span class="visually-hidden">begin inserted text</span>
    anything
  <span class="visually-hidden">end inserted text</span>
  </ins>
  at all.</p>
</body>