Sie sind hier: Start > Artikel

Barrierefreie Lightboxes – Materialsammlung

Ergänzend zum Artikel über ›Barrierefreie Lightboxes‹ hier noch ein paar zusätzliche Gedanken, Anforderungen und weiterführende Links zum Thema.

Autor: tc

Tags: , , , , ,

Kontext & Anforderungen

Manchmal muss man Benutzern ein reduziertes Interface präsentieren, das den Fokus auf die wesentlichen Informationen oder auf Formularfelder setzt und die Interface-Elemente versteckt, die für die gerade zu erledigende Aufgabe unnötig sind. Wenn dies in Form eines Overlays (auch ›Lightbox‹ genannt) implementiert wird, erscheint der Inhalt als Pop-Up-Fenster oder als simulierter Dialog. Die Lightbox überlagert den Inhalt der Webseite, der Hintergrund wird typischerweise ausgegraut.

Eine Lightbox kann modal sein, d.h. der Benutzer kann nur mit der Lightbox und deren Inhalt interagieren. Oder sie kann nicht-modal sein, d.h. der Benutzer kann in diesem Fall sowohl mit der Lightbox und ihrem Inhalt, als auch mit anderen Elementen der ursprünglichen Seite interagieren.

Hürden & Schwierigkeiten

In Sachen Barrierefreiheit bringt die Benutzung von Lightboxes einige Probleme für verschiedene Gruppen von Menschen mit Behinderungen mit sich. Mögliche Schwierigkeiten sind unter anderem:

  • Die Möglichkeit, die Lightbox ohne die Hilfe einer Maus oder anderer Zeigewerkzeuge über eine Tastatur-Schnittstelle zu öffnen und zu schließen.
  • Die Benachrichtigung des Benutzers über die Generierung einer Lightbox bzw. das Einfügen des benötigten Codes in die Seite (dies schließt Benutzer von Vergrößerungssoftware ein, die möglicherweise das plötzliche Erscheinen einer Lightbox nicht bemerken, da dies außerhalb ihres Sichtfeldes passiert ist).
  • Der Zugriff per Tastatur auf die Lightbox selber (und auf deren Position im DOM-Tree in Relation zu dem auslösenden Element) und auf die Tab-Reihenfolge (und damit die Lesereihenfolge) zu jeglichen Formular-Elementen, Steuerelementen, Links usw., die in der Lightbox enthalten sind.
  • Die visuellen Grenzen der Lightbox für Benutzer mit eingeschränktem Sehvermögen oder blinde Benutzer verständlich zu machen und die Notwendigkeit, den Zugriff des Benutzers auf Inhalte innerhalb einer modalen Lightbox zu beschränken.
  • Die meisten Lightbox-Scripte setzen einen relativ großen Bildschirm voraus und scheitern bei mobilen Geräten (oder verkleinern nicht auf elegante Art und Weise).
  • Die meisten Lightbox-Skripte unterstützen das Drucken nicht.

Barrierefreie Lösungen

Eine Lightbox und ihr Inhalt kann durch die Benutzung einer Reihe von Techniken barrierefrei gemacht werden, wenn man Best Practices der Barrierefreiheit (wie zum Beispiel die Techniques der WCAG 2.0) einsetzt:

  • Beim Öffnen der Lightbox sollte der Tastatur-Fokus auf die Lightbox gesetzt werden (idealerweise auf das erste fokussierbare Element, bei dem es sich um einen Link, ein Formular-Label oder ähnliches handeln könnte).
  • Beim Schließen der Lightbox muss der Tastatur-Fokus wieder zu der exakt gleichen Stelle zurückkehren, bei der er war, als die Lightbox geöffnet wurde (normalerweise das anfänglich benutzte Element zum Öffnen des modalen Dialogs). Die ursprüngliche Tab-Reihenfolge sollte wiederhergestellt werden und der Benutzer sollte nicht länger in der Lage sein, sich per Tab zu Inhalten innerhalb des modalen Dialogs zu bewegen (d.h. die Lightbox sollte nicht einfach nur aus dem Viewport bewegt werden, sondern sollte ganz aus dem Dokumenten-Baum entfernt werden);
  • Das Lightbox-Script sollte die Bedienung per Tastatur vollständig unterstützen (z.B. Esc. zum Schließen der Lightbox, Pfeiltasten zum Blättern in einer Diaschau, Home- & End-Schaltflächen wie auf einer normalen Webseite). Es sollte ein deutlich sichtbarer Fokus-Indikator vorhanden sein und Tastaturbefehle sollten in der Lightbox dokumentiert sein (z.B. »Zum Schließen drücken Sie Esc«).
  • Das Lightbox-Script sollte einen vollständigen Browser-Verlauf bieten und die Änderung des title unterstützen (z.B. über jQuery Address).
  • Der Inhalt innerhalb der Lightbox muss voll skalierbar sein (z.B. mit unterschiedlichen Textgrößen).
  • Das Design der Lightbox sollte robust genug sein, damit es komplett wahrnehmbar ist, wenn benutzer-definierte Farben (z.B. ein Windows Kontrast-Schema) benutzt wird.
  • In modalen Dialogen sollte der Benutzer nicht zu irgendwelchen Elementen außerhalb der Lightbox navigieren können. Stattdessen muss der Tastatur-Fokus innerhalb der Lightbox verbleiben, bis der Benutzer diese absichtlich schließt, entweder indem er Esc drückt oder auf einen Schließen-Link oder eine Schließen-Schaltfläche klickt. Vor allem wenn Formulare in einer Lightbox präsentiert werden, sollte das Tabben über die Lightbox hinaus diese nicht schließen, um einen Datenverlust zu verhindern. Dies kann allerdings in anderen Fällen, wie zum Beispiel bei einer Galerie, genau das erwartete Verhalten sein.
  • Die Benutzung von ARIA-Rollen & -Eigenschaften (wie zum Beispiel aria-role="dialog"oder role="button" für das »Schließen«-Symbol), ARIA-Live-Regions und zusätzlichen ARIA-Attributen, die Beziehungen beschreiben, wie zum Beispiel aria-owns.

Anwendbare Standards & verwandte Techniken

Literatur zum Thema

Beispiele ›aus der freien Wildbahn‹

Code-Beispiele & Downloads