<ins>: HTML-Element für eingefügten Text

Probieren Sie es aus

<p>&ldquo;You're late!&rdquo;</p>
<del>
  <p>&ldquo;I apologize for the delay.&rdquo;</p>
</del>
<ins cite="../how-to-be-a-wizard.html" datetime="2018-05">
  <p>&ldquo;A wizard is never late &hellip;&rdquo;</p>
</ins>

del,
ins {
  display: block;
  text-decoration: none;
  position: relative;
}

del {
  background-color: #ffbbbb;
}

ins {
  background-color: #d4fcbc;
}

del::before,
ins::before {
  position: absolute;
  left: 0.5rem;
  font-family: monospace;
}

del::before {
  content: "−";
}

ins::before {
  content: "+";
}

p {
  margin: 0 1.8rem;
  font-family: "Georgia", serif;
  font-size: 1rem;
}

Attribute

Dieses Element unterstützt die globalen Attribute.

cite

Dieses Attribut gibt den URI einer Ressource an, die die Änderung erläutert, beispielsweise einen Link zu einem Sitzungsprotokoll oder einem Ticket in einem System zur Fehlerbehebung.

datetime

Dieses Attribut gibt Datum und Uhrzeit der Änderung an. Sein Wert muss eine gültige Datumszeichenfolge mit optionaler Uhrzeit sein. Wenn der Wert nicht als solche Zeichenfolge interpretiert werden kann, ist dem Element kein Zeitstempel zugeordnet. Das Format einer Zeichenfolge ohne Uhrzeit finden Sie unter Format einer gültigen Datumszeichenfolge. Das Format einer Zeichenfolge mit Datum und Uhrzeit wird unter Format einer gültigen lokalen Datums- und Uhrzeitzeichenfolge beschrieben.

Barrierefreiheit

Die meisten Screenreader kündigen das <ins>-Element in ihrer Standardkonfiguration nicht an. Mithilfe der CSS-Eigenschaft content und der Pseudoelemente ::before und ::after können Sie dafür sorgen, dass es angekündigt wird.

ins::before,
ins::after {
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

ins::before {
  content: " [insertion start] ";
}

ins::after {
  content: " [insertion end] ";
}

Manche Menschen, die Screenreader verwenden, deaktivieren bewusst die Ankündigung von Inhalten, die zusätzliche Ausführlichkeit verursachen. Setzen Sie diese Technik daher sparsam ein und nur dann, wenn es das Verständnis beeinträchtigen würde, nicht zu wissen, dass Inhalt eingefügt wurde.

• Textstile anpassen | Adrian Roselli

Beispiele

<ins>This text has been inserted</ins>

Ergebnis

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• <del>-Element zum Kennzeichnen von aus einem Dokument gelöschtem Text