Visually hidden CSS
Weg vom Bildschirm, nicht aus dem Namen
Kartenlink, Icon-Schaltfläche, verborgene Karte: drei Stellen der Teaserkarten.
Zwei Ausgaben, ein Element
Was verschwindet – und wo?
Visuell verborgen heißt: aus der Bildschirmdarstellung geschnitten, im zugänglichen Namen erhalten.
Ein Link durchläuft zwei Darstellungen
Der DOM-Knoten bleibt derselbe. CSS verändert die Pixel; die Textalternative bleibt für Hilfsmittel erreichbar.
<a>Weiterlesen<span class="visually-hidden">zum Artikel Hafenstadt</span></a>clip-path abgeschnitten- TextWeiterlesensichtbar
- Textzum Artikel Hafenstadtvisuell verborgen
„Weiterlesen zum Artikel Hafenstadt, Link“
Entscheidungsmatrix
„Unsichtbar“ hat vier verschiedene Bedeutungen
Wählen Sie nach gewünschter Ausgabe, nicht nach dem Namen der Eigenschaft.
.visually-hiddenTextzusatzNein1-Pixel-AusschnittJaName bleibt vollständigKeinerDer span ist kein Steuerelementhidden / display:noneganzer BereichNeinnicht gerendertNeinaus dem Baum entferntNeinkein Tabstopparia-hidden="true"dekoratives SymbolJableibt sichtbarNeinElement und Kinder fehlenVerbotennie an fokussierbarem Inhalt.visually-hidden-focusableSprunglinkBei Fokusdann vollständig sichtbarJaName bleibt erreichbarJasichtbarer FokusinhaltCSS-Anatomie
Jede Zeile löst ein anderes Layoutproblem
.visually-hidden,
.visually-hidden-focusable:not(:focus, :focus-within) {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}- absolute
- nimmt die Ein-Pixel-Fläche aus dem normalen Layoutfluss
- 1px × 1px
- verhindert, dass der verborgene Inhalt Platz beansprucht
- clip + clip-path
- schneidet den sichtbaren Inhalt innerhalb dieser Fläche ab
- white-space
- verhindert, dass langer Text auf mehrere Zeilen wächst
- :focus
- nimmt die Fokusvariante aus der Regel und macht sie wieder sichtbar
Vollständiges Beispiel
Ein Teaser, ein Ziel, ein eindeutiger Name
Ist der sichtbare Titel bereits der Link, brauchen Sie keinen verborgenen Zusatz.
<article class="teaser">
<img src="/bilder/hafen.jpg" alt=""
width="480" height="270">
<h3>Hafenstadt im Wandel</h3>
<p>Wie aus Lagerhallen Wohnungen wurden.</p>
<a href="/artikel/hafenstadt">
Weiterlesen
<span class="visually-hidden">
zum Artikel Hafenstadt im Wandel
</span>
</a>
</article>Prüfprotokoll
Drei Ansichten desselben Links
- CSS aus
Der Zusatz erscheint im Dokument. So prüfen Sie, ob er wirklich im HTML steht.
- Linkliste
NVDA oder VoiceOver nennt „Weiterlesen zum Artikel Hafenstadt im Wandel“.
- Accessibility Tree
Die Entwicklerwerkzeuge zeigen denselben vollständigen berechneten Namen.
- Tab
Der Kartenlink erhält sichtbaren Fokus; ein Sprunglink wird beim Fokus vollständig sichtbar.
Aus dem Prüfbericht
Drei Stellen auf der Teaserkarte
Kritisch Der Pfeil auf der Teaserkarte Regel link-name
Der Link enthält nur ein Pfeilsymbol. Ein visuell verborgener Zusatz nennt das Ziel, ohne die Karte zu verändern.
Kritisch Die Schaltfläche zum Merken Regel button-name
Ein Herzsymbol ohne Wort bleibt namenlos. Ein visuell verborgener span im Button liefert das Wort „Merken“.
Zum Mitnehmen
Die Teaserkarte, korrigiert
Eine Klasse und ein Zusatzwort statt eines aria-hidden.
Korrektur in 3 Schritten ansehen
Die Klasse richtig anlegen
visibility: hidden nimmt den Text auch aus der Ausgabe. Die Klasse lässt ihn im Dokument und schrumpft nur seine Fläche.
KorrekturvergleichSchritt 1 · CSS Vorher
.visually-hidden { visibility: hidden; }Nachher
.visually-hidden { 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.
Dem Pfeillink sein Ziel geben
Das Symbol bleibt verborgen, der Zusatz wird zum Namen des Links. Am Aussehen der Karte ändert sich nichts.
KorrekturvergleichSchritt 2 · HTML Vorher
<a href="/projekte/hafen" class="karte-link"> <span aria-hidden="true">→</span> </a>Nachher
<a href="/projekte/hafen" class="karte-link"> <span aria-hidden="true">→</span> <span class="visually-hidden">Projekt Hafen ansehen</span> </a>Markierte Zeilen wurden geändert
So prüfen Sie es Öffnen Sie die Linkliste eines Vorleseprogramms. Der Eintrag heißt „Projekt Hafen ansehen“.
aria-hidden von der Karte nehmen
aria-hidden verbirgt die ganze Karte vor Vorleseprogrammen, der Link bleibt trotzdem per Tab erreichbar. Verbergen Sie nur, was niemand braucht.
KorrekturvergleichSchritt 3 · HTML Vorher
<article class="karte" aria-hidden="true"> <a href="/projekte/hafen">Projekt Hafen</a> </article>Nachher
<article class="karte"> <a href="/projekte/hafen">Projekt Hafen</a> </article>Markierte Zeilen wurden geändert
So prüfen Sie es Tabben Sie auf den Link. Ein Vorleseprogramm nennt jetzt seinen Text.