CSS im Einsatz: Unsichtbarer Seiteninhalt speziell für Screenreader-Nutzer
Deutsche Übersetzung des WebAIM-Artikels „CSS in Action: Invisible Content Just for Screen Reader Users“
Zuletzt geändert: 25. September 2020
Inhalt
Einführung
In bestimmten Fällen soll Web-Inhalt nur für die Nutzer von Bildschirmlesegeräten verfügbar gemacht, aber vor sehenden Benutzern verborgen werden. In den allermeisten Fällen sollten jedoch visuell verfügbare Inhalte für Screenreader-Nutzer verfügbar sein und umgekehrt. Ausführliche Hinweise oder Anweisungen, die nur von Screenreadern gelesen werden können, schaden normalerweise mehr als sie nützen. Es gibt jedoch einige Fälle, in denen Information oder Sinngehalt visuell ganz offenkundig sind, für Benutzer von Screenreadern jedoch möglicherweise nicht. In diesen seltenen Fällen kann es angebracht sein, den Inhalt so zu gestalten, dass er von einem Screenreader vorgelesen werden kann, jedoch für sehende Nutzer unsichtbar bleibt.
Techniken zum Ausblenden von Inhalten
Es gibt verschiedene Methoden, um Inhalt auszublenden. Dabei ist es wichtig, eine Technik einzusetzen, die neben dem erwünschten Resultat auch die erforderliche Zugänglichkeit erzielt.
display:none; oder visibility:hidden;
Diese Styles verbergen Inhalte vor allen Benutzern. Der Inhalt wird aus dem visuellen Fluss der Seite entfernt und von Screenreadern ignoriert. Verwenden Sie dieses CSS nicht, wenn der Inhalt von einem Screenreader vorgelesen werden soll. Nutzen Sie es jedoch für Inhalte, die vor allen Nutzern verborgen bleiben sollen.
hidden Attribut
Das HTML-Attribut hidden ist relativ neu und wird von älteren Browsern, wie dem IE11, nicht unterstützt. Wenn es unterstützt wird, funktioniert es genauso wie das CSS display:none und damit bezeichnete Elemente werden keinem Nutzer angezeigt.
width:0px; height:0px; oder andere 0-Pixel-Techniken (nicht empfohlen)
Ein Element ohne Höhe oder Breite, unabhängig davon, ob dies im HTML oder CSS definiert wird, wird normalerweise aus dem Dokumentfluss entfernt, sodass es von den meisten Screenreadern nicht gelesen wird. Ändern Sie die Größe des Inhalts nicht auf 0 Pixel, wenn der Inhalt von einem Screenreader gelesen werden soll. Inhalte mit font-size:0px; oder line-height:0; funktionieren möglicherweise, obwohl die Elemente weiterhin horizontalen Platz auf dem Bildschirm einnehmen. Alle diese Techniken können von Suchmaschinen abgestraft werden, da sie als böswillig interpretiert werden könnten.
text-indent: -1000px;
Diese Methode verschiebt den Inhalt um 1000 Pixel nach links – also außerhalb des sichtbaren Bildschirmbereichs. Screenreader können auf diese Weise gestylten Text weiterhin lesen. Wenn man dieses CSS einem Link, einem Formular-Element oder einem anderen fokussierbaren Element zuweist, bleibt das Element zwar fokussierbar, ist jedoch auf der Seite nicht sichtbar, was sehende Tastatur-Benutzer möglicherweise irritiert. Dieser Ansatz kann eine praktikable Option sein, wenn das Element keine navigierbaren Elemente enthält, obwohl bessere Techniken zur Verfügung stehen.
Absolute Positionierung von Inhalten außerhalb des Bildschirms
Dies sind die empfohlenen Styles, um einen für Screenreader zugänglichen Text visuell auszublenden:
.sr-only {position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;}
Auf die CSS-Klasse .sr-only (“sr-only” bedeutet “nur für Screenreader”, obwohl der Klassenname eigentlich nicht wichtig ist) sollte dann von dem HTML-Tag des zu versteckenden Elements aus folgendermaßen verwiesen werden:
<div class="sr-only">Dieser Text ist versteckt</div>
Sehende Nutzer bekommen solchermaßen versteckten Inhalt überhaupt nicht zu sehen – er wird gut links vom sichtbaren Browserfenster versteckt. Da er jedoch immer noch Teil des Seiteninhalts ist, können ihn Screenreader lesen.
Gehen wir den Code im Detail durch:
position: absolute; veranlasst den Browser das Element aus dem Dokumentfluss zu nehmen und zu positionieren.
left: -10000px; verschiebt den Inhalt um 1000 Pixel nach links.
top: auto; weist den Browser an, den Inhalt vertikal auf derselben Höhe zu lassen, auf der er ursprünglich war.
width: 1px; height: 1px; overflow: hidden; bewirkt, dass der Browser das Element auf eine Größe von 1 Pixel verkleinert und alles, was darüber hinaus geht, visuell ausblendet. Dies ist in jenen Fällen nützlich, in denen die Positionierung vom Endbenutzer deaktiviert ist, alle anderen Stile jedoch aktiviert bleiben.
Anmerkung
Navigierbare Elemente wie Links und Formularsteuerelemente sollten nicht außerhalb des sichtbaren Bildschirmbereichs positioniert werden. Sie wären für sehende Tastaturbenutzer weiterhin navigierbar, jedoch nicht sichtbar, es sei denn, sie sind so gestaltet, dass sie sichtbar werden, wenn sie den Tastaturfokus erhalten.
CSS clip
{clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;}
Diese relativ moderne Technik versteckt oder beschneidet Inhalte, die nicht in einen sichtbaren Bereich von 1 Pixel passen. Wie Off-Screen-Inhalte werden sie visuell ausgeblendet, sind aber für moderne Screenreader weiterhin lesbar.
Beispiele
Wichtig!
Verwenden Sie diese Techniken mit Bedacht! Denken Sie daran, dass viele Screenreader-Nutzer noch eine gewisses Sehvermögen haben – was sie sehen und was sie hören, sollte normalerweise übereinstimmen. Im Allgemeinen sollten nur solche Inhalte ausschließlich für die Benutzer von Screenreadern zugänglich gemacht werden, deren Informationsgehalt nur visuell zu erkennen ist, für blinde Screenreader-Nutzer jedoch nicht.
Anleitungen und Hinweise
Ein relativ häufiger Anwendungsfall für Nur-Screenreader-Inhalte ist ein Sucheingabefeld, das aufgrund seiner Position auf der Seite und des angrenzenden Such-Buttons visuell leicht als Suchfeld identifiziert werden kann, für das jedoch keine Beschriftung existiert. Ein verstecktes, zugeordnetes <label>-Element mit “Suchbegriff eingeben” (oder Ähnlichem) würde sicherstellen, dass das Feld von Screenreader-Nutzern ordnungsgemäß identifiziert werden kann.
Ein weiterer Anwendungsfall wäre die Breadcrumb-Navigation (z. B. der Text “Startseite > Artikel > CSS in Action …” oben auf der Seite) [siehe: https://webaim.org/techniques/css/invisiblecontent/#techniques – Anm. d. Übers.]. Dies ist aufgrund ihrer visuellen Position und Präsentation eine übliche Konvention. Da die Screenreader-Nutzer linear auf die Breadcrumb-Links und -Inhalte zugreifen, ist es für sie möglicherweise nicht ohne weiteres ersichtlich, dass es sich um Breadcrumbs handelt. Aus diesem Grund wurde direkt vor den Breadcrumbs der versteckte Text “You are here:” hinzugefügt, um den Screenreader-Nutzern einen Hinweis auf das Folgende zu geben.
Skip-Links
„Direkt zum Hauptinhalt springen“- oder „Navigation überspringen“-Links sind einer der wenigen Fälle, wo Barrierefreiheit einen möglichen negativen Effekt auf das visuelle Design und die Nutzerfreundlichkeit für einige User hat. Sinnvollerweise sollte der Skip-Link einer der ersten auf der Seite sein. Designer könnten aber davor zurückschrecken, einen so prominenten Link an den Anfang einer Seite zu setzen, insbesondere wenn er von meisten Website-Besuchern nicht benutzt wird.
Allerdings macht das visuelle Ausblenden des Skip-Links mithilfe einer der oben beschriebenen Techniken diesen für sehende Tastaturbenutzer weit weniger brauchbar – eine Nutzergruppe, die von diesem Link sehr profitieren kann.
Eine Möglichkeit, diesen Konflikt zu lösen ist es, den Skip-Link so lange auszublenden, bis ihn der Nutzer mit der Tab-Taste ansteuert. Daraufhin wird er für sehende Nutzer sichtbar.
Diese Technik verwendet zwei Styles: einen zum visuellen Ausblenden des Links und einen für die Pseudoklasse a:focus, um den Link visuell anzuzeigen, während er den Focus hat.
#skip a{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;}
#skip a:focus{position:static;width:auto;height:auto;}
Auf die CSS-Klasse .skip sollte dann folgendermaßen verwiesen werden:
<div id="skip"><a href="#content">Direkt zum Inhalt springen</a></div>
Bei diesem Ansatz gibt es einen einzigen Nachteil auf konzeptioneller Ebene. Das plötzliche und unerwartete Erscheinen eines vorher unsichtbaren Links könnte sehende Tastatur-Nutzer irritieren. Auch sollte der Link deutlich gestylt werden, damit er auffällt. Für Screenreader-Nutzer oder Maus-Verwender stellt das alles kein Problem dar, weil sie diese Links niemals zu Gesicht bekommen.
Ein Nachteil dieses Ansatzes besteht darin, dass das plötzliche Auftreten eines zuvor unsichtbaren Links unerwartet ist und sehende Tastatur-Nutzer möglicherweise irritieren kann. Die WebAIM-Website behebt dies, indem sie mittels CSS-Transitions den Skip-Link, wenn er den Fokus erhält, von einer Position über dem Seitenanfang (im Gegensatz zu links außerhalb des Bildschirms) in die linke obere Ecke der Seite verschiebt und dann wieder zurück, wenn er den Fokus verliert. Dadurch wird sichergestellt, dass der Link über einen längeren Zeitraum auf dem Bildschirm gut sichtbar ist. Sie können dies ausprobieren, indem Sie die Tabulatortaste mit dem Fokus oben auf der Seite [https://webaim.org/techniques/css/invisiblecontent/#techniques – Anm. d. Übers.] drücken.