Unsichtbare Texte veröffentlicht in 2012zuletzt bearbeitet in 2018

Für keinen zugänglich

Auf Webseiten kann es zahlreiche Komponenten der Benutzungsschnittstelle und Inhalte geben, die initial zwar im DOM vorhanden sind, aber nur im Bedarfsfall eingeblendet werden. Solche Inhalte erscheinen oft in einem bestimmten Kontext (z.B. wenn bei Fehleingaben in Formularen Fehlermeldungen angezeigt werden) oder stellen optionale Funktionen dar (z.B. durch Nutzeraktion werden Inhalte eingeblendet). Solche Inhalte sollten in der Ausgangssituation mit einer der folgenden drei Techniken versteckt werden:

1. Die CSS-Deklaration display:none; unterdrückt ein Element im Dokumentenfluss, wobei das Element und seine Inhalte weder am Bildschirm angezeigt noch an den Accessibility-Tree übertragen werden.

   <p style="display:none;">Dieser Inhalt ist für keinen zugänglich.</p>

2. Das HTML-Attribut hidden funktioniert dem Grunde nach wie display:none;.

   <p hidden>Dieser Inhalt ist für keinen zugänglich.</p>

   Dieses HTML-Attribut ist ebenfalls dafür vorgesehen, Inhalte einer Webseite vorübergehend zu verstecken. Das Attribut hat den Vorteil, dass es auch in Situationen funktioniert, in denen das CSS der Webseite nicht verfügbar ist. Allerdings funktioniert hidden nicht in jedem Browser (z.B. im Internet Explorer bis v10). Für Browser, die hidden nicht unterstützen, kann die folgende CSS-Deklaration behelfsmäßig eingesetzt werden:

   [hidden] {
  display:none;
}

   Damit wird das hidden-Attribut durch CSS überschrieben (die Eigenschaft display überschreibt das hidden-Attribut unabhängig von ihrem Wert).

3. Die CSS-Deklaration visibility:hidden; funktioniert wie display:none; mit dem Unterschied, dass der benötigte Platz für die Inhalte am Bildschirm erhalten (und leer) bleibt.

   <p style="visibility:hidden;">Dieser Inhalt ist für keinen zugänglich.</p>

   Im Gegensatz zu display:none; funktioniert visibility:hidden; mit weiteren Eigenschaften wie CSS-Transitionen.

Welche Technik zum Einsatz kommt, ist also abhängig von weiteren Faktoren. In den meisten Fällen ist display:none; geeignet, um Inhalte für niemanden zugänglich zu machen. Im folgenden Beispiel ist die Mitteilung verborgen:

Wird der Button aktiviert, dann müssen der Zustand des Buttons (hier: aria-expanded) angepasst und die CSS-Deklaration des nachfolgenden Absatzes entfernt werden: