<ins>: Das eingefügte Textelement

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 0;
  font-family: Georgia, serif;
  font-size: 1rem;
}

Attribute

Dieses Element umfasst die globalen Attribute.

cite

Dieses Attribut definiert die URI einer Ressource, die die Änderung erklärt, wie z.B. ein Link zu Besprechungsprotokollen oder ein Ticket in einem Problemlösungssystem.

datetime

Dieses Attribut gibt die Zeit und das Datum der Änderung an und muss ein gültiges Datum mit optionalem Zeitstring sein. Wenn der Wert nicht als Datum mit optionalem Zeitstring analysiert werden kann, hat das Element keinen zugeordneten Zeitstempel. Informationen zum Format des Strings ohne Zeit finden Sie unter Format of a valid date string. Das Format des Strings, wenn es sowohl Datum als auch Zeit beinhaltet, wird in Format of a valid local date and time string behandelt.

Zugänglichkeit

Das Vorhandensein des <ins> Elements wird von den meisten Bildschirmlesetechnologien in ihrer Standardkonfiguration nicht angekündigt. Es kann angekündigt werden, indem man die CSS content Eigenschaft zusammen mit den ::before und ::after Pseudoelementen verwendet.

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 Bildschirmleser verwenden, deaktivieren absichtlich die Ankündigung von Inhalten, die zusätzliche Wortvielfalt erzeugen. Aus diesem Grund ist es wichtig, diese Technik nicht zu missbrauchen und sie nur in Situationen anzuwenden, in denen das Nichtwissen von eingefügtem Inhalt das Verständnis negativ beeinflussen würde.

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

Beispiele

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

Ergebnis

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• <del> Element zur Markierung der Löschung in einem Dokument