Unsichtbare Texte veröffentlicht in 2012zuletzt bearbeitet in
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:
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>
Das HTML-Attribut
hidden
funktioniert dem Grunde nach wiedisplay: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, diehidden
nicht unterstützen, kann die folgende CSS-Deklaration behelfsmäßig eingesetzt werden:[hidden] {
display:none;
}Damit wird das
hidden
-Attribut durch CSS überschrieben (die Eigenschaftdisplay
überschreibt dashidden
-Attribut unabhängig von ihrem Wert).Die CSS-Deklaration
visibility:hidden;
funktioniert wiedisplay: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;
funktioniertvisibility: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:
<button aria-expanded="false">Mitteilung</button>
...
<p style="display:none;">Die Mitteilung</p>
Wird der Button aktiviert, dann müssen der Zustand des Buttons (hier: aria-expanded
) angepasst und die CSS-Deklaration des nachfolgenden Absatzes entfernt werden:
<button aria-expanded="true">Mitteilung</button>
...
<p>Die Mitteilung</p>
Der Beitrag Unsichtbare Texte besteht aus folgenden einzelnen Webseiten:
- Für keinen zugänglich
(Aktuelle Seite)
- Nur am Bildschirm zugänglich
Wenn Inhalte am Bildschirm redundant eingesetzt werden, können sie in Screenreadern manchmal störend sein. ARIA bitet bestimmte Attribute bzw. Werte für Attribute an, um solche Inhalte (vorsichtig!) vor dem Accessibility-Tree zu verbergen.
- Nur für Screenreader und Tastaturnutzer zugänglich
Auf vielen Webseiten findet man die Klasse "sr-only". Sie wird für Inhalte eingesetzt, die am Bildschirm unsichtbar, aber für Screenreader trotzdem zugänglich sind. Bei dieser Technik müssen allerdings Tastaturnutzer ebenfalls bedacht werden.
Der folgende Begriff auf dieser Seite wird im Glossar definiert:Inhalt