Exklusive Informationen für Screen Reader
(Screen Reader only)

CSS-Code

Typischerweise verfügen die CSS-Klassen mit exklusivem Inhalt für Screen Reader über die Bezeichnung sr-only (Screen Reader only) oder visually-hidden. Die Bezeichnung einer CSS-Klasse ist für deren Funktion irrelevant. Die Verwendung gängiger Bezeichnungen erleichtert jedoch das Lesen eines Codes beim Programmieren.

Das gängige Verfahren zum Darstellen von exklusivem Inhalt für Screen Reader besteht darin, den Inhalt außerhalb des Bildschirms zu platzieren (Off Screen).

1. Das Element wird absolut links außerhalb des Bildschirms positioniert.
2. Der Text wird in eine 1×1 Pixel Box gezwängt.
3. Text, der über diese kleine Box hinausragt, wird visuell verborgen.

Der CSS-Code kann in einer zentralen CSS-Datei etwa folgendermaßen aussehen:

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

Barrierefreiheit und Nutzungsfreundlichkeit

Fokussierbaren Inhalte mit Vorbehalt verbergen

Links, Schalter oder Eingabefelder dürfen nicht generell vom Bildschirm verborgen werden. Durch Drücken von Tabulator können diese auch dann fokussiert werden, wenn sie sich außerhalb des Bildschirms befinden. Damit würde das Erfolgskriterium 2.4.7 Fokus sichtbar verletzt.

Es ist jedoch zulässig, Links zu verbergen, sofern sie nicht gerade den Fokus innehaben. Ein entsprechender Mechanismus wird für Einsprunglinks sogar typischerweise vorgesehen.

Sparsamer Einsatz

Inhalt sollte nur mit Vorsicht exklusiv für Screen Reader bereitgestellt werden.

• Viele Menschen nützen Screen Reader, können jedoch mit einer Vergrößerungssoftware Elemente am Bildschirm auch noch visuell wahrnehmen. Finden sie den Text nicht, der doch vom Screen Reader vorgelesen wurde, kann dies zu Verwirrung führen.
• Wenn sich blinde Menschen mit sehenden Personen über eine Webseite unterhalten, kann es zu Verwirrung führen, wenn die Wahrnehmung unterschiedlich ist.

Einsatzszenarien

Beschreibung einer Abbildung

Für Bilder oder eine Abbildung von Text muss eine Textalternative vorgesehen werden. Ein Alternativtext in einem alt-Attribut als Textäquivialent sollte jedoch die Grafik nur knapp und präzise beschreien. In einem alt-Attribut kann darüber hinaus keine Semantik realisiert werden. Die Bildbeschreibung insbesondere von einer Abbildung von semantisch angereichertem Text muss daher in eigenen HTML-Elementen erfolgen. Der Bereich mit diesen HTML-Elementen sollte vom Bildschirm verborgen werden, wenn visuell die Bedeutung bereits erkennbar ist.

Wenn du über einen Screen Reader verfügst, kannst du im Abschnitt zum Absatzerscheinungsbild durch Silbentrennung ein Beispiel kennen lernen.

Wenn die Beschreibung der Grafik nicht nur für blinde Menschen hilfreiche Informationen liefert, wird der Inhalt am Bildschirm sichtbar beibehalten.

Textalternative für Idikator

Vielfach dienen Icons als Indikatoren für eine Eigenschaft oder den Zustand eines Elements. Als grafische Elemente benötigen sie eine Textalternative. Die Textalternative kann zweckmäßig mittels CSS exklusiv für Screen Reader bereitgestellt werden.

Beispiel: Externe Links # Icon als Indikator

Beschriftung eines Suchfelds

Das Eingabefeld für einen Suchbegriff verfügt häufig über keine sichtbare Beschriftung. Ein allenfalls vorhandener Platzhaltertext ist technisch nicht ausreichend. Das Fehlen einer sichtbare Beschriftung ist bedauerlich, allerdings zulässig, wenn die Bedeutung des Eingabefelds im visuellen Kontext erkennbar ist. Die Bedeutung als Suchfeld kann etwa aus der Position im Kopfbereich oder einer nebenstehenden Lupe als bekannt vorausgesetzt werden.

Die erforderliche technische Beschriftung kann in diesem Fall für Screen Reader vorbehalten sein. Der HTML-Code sieht etwa folgendermaßen aus:

<label
  for="searchfield"
  class="sr-only">
  Suchbegriff
</label>
<input
  id="searchfield"
  type="search"
  … >

Verborgene Hauptüberschrift auf Startseite

Der Hauptinhalt muss technisch auf jeder Webseite über eine Überschrift der Ebene 1 verfügen. Auf der Startseite ist eine sichtbare Hauptüberschrift gelegentlich nicht erwünscht. In diesem Fall kann die Hauptüberschrift exklusiv für Screen Reader dargestellt bleiben.

Überschriftenebenen # Überschrift Ebene 1 verbergen

Beschreibung einer Bildergalerie

In begründeten Ausnahmefällen wird eine Sammlung von Fotos zusammenfassend beschrieben . Diese Strategie kann auch in Erwägung gezogen werden, wenn die Fotos in einem animierten Karussell dargestellt werden. Eine zusammenfassende Beschreibung kann vom Bildschirm verborgen werden, wenn der visuelle Eindruck für das Erkennen der Bildergalerie oder des Karussells ausreicht.