Zweiter Blick: Verstecken von Inhalten

BarrierefreiheitDarstellungsoptionen



Verstecken 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.

Technische Anweisungen zum Verbergen von Inhalten

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
Befehl 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

  • 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, dass Inhalte oder Funktionalitäten für Screen Reader vorgesehen werden, 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. Weil Screen Reader in der Regel CSS-Anweisungen ignorieren, sind sie daher unsichtbar und trotzdem für den Screen Reader wahrnehmbar.

Beispiel: 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

Technischer Einsatz von aria-hidden

Mit diesem Attribut kann ein Element samt Unterelementen für Assistierende Technologien verborgen werden, während die visuelle Darstellung bleibt.

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

Funktionalitäten, die etwas für Screen Reader gänzlich verbergen, sollten daher nur mit Sorgfalt eingesetzt werden. Wenn ganze Seitenbereiche verborgen werden, sollte zumindest das Vorhandensein des Seitenbereichs auch für den Screen Reader ausgegeben werden.

Kriterien zum Einsatz von aria-hidden

Folgende Überlegungen können vor dem Einsatz hilfreich sein:

  • Ist das Element rein dekorativ?
  • Verfügt das Element über textuelle Alternativen, die Inhalte und Funktionalitäten adäquat an den Screen Reader ausgeben?
  • Werden auf diese Weise duplizierte Inhalte ausgeblendet?