Zweiter Blick: Verstecken von Inhalten
Informationen


Verbergen von Inhalten

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:

Anweisungen zum Verbergen und deren Auswirkungen
Anweisung/th> Technologie Visueller Effekt Screen Reader Effekt
<!-- Kommentar --> HTML Keine Darstellung Keine Darstellung
hidden HTML Attribut Keine Darstellung Keine Darstellung
/* Kommentar */ CSS Keine Darstellung Keine Darstellung
display: none CSS Keine Darstellung und
0 Pixel Größe
Keine Darstellung
visibility: hidden CSS Keine Darstellung,
aber mit Platzhalter
Keine Darstellung
opacity: 0 CSS Keine Darstellung,
aber mit Platzhalter
Normale Darstellung
aria-hidden="true" ARIA Normale Darstellung Keine Darstellung

Anmerkungen zu den Techniken zum Verbergen

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:

Technisches Verbergen mittels aria-hidden

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

Usability Ü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.