Verbergen von Inhalten
[Materialsammlung]

Bedeutung des Verbergens von Inhalten

Es ist gelegentlich zweckmäßig oder zu überlegen, einzelne Inhalte einzelnen Zielgruppen und deren Medien vorzubehalten. Dazu dienen technische Mechanismen zum selektiven Verbergen von Inhalten.

Daneben gibt es Mechanismen, mit denen Bereiche aus dem Quellcode generell als nicht zur Veröffentlichung gedacht gekennzeichnet werden. Diese Mechanismen eignen sich zur Kommentierung des Codes oder zum Verbergen von Inhalten, die noch nicht zur Veröffentlichung gedacht sind.

Überblick zu Anweisungen zum Verbergen

Webtechnologien bieten unterschiedliche Anweisungen zum Verbergen von Inhalten für einzelne oder alle Medien. Die zu erwartenden Auswirkungen fasse ich in folgender Tabelle zusammen:

Anmerkungen zu den Techniken zum Verbergen

• Das Auskommentieren von Codebereichen dient dazu, den Code für die Programmierung lesbarer zu machen und sollte daher in diesem Sinn intensiv verwendet werden. Browser und Assistierende Technologien ignorieren diese Inhalte gänzlich.
• Das HTML hidden Attribut hat den Vorteil, dass das Element auch dann verborgen bleibt, wenn CSS deaktiviert ist.
• Auf die CSS-Anweisung opacity sollte man sich nicht verlassen, weil die Browserunterstützung noch fraglich ist. Sicherheitshalber also immer auch visibility="hidden" festlegen!
• Die Screen Reader Unterstützung von CSS Anweisungen gilt als unsicher. Wer etwas für Screen Reader halbwegs sicher verbergen möchte, sollte aria-hidden="true" einsetzen.

Vom Bildschirm verbergen - Screen Reader Only

Es ist manchmal zweckmäßig oder gewünscht, einzelne Inhalte oder Funktionalitäten für Screen Reader vorzusehen, ohne dass diese am Bildschirm sichtbar sind. Ein typisches Beispiel dafür sind Einsprungmenüs am Seitenanfang zu signifikanten Seitenbereichen.

Technisch werden sr-only Bereiche durch die Positionierung des Bereichs mittels CSS-Anweisungen außerhalb des Bildschirms platziert. Weil Screen Reader in der Regel CSS-Anweisungen ignorieren, sind sie daher unsichtbar und trotzdem für den Screen Reader wahrnehmbar.

CSS-Code für ein sr-only Element in HTML

Eine CSS-Klasse, die für den Screen Reader vorbehalten bleiben sollte, wird Off Screen absolut etwa folgendermaßen gekennzeichnet:

.sr-only {
  position: absolute;
  left: -1000em;
}

Für den Screen Reader verbergen - aria-hidden

Bedeutung von aria-hidden

Mit diesem Attribut kann ein Element samt Unterelementen für Assistierende Technologien verborgen werden, während die visuelle Darstellung bleibt. Am Bildschirm sind also Inhalte wahrnehmbar, die der Screen Reader nicht wiedergibt.

Der Nutzen für Menschen, die mit assistierenden Technologien arbeiten, besteht darin, den Inhalt von unnötigem Ballast zu befreien. Die lineare Wahrnehmung von Inhalten macht deren Erarbeitung ohnedies schon mühsam genug.

Das Element darf nur mit höchster Vorsicht eingesetzt werden. Relevante Inhalte oder Funktionalitäten müssen erhalten bleiben.

Kriterien zum Einsatz von aria-hidden

Folgende Überlegungen sollten vor dem Einsatz getroffen werden:

• Ist das Element rein dekorativ?
• Verfügt das Element über textuelle Alternativen, die Inhalte und Funktionalitäten adäquat an den Screen Reader ausgeben? Nur redundante Angaben sollten möglicherweise ausgeblendet werden.
• Verfügt das Element über Inhalte, die von einem Screen Reader in irritierender oder befremdlicher Weise ausgegeben würden? (Bilder aus Zeichen (ASCII-Art))

[ARIA 1.2] aria-hidden (state)

Technisches Verbergen mittels aria-hidden

<p aria-hidden="true">Dieser Inhalt wird vom screen reader nicht wiedergegeben.</p>

Useability Überlegungen zu aria-hidden

Der Einsatz kann zu Verwirrungen führen, wenn sehende mit blinden Personen gemeinsam eine Webseite erarbeiten. Er kann auch Menschen mit Sehbehinderung irritieren, wenn sich Inhalte am Bildschirm zwar vergrößert darstellen lassen, die Sprachausgabe jedoch keine entsprechenden Inhalte vorliest.

Die Überlegung, visuelle Elemente, wie Landkarten, oder ähnliche Bereiche, die für blinde Menschen mutmaßlich nicht relevant sind und über eine textuelle Alternative verfügen, einfach für den Screen Reader zu verstecken, ist bestechend. Bei der linearen Wahrnehmung von Webinhalten ist man ohnedies froh, wenn die Elemente auf das Wesentliche reduziert sind. Allerdings wird mit aria-hidden das ganze Vorhandensein eines Elements oder Bereichs für den Screen Reader verborgen. Eine blinde Person könnte eine sehende Assistenzperson etwa andernfalls darauf hinweisen, dass sich auf der Webseite ein Lageplan befindet.

Auch bei der Bedienung mittels Spracheingabe kann es zu Problemen kommen, wenn der auf dem Bildschirm wahrnehmbare Text eines Schalters nicht dem Text entspricht, mit dem der Schalter ausgelöst werden kann. Dies kann passieren, wenn etwa die Grafik mit dem Schriftzug Jetzt verborgen wird und der Schalter nur durch Bestellen ausgelöst wird.