Unsichtbare Texte — mit CSS, WAI-ARIA oder HTML5 veröffentlicht in 2012

Damit Webseiten auch für Screenreader barrierefrei nutzbar werden, ist es gelegentlich notwendig, zusätzliche Inhalte in einer Webseite zu berücksichtigen, sie aber am Bildschirm zu verstecken. Das können unsichtbare Überschriften zur Verbesserung der Intern: strukturellen Navigation, Intern: unsichtbare Sprunglinks oder Informationen, die sonst Intern: nur über CSS vermittelt werden, sein. Entscheidend für die Zugänglichkeit ist die eingesetzte Technik des Versteckens.

Zusätzliche Texte und Links für Screenreader

Manchmal ist das, was am Bildschirm zu sehen ist, in einem linearen Medium nicht gut nachvollziehbar. Welche Techniken sind dann dafür geeignet, Inhalte im Screenreader darzustellen, aber nicht am Bildschirm? In der folgenden Tabelle werden einige Möglichkeiten aufgelistet und kommentiert.

TechnikAnmerkungen

.unsichtbar {
  text-indent: -10000px;
}

  • Eine einfache Methode, bei der eine sehr große Ausrückung die Inhalte links außerhalb des sichtbaren Bereichs des Bildschirms positioniert.
  • Normalerweise sollten fokussierte Inhalte in den sichtbaren Bereich des Bildschirms geholt werden; sollten fokussierte Inhalte unsichtbar bleiben, dann muss die Deklaration mit outline:0; ergänzt werden.
  • Für Inhalte, deren Schreibrichtung nicht links nach rechts ist, muss die Technik entsprechend angepasst werden.

.unsichtbar {
  position: absolute;
  height: 0;
  overflow: hidden;
}

  • Diese Eigenschaften sorgen dafür, dass der Inhalt nicht mehr am Bildschirm angezeigt werden kann.
  • Es kann allerdings vorkommen, dass Browser Inhalte ohne Höhe nicht an den Accessibility-Tree übertragen, wodurch sie auch für Screenreader nicht mehr zugänglich sind.

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

  • Eine Technik, bei der die Inhalte links außerhalb des sichtbaren Bereichs des Bildschirms positioniert werden. Ausführliche Erläuterungen sind bei Extern, englischsprachig: WebAIM zu finden .
  • Der Wert auto für top ist wichtig, damit bei Fokus die Seite nicht unerwartet nach oben springt.
  • Für Inhalte, deren Schreibrichtung nicht links nach rechts ist, muss die Positionierung rechts statt links außerhalb des Bildschirms vorgenommen werden.
  • Die Größenangaben (width und height) sind i.a.R. nicht notwendig.

.unsichtbar {
  position: absolute;
  clip: rect(1px, 1px, 1px, 1px);
  clip: rect(1px 1px 1px 1px); /*  IE6  und  7  */

}

  • Diese Technik löst das Problem der Schreibrichtung. Sie muss aber mit einem kleinen Hack auskommen für ältere Versionen des Internet Explorer.
  • Inzwischen sollte statt clip Extern, englischsprachig: die Eigenschaft clip-path genutzt werden.

Wenn diese CSS-Techniken auf Webseiten verwendet werden, werden Inhalte am Bildschirm nicht wahrgenommen (außer wenn CSS ausgeschaltet wird). Auf der anderen Seite werden Screenreadernutzer nicht feststellen, dass die gelesenen Inhalte am Bildschirm versteckt werden. Beide Nutzergruppen können dadurch eine optimale Informationsversorgung bekommen.

Inhalte für alle verbergen

Die CSS-Deklarationen display:none; und visibility:hidden; werden oft zum Verstecken von Inhalten verwendet. Diese beiden Techniken verstecken die Inhalte aber auch vor Screenreadern. Beispielsweise wird der gängigste Screenreader JAWS Inhalte, die mit einer der beiden Deklarationen versteckt wurde, auch Extern, englischsprachig: nicht ausgeben.

Folglich sollten display und visibility nur dann eingesetzt werden, wenn Inhalte sowohl am Bildschirm als auch vor Screenreadern versteckt werden sollen, z.B. bei nicht sichtbaren Untermenüs.

hidden und aria-hidden

Die Entwicklung der Webstandards geht weiter und HTML5 und WAI-ARIA bieten beide spezielle Attribute, um Inhalte für Nutzer zu verstecken:

Extern, englischsprachig: hidden

Dieses HTML5-Attribut funktioniert wie die CSS-Deklaration display:none;

<p hidden>Dieser Text sollte nicht mehr zugänglich sein.</p>

Extern, englischsprachig: aria-hidden

Dieses ARIA-Attribut weist den Browser an, ein Element (samt Kindelemente) nicht an den Accessibility-Tree zu übertragen. Es funktioniert anders als das hidden-Attribut, weil der Inhalt am Bildschirm angezeigt, aber vor Screenreadern versteckt wird. Das Attribut ist deshalb mit Vorsicht einzusetzen. Anwendungsbeispiele sind Layout-Elemente oder redundante Inhalte.

<p aria-hidden="true">Dieser Text ist in Screenreadern nicht zugänglich, aber am Bildschirm sichtbar.</p>

Versteckte Inhalte und Fokus

Wenn unsichtbare Links und andere fokussierbare Inhalte den Fokus erhalten, müssen diese Intern: Inhalte sichtbar gemacht werden. Sehende Tastaturnutzer müssen unsichtbare Inhalte vor allem beim Fokussieren mit der Tabulatortaste wahrnehmen können. Für alle Techniken des Versteckens können mit dem Pseudo-Attribut :focus die Werte der Klasse unsichtbar rückgängig gemacht werden. Beispielsweise für die Technik mit position und left würde das wie folgt aussehen:

.unsichtbar:focus {
  position: relative;
  left: 0;
  width: auto;
  height: auto;
  overflow: auto;
}