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

Textäquvivalent bereitstellen

Icons aus Unicode können auf unterschiedliche Weise mit einer Textalternative versehen werden. Im Folgenden werden Möglichkeiten zur Realisierung schrittweise erörtert.

Bei allen folgenden Techniken müssen Vorkehrungen getroffen werden, wenn der Webauftritt mehrsprachig ist.

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.

Beschriftung mittels CSS verborgen

Die ergänzende Beschriftung wird mittels CSS vom Bildschirm verborgen. Typischerweise wird dafür eine CSS-Klasse sr-only angelegt, die von einem Screen Reader ignoriert wird.

Ergänzend sollte in einem Titelattribut ein sichtbarer Hinweis bereitgestellt werden, der zumindest beim Überstreichen mit der Maus eingeblendet wird.

Testbeispiel für mittels CSS verborgene Beschriftung

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

Code für mittels CSS verborgene Beschriftung

<button>
  <span
    aria-hidden="true"
    title="Einstellungen" >
    ⚙
  </span>
  <span
    class="sr-only">
    Einstellungen
  </span>
</button>

Vorteile einer verborgenen Beschriftung mittels CSS

• Die visuelle Fläche der Darstellung des Elements ist für eine Symbolleiste optimiert.
• Bei deaktivierten Stylesheets wird automatisch die Beschriftung angezeigt.
• Für Screen Reader wird die Bedeutung in jedem Fall wiedergegeben.

Nachteile einer verborgenen Beschriftung mittels CSS

• Das Icon und dessen Funktion muss bekannt sein.
• Die Bedeutung des Icons wird am Bildschirm nur mit der Maus angezeigt.

Verborgene Beschriftung bei Fokus sichtbar

Die ergänzende Beschriftung bleibt vorerst mittels CSS vom Bildschirm verborgen. Allerdings wird die Beschriftung sichtbar, wenn sie it der Tabulator-Taste fokussiert wird. Ergänzend wird die Beschriftung auch beim Überstreichen mit der Maus angezeigt.

Testbeispiel für sichtbare Beschriftung bei Fokus

Du kannst das Verhalten im folgenden Beispiel testen indem du mit dem Tabulator den Fokus auf die Icons setzt. Um mehrfaches Klicken auf Tabulator zu vermeiden, kannst du auch hier klicken, um den Fokus auf den Schalter zu setzen.

Du kannst auch das Verhalten beim Überstreichen mit der Maus testen. Beim Überstreichen des ersten Icons erscheint die Darstellung zweckmäßig. Die Beschriftung wird hinter dem Icon und vor einem nächsten Schalter eingeblendet. Wenn du jedoch mit der Maus zwischen Icons wechselst, hüpft dir der Schalter unter der Maus weg.

HTML-Code für sichtbare Beschriftung bei Fokus

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

CSS-Code für sichtbare Beschriftung bei Fokus

Der Code in der zugehörigen CSS-Datei kann etwa folgendermaßen aussehen:

.focused-visible {
  height: 1px;
  left: -1000px;
  overflow: hidden;
  position: absolute;
  width: 1px;
}

button:focus .focused-visible,
button:hover .focused-visible {
  height: auto;
  left: auto;
  overflow: visible;
  position: relative;
  width: auto;
}

Vorteile einer sichtbare Beschriftung bei Fokus

• Die Beschriftung kann sowohl mit der Tastatur, als auch mit der Maus eingeblendet werden.
• Bei deaktivierten Stylesheets wird automatisch die Beschriftung angezeigt.
• Für Screen Reader wird die Bedeutung in jedem Fall wiedergegeben.

Nachteile einer sichtbare Beschriftung bei Fokus

• Die Darstellung in einer Symbolleiste mit mehreren Icons kann zu visuellen Irritationen bei der Bedienung mit der Tastaturführen.
• Die Darstellung in einer Symbolleiste mit mehreren Icons führt zu massiven Irritationen bei der Bedienung mit der Maus.
• Die visuellen Veränderungen können insbesondere bei der Nutzung einer Vergrößerungssoftware in einem eingeschränkten Darstellungsfenster bei einer starken Vergrößerung zu Problemen führen.

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.