Oft macht es Sinn an Texten Änderungen zu kennzeichnen. Hierbei ist darauf zu achten, dass jede Information allen Nutzerinnen zur Verfügung gestellt wird.
Üblicherweise gibt es vier Arten von Texten:
- unveränderter Text
- entfernter Text
- hinzugefügter Text
- bearbeiteter Text
Letzteres ist ein Sonderfall und man muss sich sehr gut überlegen, ob man das überhaupt anwenden möchte. Wesentlich besser ist es in der Regel, einen Text zu löschen und die korrigierte Version hinzuzufügen. Sonst sind die Details der Änderungen gerade nicht nachvollziehbar. Daher findet man so eine Option auch bespielsweise im „Änderungen nachverfolgen“-Modus in Textverabeitungen nicht. Außerdem stellt HTML dafür kein Element zur Verfügung. Andererseits ist das eine schöne Gelegenheit, um aufzuzeigen, wie man etwas in HTMl umsetzt, wofür kein explizites Element verfügbar ist.
Spoiler: div und span sind nicht immer die einzige oder gar beste Lösung.
Hier nochmal dieselbe Liste wie oben, aber mit korrekter Auszeichnung für eingefügte und gelöschte Texte:
- unveränderter Text
entfernter Text- hinzugefügter Text
- bearbeiteter Text
Browser stellen die ausgezeichneten Elemente schon mal korrekt dar und per CSS kann man diese bereits gestalten. Für geänderten Text fehlt noch eine Auszeichnung, um ihn von unverändertem Text zu unterscheiden.
Dazu zwei Überlegungen: welches Element ist geeignet und wie nennen wir die benötigte Klasse?
Die Aufgabe von HTML ist es ausschließlich Texte semantisch korrekt auszuzeichnen, also entsprechend ihrer Bedeutung.
Da es kein passendes Element gibt, bietet sich unmittelbar span an, so macht man wenigstens nichts kaputt indem man ein Element für etwas missbraucht, wofür es nicht gedacht ist. Es handelt sich aber hier um Text, der sich von normalem Text durchaus unterscheidet. IUm solche unspezifischen Unterscheidungen hervorzuheben bietet HTMl die Elemente b und i.
Ich etscheide mich hier für das Element i und gebe zu, dass dafür keine harte Begründung habe. Es scheint mir passender, weil das standardmäßig fett dargestellte b irgendwie zu sehr mit „wichtigem Text“ verbunden ist.
Da das Element i nicht unbedingt für geänderten Text steht, möchte ich noch eine Klasse hinzufügen und hierfür drängt sich edit regelrecht auf.
So sieht die ergänzte Liste aus:
- unveränderter Text
entfernter Text- hinzugefügter Text
- bearbeiteter Text
und Hier der entsprechende HTML-Code:
- <ul>
- <li>unveränderter Text</li>
- <li><del>entfernter Text</del></li>
- <li><ins>hinzugefügter Text</ins></li>
- <li><i class=“edit“>bearbeiteter Text</i></li>
- </ul>
Das Aussehen lässt sich per CSS beliebig an eigene Bedürfnisse anpassen. Hier habe ich einfach ein paar Hintergründe vergeben, den Rest macht der Browser bereits aufgrund eigener Styles für die vergebenen Elemente.
- del {
- background: pink;
- }
- ins {
- background: green;
- }
- .edit {
- background: green;
- }
Da Informationen nicht allein über Farben transportiert werden dürfen, sollten Icons ersetzt werden, die symbolisieren, was hier passiert ist, z.B. ein Bleistift für den bearbeiteten Text, ein Plus für hinzugefügten Text oder ein Papierkorb für gelöschten Text.
Ich füge diese Elemente mal per SVG ein und vergebe den SVGs einen aussagekräftigen Titel. Dann haben auch Blinde etwas davon!
- unveränderter Text
entfernter Text- hinzugefügter Text
- bearbeiteter Text
Was jetzt noch bleibt ist das Ergebnis an das vorgegebene Design anzupassen. Ich empfehle, die Icons in der gleichen Farbe wie die Schrift zu setzen, dann bleiben diese auch sichtbar, wenn Nutzerinnen die Schriftfarbe an eigene Bedürfnisse anpassen.
Unbedingt ändern sollte man die standardmäßige Unterstreichung des eingefügten Textes. Unterstreichungen sollten aus Usability-Gründen interaktiven Elementen oder sogar exklusiv Links vorbehalten sein, denn Nutzer klicken diese unwillkürlich an und glauben mitunter eine Website ist kaputt, wenn unterstrichene Texte nciht anklickbar sind. Das fällt negativ auf das Ansehen der Seite zurück.
In CSS gibt man dafür an: ins {text-decoration: none;}