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“

Inhalt

  1. Einführung
  2. Methoden zum Verbergen von Text
  3. Absolute Positionierung
  4. Beispiele
    1. Anleitungen und Hinweise
    2. Skip-Links
    3. Weitere Anwendungen
  5. Fazit

Einführung

In bestimmten Fällen soll Web-Inhalt nur für die Nutzer von Bildschirmlesegeräten zugänglich gemacht, aber vor sehenden Benutzern versteckt werden. Meistens jedoch sollte Inhalt, der so wichtig ist, dass er den Screenreader-Nutzern zur Verfügung gestellt wird (insbesondere Inhalt, der Funktionalität oder Interaktivität ermöglicht), für alle Nutzer zugänglich sein. Wenn auf Websites ausführliche Hinweise oder Anleitungen ausschließlich für die Nutzer von Screenreadern bereitgestellt werden, ist dies meist ein Ausdruck von schlechtem Design und mangelnder Zugänglichkeit. Es gibt allerdings einige Fälle, in denen die Information visuell ganz offenkundig ist, aber von Screenreader-Nutzern möglicherweise nicht wahrgenommen werden kann. In diesen Fällen kann es sinnvoll sein, den Inhalt in einer Weise auszuzeichnen, dass er von einem Screenreader vorgelesen werden kann, aber für sehende Nutzer unsichtbar bleibt.

Methoden zum Verbergen von Text

Es gibt verschiedene Möglichkeiten um Inhalt zu verbergen. Dabei ist es wichtig, eine Technik einzusetzen, die neben dem erwünschten Resultat auch die erforderliche Zugänglichkeit erzielt.

visibility: hidden; und/oder display: none;
Diese Styles verbergen Text vor allen Benutzern. Der Text wird auf der Seite nicht angezeigt und von Screenreadern ignoriert. Verwenden Sie dieses CSS nicht, wenn der Inhalt von einem Screenreader vorgelesen werden soll. Nutzen Sie es jedoch für Inhalt, der NICHT von Screenreadern gelesen werden soll.

width: 0px; height: 0px;
Wie oben: Da ein Element ohne Höhe oder Breite aus dem Dokumentfluss entfernt wird, wird dessen Inhalt von den meisten Screenreadern ignoriert. HTML-Breite und -Höhe führen zum selben Ergebnis. Weisen Sie Inhalt, der von einem Screenreader gelesen werden soll, nicht eine Größe von 0 Pixel zu.

text-indent: -1000px;
Diese Methode versetzt den Inhalt um 1000 Pixel nach links - also außerhalb des sichtbaren Bildschirmbereichs. Der eigentliche Pixel-Wert ist dabei nebensächlich, solange der Inhalt off-screen positioniert wird. Screenreader können auf diese Weise gestylten Text trotzdem lesen. Wenn man dieses CSS allerdings einem Link oder einem Formular-Element zuweist, kann es zu einer Fokus-Anzeige kommen (die gestrichelten Linien oder "marschierenden Ameisen", die einen fokussierten Link umgeben), die sich von dem Platz, an dem sich das Element auf der Seite befinden sollte bis zu dem Platz an dem es sich tatsächlich befindet (weit nach links) erstreckt, was nicht besonders hübsch aussieht. Dieser Ansatz verursacht auch Probleme bei Sprachen, die von rechts nach links geschrieben werden. An sich kann dieser Ansatz eine sinnvolle Option sein, wenn das Element keine navigierbaren Elemente enthält, obgleich bessere Techniken zur Verfügung stehen.

CSS clip

position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);

Mit dieser relativ neuartigen CSS-Technik um Inhalt zu verstecken oder zu beschneiden, der nicht in einen 1 Pixel großen sichtbaren Bereich passt, wird der Inhalt in erster Linie ausgeblendet, lässt sich jedoch immer noch mit modernen Screenreadern lesen.

Absolute Positionierung von Inhalten außerhalb des Bildschirms

Elemente mittels CSS an eine Position außerhalb des sichtbaren Bildschirms zu verschieben hat sich als die nützlichste und am besten zugänglichste Methode durchgesetzt, um Inhalt optisch zu verbergen.

Inhalt außerhalb des Bildschirms positionieren

Dies sind die empfohlenen Styles, um einen für Screenreader zugänglichen Text optisch zu verbergen:

.hidden {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}

Auf die CSS-Klasse .hidden sollte dann von dem HTML-Tag des zu versteckenden Elements aus folgendermaßen verwiesen werden:

<div class="hidden">Dieser Text ist versteckt</div>

Sehende Nutzer bekommen solchermaßen versteckten Inhalt überhaupt nicht zu sehen. Er befindet sich außerhalb ihres Sichtbereichs, gut versteckt links vom sichtbaren Browserfenster. Für Screenreader-Nutzer ist der Inhalt voll zugänglich, als ob er in keiner Weise versteckt wäre. Screenreader lesen den Inhalt ganz normal, ohne sich im Geringsten um die Styles zu kümmern, die bei dieser Methode angewandt werden.

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; befiehlt dem Browser den Inhalt vertikal auf derselben Höhe zu lassen, an der er ursprünglich war. Das Weglassen von „top“ kann in einigen Fällen und bei manchen Browsern dazu führen, dass der „left“-Style ignoriert wird. Kurz gesagt, dieser Code-Teil verschiebt das Element um 1000 Pixel direkt nach links.

width: 1px; height: 1px; overflow: hidden; bewirkt, dass der Browser dem Element eine Größe von 1x1 Pixel zuweist und alles, was darüber hinaus geht, optisch verbirgt. Diese Anweisung scheint etwas übertrieben und kann vermutlich in den meisten Fällen problemlos weggelassen werden. Es gibt jedoch einige Fälle, in denen die Positionierung deaktiviert werden kann, während alle anderen Styles aktiv bleiben. In diesem Fall bleibt das Element an seiner ursprünglichen Position, nimmt jedoch nur den Platz von 1 Pixel ein.

Anmerkung

Manchmal wird empfohlen Inhalte mittels: left: 0px; top: -500px; (oder Ähnlichem) zu positionieren. Dies funktioniert zwar, indem der Inhalt über den oberen Seitenrand hinaus verschoben wird. Enthält das versteckte Element jedoch einen Link oder ein Formular-Element, so versucht der Browser sowie es den Tastaturfokus erhält, zu diesem Element zu scrollen - also zum oberen Seitenrand. Dies könnte bei sehenden Tastatur-Benutzern Verwirrung stiften. Durch die Positionierung direkt links auf der ursprünglichen Höhe des Elements, wird verhindert, dass der Browser zum Anfang der Seite scrollt. Links und Formular-Elemente sollten nur selten vor sehenden Nutzern versteckt werden, weil sie interaktive Funktionalität bereitstellen. Auch können sehende User nicht erkennen, welches Element gerade den Fokus hat, weil es sich außerhalb des sichtbaren Bildschirmbereichs befindet.

Beispiele

Wichtig!

Im Allgemeinen sollte nur solcher Inhalt vor sehenden Nutzern versteckt und gleichzeitig für die Nutzer von Screenreadern zugänglich gemacht werden, der visuell ganz offensichtlich ist, aber von Screenreader-Nutzern nicht wahrgenommen werden kann.

Anleitungen und Hinweise

Diese Methode kann dazu verwendet werden, um Screenreader-Nutzern Anleitungen und Hinweise zur Verfügung zu stellen. Sie sollte allerdings umsichtig und nur bei Bedarf eingesetzt werden. Diese Seite [www.webaim.org Anm. d. Übers.] demonstriert den richtigen Einsatz dieser Technik. an zwei Stellen.

Erstens befindet sich am Seitenanfang direkt vor dem Eingabefeld der Suche ein verstecktes Label-Element. Für Sehende ist es wegen der Optik und des "Suchen"-Buttons ganz offensichtlich, dass es sich bei diesem Eingabefeld um die Suche handelt. Die Benutzer von Screenreadern benötigen jedoch eine Bezeichnung für das Feld. Daher haben wir ein optisch unsichtbares Label eingesetzt [<label for="q" class="hidden">Suchbegriff</label> Anm. d. Übers.].

Zweitens ist die Breadcrumb-Navigation am Seitenanfang inzwischen allgemein gebräuchlich. Die meisten Internet-User sind damit vertraut und können die Breadcrumbs optisch erkennen. Da ein Screenreader die Breadcrumb-Links und den Inhalt linear abarbeitet, ist es möglich, dass er die Breadcrumb-Navigation erst als solche erkennt, nachdem er einen Teil davon gelesen hat. Wir haben daher direkt vor die Breadcrumbs den versteckten Text: „Sie sind hier:“ eingefügt. [<span class="hidden">Sie sind hier: </span> Anm. d. Übers.].

Alle diese verborgenen Texte können Sie sehen, wenn Sie die Styles für diese Seite deaktivieren. Denken Sie daran, dass der gesamte mittels CSS versteckte Inhalt sichtbar wird, wenn die Styles deaktiviert werden.

Skip-Links

„Direkt zum Inhalt springen“-Links sind einer der wenigen Fälle, wo Barrierefreiheit das visuelle Design direkt und deutlich beeinflusst. Sinnvollerweise sollte der Skip-Link eines der ersten Elemente auf der Seite sein. Designer könnten aber davor zurückschrecken, einen Link als erstes auf eine Seite zu setzen, insbesondere wenn er nur von einer Minderheit der Besucher genutzt wird. Wird der Link jedoch versteckt, so ist er für sehende Tastatur-Benutzer unbrauchbar – eine Nutzergruppe, die stark von diesen Links profitieren kann.

Eine Möglichkeit, um die Auswirkungen, die Skip-Links auf das visuelle Design haben mit den Bedürfnissen der Screenreader-Nutzer und der Nutzer mit Bewegungseinschränkungen in Einklang zu bringen ist es, den Skip-Link solange auszublenden, bis ihn der Nutzer mit der Tab-Taste ansteuert. Dies ermöglicht es sowohl blinden als auch sehenden Tastatur-Benutzern von der Funktion dieses Links zu profitieren.

Um dies zu erreichen, werden zwei Styles erstellt – einer für das <a>-Tag und einer für das a:focus Pseudoelement. Der Style für das a:focus Pseudoelement ist nur dann aktiv, wenn der Tastatur-Nutzer den Link mit der Tab-Taste ansteuert (d.h. den Fokus hat). „Tabbt“ der Nutzer weiter, kehrt der Link wieder in seinen normalen Style zurück (d.h. er wird wieder off-screen versteckt).

#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.

Weitere Anwendungen

Formular-Steuerelemente werden manchmal so dargestellt, dass Text als Beschreibung für mehrteilige Eingabe-Felder optisch mit diesen verknüpft wird. Denken Sie an eine Dateneingabe, bei der der Text "Vorname" die Funktion von mehreren darunter liegenden Textfeldern beschreibt. Manchmal werden für diese Art der Darstellung auch Tabellen verwendet. Andererseits wird manchmal ein Steuerelement mit mehreren Textelementen beschriftet, wie z.B. ein Passwort-Feld, dem die Wörter "Passwort" und "Pflichtfeld" voran gestellt werden. Die standardkonforme Zuweisung von Labels sieht keine Möglichkeit vor, einen Text mit mehrteiligen Steuerelementen oder mehrere Textelemente mit einem Steuerelement zu verknüpfen. In diesen Fällen könnten die entsprechenden Labels im Markup direkt neben die jeweiligen Formular-Elemente gesetzt und durch das oben stehende CSS optisch versteckt werden.

Ein typisches Beispiel dafür ist die Verwendung von zwei oder mehr Texteingabe-Feldern für eine Telefonnummer.

Auf das Wort 'Telefonnummer' folgen 4 Text-Eingabefelder zur Eingabe der Vorwahlnummer, der ersten 3 Ziffen, der letzten 4 Ziffern sowie der Durchwahlnummer

Die meisten sehenden Nutzer aus Nordamerika werden erkennen, dass die einzelnen Texteingabe-Felder den verschiedenen Abschnitten einer Standard-Telefonnummer entsprechen. Screenreader-Nutzer könnten jedoch versuchen, die gesamte Telefonnummer in das erste Feld einzugeben. Sie sind wahrscheinlich irritiert, wenn sie feststellen, dass die Eingabe auf 3 Buchstaben beschränkt ist und weitere Texteingabe-Felder ohne Label folgen.

Die naheliegendste Lösung für dieses spezielle Problem wäre es, alle Text-Eingabefelder zu einem einzigen Text-Eingabefeld zusammenzufassen und dann mit einem entsprechenden Label zu versehen. Allerdings wird die Zugänglichkeit genauso durch die Verwendung von off-screen Labels für jedes einzelne Text-Eingabefeld gewährleistet.


Telefonnummer:
(
<label for="area" class="hidden">Vorwahlnummer</label>
<input name="area" id="area" type="text" size="3" maxlength="3"/>
)
… 

Die off-screen Labels würden in diesem Fall eine ausreichende Beschreibung für die Nutzer von Bildschirmlesegeräten darstellen.

Anmerkung

Im oben genannten Beispiel könnte man zur Übermittlung der Information ebenso das title-Attribut verwenden. Screenreader lesen die Information aus dem title-Attribut vor, wenn kein Label vorhanden ist. Darüber hinaus gibt es durch den Einsatz von aria-labelledby die Möglichkeit mehrere Labels pro Eingabe-Feld oder mehrteilige Eingabe-Felder pro Label zu nutzen.

Fazit

Wenn die hier vorgestellten CSS-Techniken angewandt werden, um Inhalt zu verbergen, werden sehende Nutzer niemals wissen, dass es den Inhalt überhaupt gibt (es sei denn, sie deaktivieren die Styles). Andererseits werden die Benutzer von Screenreadern nicht erkennen, dass der Inhalt für sehende Nutzer unsichtbar ist. Beide Benutzergruppen sind in der Lage den Inhalt intuitiv zu bedienen, ohne dass für eine von beiden zu viel oder zu wenig Information im Markup angepasst werden muss. Dadurch können wichtige kontextuelle Hinweise gegeben werden, die wegen ihrer visuellen Natur für Screenreader-Nutzer nicht zu fassen sind. Vernünftig eingesetzt, kann diese Methode helfen, das Spannungsfeld zwischen den Ansprüchen der Barrierefreiheit und des visuellen Designs zu verringern. Es handelt sich hierbei nicht um die einzige Technik oder Methode zur Lösung dieses Problems, es ist aber eine, die Web-Entwickler bei Bedarf auf ihre Liste von Lösungsmöglichkeiten aufnehmen können.