Zeichencodierung/Emojis und Emoticons

leicht

15min

HTML-Kenntnisse

Screenshot von CK - Unicode-Symbole werden auf einem Mac farbig dargestellt

Screenshot eines nicht dargestellten Unicode-Symbols im SelfHTML-Forum

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. Allerdings gibt es mit font-variant-emoji eine CSS-Eigenschaft, die künftig Formatierungen ermöglicht. 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.

Beachten Sie: Eine korrekt verwendete Zeichencodierung oder eine Ersatzschreibweise für einzelne Zeichen bedeutet nicht zwangsläufig, dass alle Zeichen korrekt dargestellt werden. Es müssen u.U. auch die Schriftarten auf dem Computer installiert werden, die für diese verwendeten Zeichen Darstellungsvorschriften enthalten.

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.

Beispiel

<h1>Herzlichen Glückwunsch zum Geburtstag!</h1> <p>Ich wünsche dir Gesundheit und Erfolg, aber auch viele 🎁🎁 und 🌻🌼.</p>

Screenreader lesen hier lediglich den Text vor. Somit gehen Informationen verloren.

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.

Beispiel

<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>

Screenreader lesen jetzt den Text und die entsprechenden aria-label vor, es wird also die vollständige Information übermittelt.

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.

Beispiel

<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);
}

Screenreader lesen jetzt den Text und die entsprechenden aria-label vor, zusätzlich wird ein Tooltip mit dem Inhalt der Beschriftung dargestellt.

Siehe auch

• font-variant-emoji

Quellen

• Léonie Watson: Accessible emoji
• Adrian Roselli: Accessible Emoji, Tweaked