Visuell versteckter Text (sr-only)

Typische Einsätze: Icon-Buttons bekommen einen Namen („Suchen“, „Menü“, „Warenkorb, 3 Artikel“). Links, die sich nur aus dem Umfeld erklären, bekommen ihren Bezug („Mehr erfahren“ plus versteckt „zum Barrierefreiheitsgesetz“). Dazu Zwischenüberschriften, die nur der Gliederung dienen, und Statusmeldungen wie „3 Ergebnisse gefunden“.

Die Technik ist eine CSS-Klasse, meist .sr-only oder .visually-hidden genannt: Das Element wird auf ein Pixel verkleinert, abgeschnitten und aus dem Textfluss genommen. Es bleibt im Dokument und damit im Accessibility Tree. display: none, visibility: hidden und das hidden-Attribut entfernen es dagegen auch für Screenreader. Den bewährten Regelblock liefert die WCAG-Technik C7; welche Klassennamen dafür kursieren, erklärt der Eintrag zu visually-hidden.

Drei Grenzen. Erstens: Was Sehende auch brauchen, gehört sichtbar auf die Seite: Fehlermeldungen, Pflichtfeld-Hinweise, Bedienhinweise. Im Zweifel sichtbar, denn die Frage ist nie die Technik, sondern wer die Information braucht. Zweitens: Der versteckte Text ergänzt eine sichtbare Beschriftung, er ersetzt sie nicht. Steht auf dem Button „Senden“, muss der vorgelesene Name mit „Senden“ beginnen, sonst scheitert die Sprachsteuerung (WCAG 2.5.3 „Beschriftung im Namen“). Drittens: Fokussierbare Elemente werden nie dauerhaft versteckt, denn ein unsichtbarer Link fängt den Tastaturfokus, ohne dass ein Fokusindikator erscheint. Skip-Links werden deshalb beim Fokus eingeblendet.

Ein Missbrauch bleibt: Text, der nur für Suchmaschinen versteckt wird, verstößt gegen Googles Spam-Richtlinien. Die Regel dort unterscheidet genau zwischen Zugänglichkeit und Manipulation.

Prüfen dauert fünf Minuten: Screenreader starten (VoiceOver auf dem Mac mit Cmd+F5, NVDA unter Windows kostenlos), mit Tab durch die Bedienelemente gehen und hören, ob jeder Button einen Namen hat. Dann den Screenreader beenden und noch einmal durchtabben: Bekommt etwas Unsichtbares den Fokus, ist die Klasse an der falschen Stelle.