Unsichtbare Texte
veröffentlicht in 2012zuletzt bearbeitet in
Manchmal müssen Inhalte auf Webseiten versteckt werden. Inhalte, die kontextabhängig angezeigt oder erst später als Teil eines Prozesses werden, sollten zunächst vor jedem Nutzer verborgen werden. Auch im barrierefreien Webdesign gehört das Verstecken von Inhalten zu den klassischen Techniken, aber dann geht es meist darum, zusätzliche Inhalte nur für Screenreader bereitzustellen. Die verschiedenen Gründe, Inhalte zu verstecken, benötigen unterschiedliche Umsetzungstechniken:
- Für keinen zugänglich: Webseiten können Inhalte enthalten, die nur in bestimmten Situationen zugänglich sein sollen. Das können beispielsweise Dialogfenster oder Inhalte eines Akkordeons sein, die bei Bedarf sichtbar gemacht werden. Entscheidend ist hier, dass die gewählten Techniken Inhalte nicht nur am Bildschirm aus- bzw. wieder einblenden, sondern die Übertragung der Inhalte an den Accessibility-Tree ebenso verhindern bzw. wieder zulassen.
- Nur am Bildschirm zugänglich: Obwohl generell gilt, dass alle Inhalte am Bildschirm auch für Screenreader zugänglich sein müssen, so kann es Situationen geben, wo der Bildschirminhalt zu redundanten Informationen im Screenreader führt. Mit Accessible Rich Internet Applications (ARIA) können sichtbare Inhalte vom Accessibility-Tree und somit vor Screenreadern verborgen werden.
- Für Screenreader und Tastaturnutzer zugänglich: In einzelnen Situationen kann es notwendig sein, die sichtbaren Inhalte am Bildschirm durch unsichtbaren Text zu ergänzen, damit Screenreader- und/oder Tastaturnutzer Inhalte besser nutzen können. Solche Inhalte müssen so versteckt werden, dass sie per CSS am Bildschirm unsichtbar, aber trotzdem an den Accessibility-Tree übertragen werden. Gleichzeitig müssen versteckte aktive Elemente (wie z.B. Links) für Tastaturnutzer sichtbar gemacht werden.
Die gewählte Technik kann für die Barrierefreiheit entscheidend sein. Wird die falsche Technik für das Verstecken von Inhalten gewählt, kann der barrierefreie Zugang eingeschränkt werden.
Der Beitrag "Unsichtbare Texte" besteht aus folgenden einzelnen Webseiten:
Für keinen zugänglich
Für Inhalte, die nur in bestimmten Situationen eingeblendet werden, sollte die CSS-Deklaration
display:none;
oder eine ähnliche Technik eingesetzt werden, um sie vor jedem Nutzer zu verstecken.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.
Die folgenden Begriffe dieser Seite werden auch im Glossar definiert: