Exklusive Informationen für Screen Reader

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

Keine fokussierbaren Inhalte

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.

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

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