Barrierefreiheit/zugängliche Emoticons

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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.

[Bearbeiten] Quellen

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML