Visuell versteckter Text (sr-only) – Unsichtbar, aber barrierefrei
Visuell versteckter Text ist Inhalt, der für Screenreader zugänglich, aber für sehende Nutzer:innen unsichtbar ist. Er wird häufig für zusätzliche Hinweise, bedienungsrelevante Kontexte oder interaktive Elemente ohne sichtbare Labels eingesetzt.
Der gängigste Ansatz basiert auf dem CSS-Klassennamen sr-only (Screenreader only).
Typische Einsatzbereiche
- Ergänzende Informationen für Buttons und Links (z. B. „Mehr erfahren über Produkt XY“)
- Kontext-Erweiterungen bei Formularfeldern
- Beschreibungen von Symbolen oder Icons
- Inhalte, die nur für assistive Technologien relevant sind
Beispiel: Button mit verstecktem Text
<button>
<span class="sr-only">Suche starten</span>
<svg ... aria-hidden="true" />
</button>Beispiel: CSS-Klasse .sr-only
.sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}Diese Technik ist WCAG-konform (2.1.1 Tastaturzugänglichkeit, 4.1.2 Name, Rolle, Wert)
Best Practices
- Nutze sr-only nur, wenn der Inhalt nicht visuell notwendig, aber semantisch relevant ist
- Stelle sicher, dass der versteckte Text sinnvoll in den Screenreader-Kontext passt
- Verwende keine rein visuellen Icons ohne ARIA-Label oder sr-only Ergänzung
Mehr zu unseren Leistungen im Bereich Digitale Barrierefreiheit erfahren Sie hier.
