Unicode-Sonderzeichen als Bild

Textzeichen

Gewöhnliche Buchstaben, Satzzeichen und Ziffern werden von einem Screen Reader korrekt auf der Braillezeile oder durch eine Sprachausgabe wiedergegeben.

Faustregel: Was auf einer normalen Tastatur durch Tippen oder einen Shortcut eingefügt werden kann, bedarf keiner weiteren Behandlung.

• Eine textbasierte Maskierung (named character entity) von Umlauten und Zeichen wie € oder @ ist unnötig.

  Das Tippen auf ä genügt und die Maskierung durch die Zeichenfolge ä (= a Umlaut) erschwert unnötig das Lesen im Code-Editor.

• Eine explizite Überschreibung eines Standardbuchstabens ist nicht nur unnötig, sondern beeinträchtigt die Wiedergabe des umgebenden Wortes durch eine Sprachausgabe.

  <span aria-label="A>"> A </span>

Unmittelbar einsetzbare Sonderzeichen

Sonderzeichen als Bild präsentieren

Icons aus Unicode können auf unterschiedliche Weise mit einer Textalternative versehen werden:

Sichtbare Beschriftung

Ergänzend zum Icon wird eine Beschriftung sichtbar und technisch wahrnehmbar angeboten. Das Icon wird durch aria-hidden für Screen Reader verborgen, um irreführende oder unnötige Informationen zu vermeiden.

Testbeispiel für sichtbare Beschriftung mit verborgenem Icon

Wenn du über einen Screen Reader verfügst, kannst du das Verhalten hier testen:

Code für sichtbare Beschriftung mit verborgenem Icon

<button>
  <span
    aria-hidden="true">
    ⚙
  </span>
  Einstellungen
</button>

Vorteile einer redundanten Beschriftung mit verborgenem Icon

• Das Verstehen des Icons stellt keine kognitive Aufgabe dar.
• Für Screen Reader wird die Bedeutung unmittelbar wiedergegeben.

Nachteile einer redundanten Beschriftung mit verborgenem Icon

• Die visuelle Fläche der Darstellung des Elements wird massiv erhöht. Für eine Symbolleiste ist diese Darstellung ungeeignet.
• Für eine optimale Darstellung für Screen Reader ist das Verbergen des Icons mittels aria-hidden erforderlich. ARIA sollte vermieden werden, wenn native Semantik verfügbar ist.

Sonderzeichen als Bild präsentieren

Icon als Link oder Schalter

Bestimmte Icons haben sich als Indikatoren für Aktionen eingebürgert. Viele davon sind auch als Unicode-Zeichen verfügbar. Der Name des Unicode-Zeichens entspricht jedoch vielfach nicht der Funktion des Steuerelements.

Da von einer Sprachausgabe ohne weitere Vorkehrungen lediglich der Name vorgelesen wird, müssen die Steuerelemente explizit technisch beschriftet werden.

Indikatoren in Links

Links benötigen teilweise Indikatoren, die auf Besonderheiten des Linkziels hinweisen. Diese werden der Linkbeschriftung vorangestellt oder angehängt. Leider gibt es für häufig benötigte Indikatoren für Dateityp oder Sprache der Zielseite keine Icons im Unicode-Universum.

Als visueller Hinweis auf das Vorhandensein eines Links erscheint jedoch gelegentlich ein ⟶ hinter dem Linktext. Dieser Indikator kann beispielsweise eingesetzt werden, wenn eine Überschrift gleichzeitig als Link zu einer anderen Unterseite mit detaillierteren Informationen führt. Da das Vorhandensein eines Links von einem Screen Reader technisch ohnedies erkannt und wiedergegeben wird, sollte dieser Indikator für Screen Reader verborgen werden.