<ins>: Das eingefügte Textelement

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨Juli 2015⁩.

Das <ins> HTML-Element repräsentiert einen Textbereich, der einem Dokument hinzugefügt wurde. Sie können das <del>-Element verwenden, um ähnlich einen Textbereich zu kennzeichnen, der aus dem Dokument gelöscht wurde.

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 enthält die globalen Attribute.

cite: Dieses Attribut definiert die URI einer Ressource, die die Änderung erklärt, wie zum Beispiel einen Link zu Protokollnotizen oder einem Ticket in einem Problemlösesystem.
datetime: Dieses Attribut gibt die Zeit und das Datum der Änderung an und muss ein gültiges Datum mit optionalem Zeitstring sein. Kann der Wert nicht als Datum mit optionalem Zeitstring geparst werden, hat das Element keinen zugeordneten Zeitstempel. Für das Format des Strings ohne Zeit siehe Format eines gültigen Datumsstrings. Das Format des Strings, wenn sowohl Datum als auch Zeit eingeschlossen sind, ist im Format eines gültigen lokalen Datums- und Zeitstrings beschrieben.

Barrierefreiheit

Das Vorhandensein des <ins>-Elements wird in der Standardkonfiguration von den meisten Screenreadern nicht angekündigt. Es kann mithilfe der CSS-content-Eigenschaft zusammen mit den ::before und ::after-Pseudoelementen angekündigt werden.

css

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

Einige Personen, die Screenreader verwenden, deaktivieren bewusst die Ankündigung von Inhalten, die zusätzliche Verbosität schaffen. Daher ist es wichtig, diese Technik nicht zu missbrauchen und sie nur in Situationen anzuwenden, in denen das Nichtkenntnis davon, dass Inhalt eingefügt wurde, das Verständnis nachteilig beeinflussen würde.