sr-only CSS
Unsichtbar für die Augen, hörbar im Namen
Linktext, Icon-Button, Sprunglink: fünf Stellen für verborgenen Zusatztext.
CSS unter der Lupe
Ein Pixel im Layout, ein ganzer Satz im Namen
sr-only entfernt Text nicht. Die Klasse beschneidet seine Ein-Pixel-Fläche vollständig.
Browser → Dokument → zugänglicher Name
Der sichtbare Link bleibt kurz.
<a>Mehrüber unsere Preise</a>„Mehr über unsere Preise, Link“
Der Text bleibt im Dokument und kann in die Ausgabe eingehen.
sr-only eignet sich für kurze Ergänzungen. W3C Technique C7 warnt vor flächigem Einsatz: Wiederholter verborgener Text kann die Ausgabe unnötig wortreich machen. Drei verschiedene Aufträge
„Verbergen“ ist nicht eindeutig
.sr-onlynur visuell beschneiden- Ansicht
- verborgen
- Accessibility Tree
- vorhanden
- Einsatz
- kurzer Textzusatz
display: nonefür alle entfernen- Ansicht
- verborgen
- Accessibility Tree
- entfernt
- Einsatz
- inaktiver Inhalt
aria-hidden="true"nur assistiv entfernen- Ansicht
- sichtbar
- Accessibility Tree
- entfernt
- Einsatz
- dekoratives Symbol
Fokusregel: Setzen Sie aria-hidden="true" nie auf ein fokussierbares Element oder dessen Vorfahren. Sichtbarer Fokus und Accessibility Tree würden dann auseinanderfallen.
Kopierbares Rezept
Die Basis schneidet, die Fokusregel holt zurück
.sr-only {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(100%);
clip: rect(1px, 1px, 1px, 1px);
white-space: nowrap;
} Die feste Ein-Pixel-Fläche, der Beschnitt und overflow arbeiten zusammen. display: none gehört nicht in diese Klasse.
.sr-only:focus {
position: static;
width: auto;
height: auto;
overflow: visible;
clip-path: none;
clip: auto;
white-space: normal;
} Diese Ergänzung ist nur für interaktive Elemente gedacht. Für einen Sprunglink kann eine eigene Klasse wie .skip-link verständlicher sein.
Zwei saubere Einsätze
Zusatztext und Sprunglink brauchen andere Regeln
Der sichtbare Begriff bleibt am Anfang des zugänglichen Namens.
<a href="/preise">
Mehr<span class="sr-only">
über unsere Preise
</span>
</a>Der Link ist der erste Tab-Stopp und wird in diesem Moment sichtbar.
<a class="skip-link sr-only"
href="#inhalt">
Zum Inhalt springen
</a>Primärquellen
Rezept und Grenzen nachlesen
Aus dem Prüfbericht
Fünf Stellen für dieselbe Klasse
Kritisch „Mehr“ am Ende der Teaserkarte Regel link-name
Der Link heißt nur „Mehr“. Ein sr-only-Zusatz im Link ergänzt das Ziel, ohne die Karte optisch zu verändern.
Kritisch Die Schaltfläche zeigt nur ein Symbol Regel button-name
Ohne Wort bleibt der Button namenlos. Ein sr-only-span im Button liefert das Wort, das vorgelesen wird.
Kritisch Sichtbarer Text und Name gehen auseinander Regel label-content-name-mismatch
Steht sichtbar „Senden“ und im Namen „Formular abschicken“, scheitert die Sprachsteuerung. Der sichtbare Text muss im Namen vorkommen.
Prüfen Der Sprunglink bleibt dauerhaft verborgen Regel bypass
Ein sr-only-Sprunglink hilft nur, wenn er bei Fokus sichtbar wird. Sonst sieht niemand, wohin der erste Tabschritt führt.
Zum Mitnehmen
Der verborgene Text, korrigiert
Eine Klasse, ein Zusatzwort und eine Regel für den Fokus.
Korrektur in 3 Schritten ansehen
Die Klasse einmal richtig definieren
display: none nimmt den Text auch aus der Ausgabe von Vorleseprogrammen. Die Klasse verkleinert ihn stattdessen auf einen Punkt.
KorrekturvergleichSchritt 1 · CSS Vorher
.sr-only { display: none; }Nachher
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }Markierte Zeilen wurden geändert
So prüfen Sie es Auf dem Bildschirm ändert sich nichts, ein Vorleseprogramm liest den Zusatz mit.
Das Ziel im Linktext ergänzen
Der sichtbare Text bleibt „Mehr“. Der Zusatz macht daraus den Namen „Mehr über unsere Preise“, ohne das Layout zu verändern.
KorrekturvergleichSchritt 2 · HTML Vorher
<a href="/preise">Mehr</a>Nachher
<a href="/preise">Mehr<span class="sr-only"> über unsere Preise</span></a>Markierte Zeilen wurden geändert
So prüfen Sie es Öffnen Sie die Linkliste eines Vorleseprogramms. Der Eintrag nennt jetzt das Ziel.
Den Sprunglink bei Fokus zeigen
Ein Sprunglink darf nicht dauerhaft verborgen bleiben. Mit Fokus nimmt er wieder Platz ein und wird sichtbar.
KorrekturvergleichSchritt 3 · CSS Vorher
.skip-link { position: absolute; width: 1px; height: 1px; overflow: hidden; }Nachher
.skip-link { position: absolute; width: 1px; height: 1px; overflow: hidden; } .skip-link:focus { width: auto; height: auto; overflow: visible; }Markierte Zeilen wurden geändert
So prüfen Sie es Drücken Sie Tab auf einer frisch geladenen Seite. Der Sprunglink erscheint.