Dynamische Inhalte
Barrierefreie Lightboxen?

15.09.2010

Die Lightbox wird immer häufiger auf Websites eingesetzt. Kaum ein neueres Angebot scheint ohne sie auszukommen. Wo früher ein neues Fenster oder ein Systemdialog geöffnet wurde, taucht heute vor abgedunkeltem Seitenhintergrund die Lightbox auf. Doch lässt sie sich auch barrierefrei umsetzen?

Technisch gesehen ist die Lightbox nichts als ein Container wie div, der mittels JavaScript dynamisch auf die Seite geschrieben wird und oft ein Bild enthält, zum Beispiel die vergrößerte Ansicht eines Fotos bei Bilderalben. Immer häufiger werden Lightboxen aber auch für komplexere Inhalte eingesetzt, für die früher eigene Seiten verwendet wurden, etwa für Login-Prozesse oder für ganze HTML-Seiten, die über einen iframe eingebunden werden.

Häufig beeinträchtigt der Einsatz von Lightboxen die Barrierefreiheit. Es gibt inzwischen sehr viele Lightbox-Umsetzungen und Varianten, die sich mit Hilfe von JavaScript Libraries leicht einbinden lassen; viele davon sind aber mangelhaft, zum Beispiel nicht tastaturnutzbar.

Probleme beim Einsatz von Lightboxen

Eine Reihe von Problemen treten häufig beim Einsatz von Lightboxen auf:

• Es gibt kein Standard-Verhalten für die Tastaturnutzung von Lightboxen – mache Umsetzungen reagieren auf Tastaturkürzel, andere nicht. Was geht, müssen Tastaturnutzer in jedem Fall erst mal ausprobieren.
• Für Nutzer von Vergrößerungssoftware kann das Auftauchen von Lightboxen unerwartet, störend oder desorientierend sein.
• Bei Screenreader-Nutzung werden Lightbox-Inhalte oft nicht vorgelesen, wenn sie nicht durch Scripting explizit den Fokus erhalten.
• Die Zurück-Taste des Browsers greift nicht, denn sie bezieht sich nicht auf den Lightbox-Inhalt; wer sie dennoch nutzt, landet unbeabsichtigt auf der vorherigen Seite.
• Bei Tastaturnutzung wandert der Fokus oft versehentlich weiter in den Hintergrund der Lightbox, ist dort nicht mehr sichtbar und muss zum Schließen der Lightbox wieder zurückbewegt werden (oder vorwärts, einmal ganz durch die verdunkelte Seite).
• Oft ist nach dem Schließen der Lightbox der alte Seitenfokus verloren und muss erneut angesteuert werden.
• Bei Nutzung kleiner Browserfenstergrößen oder Displays (oder bei deaktiviertem JavaScript) wird oft das vergrößerte Bild statt in der Lightbox als nackte Datei im Browserfenster angezeigt – also auch ohne Alternativtext.
• Lightbox-Inhalte werden oft durch Scripts am Seitenende angehängt, sind also ohne Quelltext- Zusammenhang mit dem Kontext, der sie auslöste. In der Ansicht ohne Stylesheets oder mit eigenen Stylesheets ist die Reihenfolge unverständlich.
• Bei Nutzung von Lightboxen in der Ansicht ohne Stylesheets, aber mit aktiviertem JavaScript, kann es dazu kommen, dass Bilder dunkel verschattet bzw. transparent überlagert, also nicht nutzbar, am Seitenende angezeigt werden.

Lightboxen dennoch benutzen?

Trotz der genannten Probleme muss nicht grundsätzlich vom Einsatz einer Lightbox abgeraten werden, wenn deren Umsetzung (so weit wie möglich) barrierefrei ist. Grundsätzlich sollte geprüft werden, ob man nicht auch ohne Lightboxen auskommen kann, um die nicht behebbaren Probleme ihres Einsatzes zu vermeiden. Wer sie dennoch braucht (zum Beispiel weil der Kunde sie eben haben will), sollte ein paar Empfehlungen berücksichtigen.

Empfehlungen zur Umsetzung

• Lightbox-Inhalte sollten bei abgeschaltetem JavaScript auf einer extra Seite, die Teil des Webangebots ist, angeboten werden; die übliche Anzeige in einem "nackten" Browserfenster (z.B. bei Bildergalerien) bietet keine Seitennavigation und keinen Alternativtext. Wenn, wie schon jetzt nach den WCAG 2.0 und künftig auch nach der BITV 2.0, die Abhängigkeit von JavaScript nicht mehr als generell unzugänglich angesehen wird, würde dieser Punkt entfallen. Dennoch macht es Sinn, wenn nach dem Grundsatz der graceful degradation die Anzeige von Lightbox-Inhalten auch zukünftig ohne JavaScript funktioniert.
• Jede Lightbox muss einen tastaturbedienbaren "Schließen"-Link haben, auch weitere Lightbox-Links müssen natürlich tastaturnutzbar sein. Der Fokus soll beim Öffnen der Lightbox auf den Beginn des Lightbox-Inhaltes gesetzt werden. Beim Schließen der Lightbox sollte der vorherige Seiten-Fokus wiederhergestellt werden.
• Wichtig ist eine nachvollziehbare, intuitive Reihenfolge bei der Tastaturbedienung. Dazu gehört vor allem auch, dass sich die Lightbox leicht wieder schließen lässt. Hierfür gibt es grundsätzlich zwei Ansätze:
  1. wenn der Benutzer auf dem letzten Link in der Lightbox weiter tabbt, schließt sich die Box von allein und der Fokus landet wieder an der ursprünglichen Stelle, oder
  2. solange die Lightbox geöffnet ist, wandert der Fokus kreisförmig nur noch innerhalb der in der Box enthaltenen Links – solange bis der Benutzer aktiv die Box schließt (durch Aktivieren des Schließen-Links oder Drücken der Escape-Taste)
• Alle Lightbox-Bedienelemente sollten eine gute Fokushervorhebung haben.
• Es ist wünschenswert, wenn zusätzlich die Escape-Taste die Lightbox schließt, und dieser Tastaturbefehl in der Lightbox selbst dokumentiert ist.

Weitere Infos

Hinweis: Einige der genannten Artikel verweisen auf schlecht zugängliche oder verbesserungsbedürftige Umsetzungs-Beispiele.

• Roger Johansson, 456 Berea St: Lightboxes and keyboard accessibility (2009)
• Josh Habdas, habdas.org: Building a better lightbox (2009)
• Felix Nagel: Barrierefreie jQuery Lightbox nach WAI-ARIA und WCAG 2.0 (2009)
• Majx: popin, a customizable and accessible modal box interface