Zeichencodierung/Emojis und Emoticons
Text-Info
- leicht
- 15min
- HTML-Kenntnisse
Darstellung
Besonders attraktiv für Webdesigner scheint die Verwendung von Unicode für Icons und ihrer Weiterentwicklung, den Emoticons und Emojis.
In diesem Forumsbeitrag wird vorgeschlagen, anstelle der Zeichen x bzw. o besser Unicode-Symbole wie
- × U+00D7 MULTIPLICATION SIGN
- ❌ U+17EC CROSS MARK
- ◯ 25EF LARGE CIRCLE
- ⭕ U+2B55 HEAVY LARGE CIRCLE
zu verwenden.
Allerdings werden manche dieser Zeichen in manchen Browsern farbig dargestellt und lassen sich auch nicht mit CSS umfärben. Des Weiteren ist zu beachten, dass die Strichstärke oft unterschiedlich ist.
Zeichen, die in der verwendeten Schriftart nicht vorhanden sind, werden nicht dargestellt. Auch das Laden eines Unicode-Zeichensatzes wie Microsoft Arial Unicode bietet keine vollständige Abhilfe, da auch hier nicht alle der möglichen Zeichen enthalten sind.
Fehlen diese, erscheinen statt der Schriftzeichen Kästchen oder Ähnliches auf dem Bildschirm.
Als Autor von Webseiten können Sie nichts dagegen unternehmen. Wenn der Benutzer Ihre Seiten betrachten will, muss er die erforderlichen Schriftarten auf seinem Computer installieren, wenn diese nicht schon vorhanden sind.
Die Darstellungen von Zeichen können sich in Abhängigkeit von Browser und Betriebssystem erheblich voneinander unterscheiden.
- Bildschirmfotos der Darstellung des Zeichens U+1F41D-honeybee in verschiedenen Browsern
Firefox unter Windows XP
Firefox unter Windows 7
Firefox unter Windows 10
MS edge unter Windows 10
Safari unter macOS
Chrome unter Android 6
zugängliche Emoticons
Waren früher Emoticons ausschließlich ASCII-Zeichenfolgen wie ;-) oder :-(, so werden in letzter Zeit sehr verbreitet auch Grafiken, sogenannte Smileys oder Emojis 😉 😟 dafür verwendet. Diese sind oft gar keine Grafiken sondern Unicode-Zeichen.
Das Problem dabei ist nun, dass die Informationen, die in diesen kleinen Grafiken stecken (zwinkerndes Gesicht, trauriges Gesicht) und damit die Botschaften, die durch sie übertragen werden sollen („Die Aussage ist nicht ganz ernst gemeint.“, „Ich bin traurig“) nur Sehenden zur Verfügung steht. Für Personen, die auf assistive Technologien angewiesen sind, ist ein nicht unerheblicher Informationsverlust zu verzeichnen, denn es ist schon wichtig, dass beispielsweise eine ironische Aussage auch als solche erkannt wird.
Abhilfe ist einfach: Wir weisen den Browser an, das Emoji als Grafik zu behandeln und geben ihr einen Namen. Mithilfe der ARIA-Rolle img können beliebige Elemente als Grafik in den Zugänglichkeitsbaum übernommen werden.
<h1>Herzlichen Glückwunsch zum Geburtstag!</h1>
<p>Ich wünsche dir Gesundheit und Erfolg, aber auch viele
<span role="img" aria-label="Geschenke">🎁🎁</span> und
<span role="img" aria-label="Blumen">🌻🌼</span>.
</p>
Es gibt jedoch auch Personen, die zwar die Symbole erkennen aber nur schlecht von einander unterscheiden können: Handelt es sich um ein lachendes oder um ein weinendes Gesicht? Ebenso ist es möglich, dass das entsprechende Zeichen in der verwendeten Schriftart nicht zur Verfügung steht.
Auch hier ist die Abhilfe einfach: Wir können die Information aus der Beschriftung auch für einen Tooltip verwenden und diesen mithilfe von CSS ansprechend gestalten. Die Verwendung eines title-Attributes bringt für Nutzer von Screenreadern den Nachteil, dass sowohl title als auch aria-label vorgelesen werden. Um den Tooltip auch für Tastaturnutzer erkennbar zu machen, machen wir durch tabindex="0" die entsprechenden Elemente fokussierbar.
<h1>Herzlichen Glückwunsch zum Geburtstag!</h1>
<p>Ich wünsche dir Gesundheit und Erfolg, aber auch viele
<span class="emoji" tabindex="0" role="img" aria-label="Geschenke">🎁🎁</span> und
<span class="emoji" tabindex="0" role="img" aria-label="Blumen">🌻🌼</span>.
</p>
.emoji {
position: relative;
}
.emoji[aria-label]:focus::after,
.emoji[aria-label]:hover::after {
position: absolute;
top: 100%;
display: block;
content: attr(aria-label);
}
Quellen
- Léonie Watson: Accessible emoji
- Adrian Roselli: Accessible Emoji, Tweaked
