Eine Person, die mit einem Screenreader surft, nimmt das Emoji oft über dessen Bezeichnung wahr. Die Bezeichnung ist nicht unbedingt identisch mit der übertragenen Bedeutung, an die der Autor gedacht hat. Das W3C H86-Handbuch weist besonders darauf hin. Quelle: W3C H86
Schreibe aus, was du mitteilen möchtest
Ein kurzes Beispiel:
Freitag ☕, danach 📞, schließlich 📄.
Der Satz kann auch visuell auf verschiedene Weise interpretiert werden. Bedeutet er Kaffee trinken, ein Telefonat und das Senden eines Dokuments? Wann finden diese statt, und wer ist wofür zuständig? Das Vorlesen der Emoji-Bezeichnungen allein beantwortet diese Fragen nicht.
Genauere Variante:
Freitag um 9 Uhr treffen wir uns auf einen Kaffee. Danach rufe ich den Lieferanten an und schicke am Nachmittag die Zusammenfassung.
Wenn du zum Kaffee auch eine Tasse hinzufügen möchtest, sollte der Satz trotzdem vollständig bleiben. In einer Mitteilung sollten Datum, Ort, Preis und die auszuführende Aufgabe auch textlich enthalten sein. Die Empfehlungen zur Barrierefreiheit in sozialen Medien unterstützen diese Lösung ebenfalls. Quelle: NCDIT, Social Media Content Accessibility
Eine lange Emoji-Reihe kann beim Vorlesen zu einer langen Aufzählung werden
In der Nachricht „Glückwunsch! 🎉🎉🎉🎉🎉“ kann der Screenreader dieselbe Bezeichnung mehrfach vorlesen. Versuche es mit einem einzigen Symbol: „Glückwunsch zu deinem Ergebnis! 🎉“ So kann der Satz kürzer angehört werden. Das Symbol sollte an einer natürlichen Pause platziert werden, zum Beispiel am Ende des Absatzes. Quelle: Section508.gov, soziale Medien
Verwende in Listen echte Aufzählungen, wenn die Oberfläche dies unterstützt. Wenn du vor jede Zeile dasselbe Sternchen, Häkchen oder denselben Finger setzt, überlege, welche Information das wiederholte Symbol liefert. Eine einfache Nummerierung oder die integrierte Aufzählung bietet oft eine besser nachvollziehbare Struktur.
In einem Vergleich jedoch, in dem die Emojis selbst das Thema sind, ist es gerechtfertigt, mehrere Symbole zu zeigen. Schreibe in diesem Fall den Namen und die Erklärung des Unterschieds daneben. So steht dem Leser das Wesentliche auch ohne Unterscheidung der Bilder zur Verfügung.
Was kannst du auf deiner eigenen Website tun?
Wenn ein Emoji eine eigenständige Bedeutung trägt, kann ihm in HTML ein zugänglicher Name zugeordnet werden. Ein eigenes Beispiel, das sich an die von der W3C vorgestellte Methode anlehnt:
<span role="img" aria-label="Erfolgreich gesendet">✅</span>
In diesem Beispiel teilt der zugängliche Name den erfolgreichen Versand mit. Das aria-label wird sehenden Lesern nicht als Beschriftung angezeigt, daher sollte der wichtige Zustand auch als sichtbarer Text ausgeschrieben werden. Die Beschriftung einer Schaltfläche sollte die Aktion benennen: zum Beispiel „Kopieren“.
Bei einem als Bilddatei eingefügten Emoji bestimme den Alternativtext des img-Elements basierend auf der Funktion des Bildes. Wenn dieselbe Information bereits vollständig neben dem Bild steht und die Grafik keinen neuen Sinn hinzufügt, kann ein leeres alt="" gerechtfertigt sein. Das W3C-Handbuch für Bilder stellt diese situationsabhängige Entscheidung detailliert dar. Quelle: W3C, Decorative Images
Die Überprüfung sollte auf der endgültigen Oberfläche erfolgen
In Social-Media-Posts sind die technischen Möglichkeiten oft eingeschränkter, daher ist ein gut geschriebener Satz besonders wichtig. Die Handhabung zugänglicher Bezeichnungen kann system- und anwendungsabhängig sein. Eine einzelne HTML-Lösung oder ein erfolgreicher Test allein belegt nicht die Barrierefreiheit der gesamten Seite.
Lies den Text ohne die Symbole, um die praktische Überprüfung durchzuführen, und höre ihn dir dann auf der endgültigen Oberfläche mit einem Screenreader an. Achte darauf, wo sich unnötige Informationen wiederholen, wo der Satz abbricht und ob unerklärte Andeutungen bleiben. Wiederhole den Test nach der Korrektur an derselben Stelle.
Wähle zum Einstieg einen häufig verwendeten Post oder eine Kundennachricht. Das Kürzen überflüssiger Emoji-Reihen und das Ausschreiben fehlender Wörter ist sofort eine konkrete, überprüfbare Änderung.
Nimm das Wesentliche mit
Drei Fragen zum Wissensquiz
Teste, wie du das Gelesene anwenden würdest. Markiere pro Frage eine Antwort; jede richtige Antwort gibt einen Punkt. Die Auswertung gibt Feedback zu diesen drei Situationen; deine Antworten werden nicht gespeichert und nicht gesendet.
Schreibe das Kaffee-Telefon-Dokument-Beispiel zunächst in einen vollständigen Satz um und lies es dann ohne die Symbole zurück.
Schreibe das Kaffee-Telefon-Dokument-Beispiel zunächst in einen vollständigen Satz um und lies es dann ohne die Symbole zurück.
Korrigiere das Muster, das zur falschen Antwort gehört.
In allen drei Beispielen hast du die Verständlichkeit der Information geprüft; höre dir auch einen eigenen Beitrag an.
Lösungen und Erklärungen
- Du schreibst die Tage und die genauen Öffnungszeiten aus. Die Öffnungszeiten sind auch ohne Erkennung der Grafik zugänglich.
- Die durch das Bild vermittelte Information ist bereits vollständig im danebenstehenden Text enthalten. Ein leerer Alternativtext kann vermeiden, dass sich wiederholende Informationen vorgelesen werden.
- Auf der endgültigen Oberfläche hörst du, welche Wiederholungen entstehen. Der Screenreader-Test zeigt die tatsächlich hörbare Mitteilung.
Zähle deine richtigen Antworten zusammen: Jede gibt einen Punkt. Eine ausgelassene Antwort gibt null Punkte.
- 3 Punkte: In allen drei Beispielen hast du die Verständlichkeit der Information geprüft; höre dir auch einen eigenen Beitrag an.
- 2 Punkte: Korrigiere das Muster, das zur falschen Antwort gehört.
- 0–1 Punkte: Formuliere zunächst das Kaffee-Telefon-Dokument-Beispiel als vollständigen Satz um und lies es dann ohne die Symbole vor.
