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

Attribute

Dieses Element umfasst die globalen Attribute.

cite

Dieses Attribut definiert den URI einer Ressource, die die Änderung erklärt, z. B. einen Link zu Sitzungsprotokollen oder einem Ticket in einem Problembehandlungssystem.

datetime

Dieses Attribut gibt die Zeit und das Datum der Änderung an und muss ein gültiges Datum mit einem optionalen Zeitstring sein. Wenn der Wert nicht als Datum mit optionalem Zeitstring geparst werden kann, hat das Element keinen zugehörigen Zeitstempel. Für das Format der Zeichenkette ohne Zeit siehe Format einer gültigen Datumszeichenkette. Das Format der Zeichenkette, wenn es sowohl Datum als auch Zeit enthält, wird in Format einer gültigen lokalen Datums- und Zeitzeichenkette behandelt.

Barrierefreiheit

Das Vorhandensein des <ins>-Elements wird von den meisten Screenreader-Technologien in ihrer Standardkonfiguration nicht angekündigt. Es kann angekündigt werden, indem die CSS-content-Eigenschaft zusammen mit den ::before- und ::after-Pseudo-Elementen verwendet 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] ";
}

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

• Short note on making your mark (more accessible) | Vispero
• 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 Kennzeichnung von Löschungen in einem Dokument