Screen Reader Only CSS
Verborgener Text, der trotzdem ankommt
Links, Buttons, Sprunglink: drei Stellen für die sr-only-Klasse.
Ein Pixel · zwei Ausgaben
Unsichtbar ist nicht verschwunden
Eine sr-only-Klasse verkleinert die sichtbare Box. Der Text bleibt im Dokument und kann den zugänglichen Namen ergänzen. Diese Lupe zeigt beide Wege.
Rechnungen
Sichtbar: „PDF“
In dieser ausgeschnittenen Box steht weiterhin: „ zu Rechnung RE-1042“
Accessibility-Baum
Ausgegeben: „PDF zu Rechnung RE-1042, Link“
Drei Eigenschaften, drei verschiedene Zustände
sr-only
Visuell verborgenIm Accessibility-Baum vorhanden:focus
Wieder sichtbarFür fokussierbare Sprunglinksdisplay: none
Für alle verborgenAus Darstellung und Baum entferntKopierbare Basis
Die Box verkleinern, den Inhalt behalten
position: absolute nimmt die Ein-Pixel-Box aus dem Layout. clip-path schneidet sie aus; white-space verhindert, dass langer Text über mehrere unsichtbare Zeilen läuft.
- 1 × 1 px begrenzt die Box.
- overflow + clip-path schneiden den Inhalt ab.
- Kein display: none erhält die assistive Ausgabe.
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}Variante für Sprunglinks
Bei Fokus aus dem Pixel holen
Ein fokussierbarer Link darf nicht unsichtbar bleiben. Die Zusatzklasse setzt alle begrenzenden Eigenschaften zurück und platziert den Link im Sichtfeld.
.sr-only-focusable:focus {
position: fixed;
inset: 1rem auto auto 1rem;
width: auto;
height: auto;
margin: 0;
padding: 0.75rem 1rem;
overflow: visible;
clip-path: none;
white-space: normal;
background: Canvas;
color: CanvasText;
border: 2px solid currentColor;
z-index: 1000;
}<a class="sr-only sr-only-focusable" href="#inhalt">
Zum Inhalt springen
</a>Drei passende Einsätze — mit Grenze
Icon-Schaltfläche
Ein kurzer sr-only-Text gibt dem allein sichtbaren Symbol einen Namen.
<span class="sr-only">Menü öffnen</span>Kurzer Link im Kontext
Der Zusatz unterscheidet gleichlautende PDF-Links. Sichtbarer Klartext ist besser, wenn Platz da ist.
PDF <span class="sr-only">zu RE-1042</span>Sprunglink
Er darf anfangs verborgen sein, muss beim ersten Tastaturfokus deutlich erscheinen.
class="sr-only sr-only-focusable"Nicht als allgemeine Textablage verwenden. Viele wiederholte Zusätze machen die Ausgabe unnötig lang. Verbergen Sie nur Text, der einen Namen oder Kontext wirklich vervollständigt.
So prüfen Sie es
Auge, Tastatur, Baum
- Auge: Der Zusatz darf bei normaler Darstellung keinen Platz belegen.
- Tastatur: Ein Sprunglink muss beim ersten Tab sichtbar werden.
- Baum: Die Browser-Werkzeuge müssen den vollständigen Namen zeigen.
Aus dem Prüfbericht
Vier Stellen, vier Befunde
Kritisch Symbol-Links ohne Text Regel link-name
Ein Link mit reinem Symbol bleibt namenlos. Ein span mit sr-only im Link liefert das Ziel.
Kritisch Icon-Buttons ohne Namen Regel button-name
Derselbe Weg gilt für Schaltflächen: sr-only-Text im Button oder aria-label nennt die Aktion.
Prüfen Der Sprunglink bleibt unsichtbar Regel bypass
Ein Sprunglink mit sr-only muss bei Fokus sichtbar werden. Sonst bleibt offen, wohin die Tab-Taste gerade führt.
Zum Mitnehmen
Die sr-only-Klasse, korrigiert
Eine Hilfsklasse, ein sichtbarer Fokuszustand, kein aria-hidden.
Korrektur in 3 Schritten ansehen
Die Hilfsklasse richtig schreiben
display none entfernt den Text auch aus der Ausgabe. Ein Ausschnitt von einem Pixel verbirgt ihn nur visuell.
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 Fahren Sie mit einem Vorleseprogramm über die Stelle. Der Text wird gelesen, ist aber nicht zu sehen.
Den Sprunglink bei Fokus zeigen
Der Sprunglink ist das erste Ziel der Tab-Taste. Bei Fokus verlässt er die Hilfsklasse und wird sichtbar.
KorrekturvergleichSchritt 2 · 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; padding: 0.5rem 1rem; background: #ffffff; }Markierte Zeilen wurden geändert
So prüfen Sie es Laden Sie die Seite und drücken Sie einmal Tab. Der Sprunglink erscheint oben links.
aria-hidden durch sr-only ersetzen
Ein verborgener Bereich mit Link widerspricht sich. Das Attribut entfällt; Zusatztexte bekommen stattdessen die Hilfsklasse.
KorrekturvergleichSchritt 3 · HTML Vorher
<div aria-hidden="true"> <a href="/archiv/">Archiv öffnen</a> </div>Nachher
<div> <a href="/archiv/">Archiv öffnen</a> </div>Markierte Zeilen wurden geändert
So prüfen Sie es Drücken Sie Tab, bis der Link Fokus hat. Ein Vorleseprogramm nennt ihn jetzt.