Zum Inhalt springen →

Extra Texte für Screenreader

Ich möchte einen Leser mit einem Screenreader mehr Informationen zeigen als dem sehenden Benutzer.

Screenshot einer Webseite mit Beispielstext, Sprechblase sagt: Geheimer Text nur für Screenreader vor dem sichtbaren Text

So geht’s nicht

In Bootstrap 3 und 4 gibt es eine CSS-Klasse .sr-only, aber leider funktioniert das nur am Mac, aber nicht am iphone.

So geht’s

Der unsichtbare Text ist in einem HTML-span-Abschnitt eingefügt:

<p>
<span class="li-sr-only">Extra-Text ist nur im Screenreader zu sehen</span>
vor diesem  Text ist nur im Screenreader etwas zu sehen.
</p>

Dann kommt noch die Definition der CSS-Klasse:

.li-src-only {
  position: absolute;
  left: -1000em;
  width: 20em;
}

Der Text wird also extrem weit nach links verschoben, damit ist er auf keinem Bildschirm mehr zu sehen. Aber dem Screenreader ist das egal wie weit etwas verschoben ist. Er liest den Text ganz normal vor.

Meta

Veröffentlicht in Allgemein

Kommentaren

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.