Barrierefreie jQuery Lightbox nach WAI ARIA und WCAG 2.0
- 23. November 2009 - jQuery, Accessibility
Im zweiten Teil meiner kleinen Reihe geht es um einen, mittlwerweile, alten Bekannten: die Lightbox. Ich stelle hier meine barrierefreie Variante auf Basis der jQueryUI Widget Factory vor, die im Rahmen meiner Diplomarbeit bei der Firma Namics entstand.
Achtung: Diese Anleitung bezieht sich auf die jQuery 1.3.x bzw. jQuery UI 1.8.x Variante meines Scripts. Im Gallerie-Modus sind jetzt geringfügige Änderungen nötig.
Features der Lightbox
Das Widget kann im Einzelbild-Modus oder auch als Galerie mit “Abblende”-Funktion genutzt werden und die die Position der Lightbox lässt sich fest in Pixelwerten, relativ zum Mauszeiger oder als mittig definieren. Richtig eingerichtet ist die gesamte Lightbox (auch das inline Pop-Up selbst) voll text-skalierbar und sehr einfach im injizierten HTML zu verändern (s.u.).
Auch hier stehen verschiedene Callback, pseudo-öffentliche Methoden zur Verfügung, um eigene Logik anzusteuern. Ich arbeite mit WAIARIA Eigenschaften und beachte die WCAG 2.0 – nutzt Firebug um diese zu sehen.
Es sind noch viele weitere Optionen verfügbar, wirf einen Blick auf die ganze Feature-Liste. Allgemeine Features meiner Widgets kannst du auch im ersten Blogpost lesen.
How To
Zuerst sollten, wie bereits im ersten Blogpost erwähnt, die nötigen Scripte eingebunden werden.
Das HTML kann prinzipiell beschaffen sein wie es will, solange ein Link das Bild umschließt und sich die Elemente mit einem jQuery Selector triggern lassen. Man nehme zum Beispiel...
Lightbox HTML
<ul>
<li>
<a class="seriesLightbox" href="dir/pics_1.jpg"><img src="dir/thumb/pics_1.jpg" alt="alt text" title="title text"/></a>
</li>
<li>
<a class="seriesLightbox" href="dir/pics_2.jpg"><img src="dir/thumb/pics_2.jpg" alt="alt text" title="title text" /></a>
</li>
<li>
<a class="seriesLightbox" href="dir/pics_3.jpg"><img src="dir/thumb/pics_3.jpg" alt="alt text" title="title text" /></a>
</li>
</ul>
...eine unsortierte Liste mit verlinkten Vorschaubildern.
Im Beispiel triggern wir eine bestimmte CSS Klasse und rufen diese als Galerie auf. Um eine Galerie an Bildern anzusteuern muss die Option imageArray als leeres Array definiert werden.
Lightbox JS
$(function() {
$(".seriesLightbox").ariaLightbox({
imageArray: [],
useDimmer: true,
background: "#000000",
zIndex: 1000,
background: "black",
opacity: 0.8,
});
});
Um einen der Unterschiede zu anderen Plugins hervorzuheben, möchte ich an dieser Stelle etwas des Code zeigen. Beim Abändern von bestehenden jQuery oder MooTools Lightbox-Plugins hat mich immer geärgert, dass ich mich in kaum lesbaren Code einarbeiten musste, an dem an dutzenden Stellen divs mal per JS erzeugt, mal als String hardgecoded wurden, um schließlich und schlußendlich einen komplexen HTML Aufbau raus zu rendern. Das wollte ich besser machen – Anpassungen sollten einfach von der Hand gehen.
Also steht der gesamte injizierte Teil beisammen (bereinigt um reine Darstellungseigenschaften und Elemente):
lightbox injected HTML
// build html
var html = "\n";
html += '<div id="ui-lightbox-wrapper" style="z-index:'+options.zIndex+1+';" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-dialog">'+"\n";
html += ' <span class="ui-dialog-title" id="ui-dialog-title-dialog">'+ options.titleText +'</span>'+"\n";
html += ' <a href="#nogo" id="ui-lightbox-close" title="'+ options.closeText +'" role="button">'+"\n";
html += ' <span>'+ options.closeText +'</span>'+"\n";
html += ' </a>'+"\n";
html += ' <div id="ui-lightbox-content">'+"\n";
html += ' <div id="ui-lightbox-image"><img src="" aria-describedby="ui-lightbox-description" /></div>'+"\n";
html += ' <p id="ui-lightbox-description"></p>'+"\n";
// show pager and rage description if its an array of images
if (options.imageArray) {
html += ' <p id="ui-lightbox-pager"></p>'+"\n";
html += ' <div id="ui-dialog-buttonpane">'+"\n";
html += ' <button id="ui-lightbox-next" type="button">nächtes Bild</button>'+"\n";
html += ' <button id="ui-lightbox-prevs" type="button">vorheriges Bild</button>'+"\n";
html += ' </div>'+"\n";
}
html += ' </div> '+"\n";
html += '</div>'+"\n";
Das ist jetzt nur ein kleines Beispiel – aber es soll zeigen das ihr in meinem Code keine kaum lesbaren, geschweige denn kaum verständliche Konstruktionen finden werdet, aber trotzdem performanten Code vor euch habt.
Demo und Download
Wie auch schon die Live Formular Validierung steht auch dieses jQuery UI Widget unter CC-BY-SALizenz und darf somit auch kommerziell verwendet werden.
Ich verbessere diese Applikationen laufend und freue mich deshalb sehr über Feedback in jeglicher Form:
Per Kommentar auf diesen Blogpost oder Email, Issues (Bugtracking) oder in der jQuery Accessibility Group.
Weitere jQuery Widgets aus meiner Diplomarbeit:
21. Februar 2012
I love this, after few hours i editing i get cool lightbox gallery
Thank you
21. Februar 2011
Hallo Jon,
tut mir leid das es solange gedauert hat, irgendwie ist dein Kommentar untergegangen.
Ich habe die Lightbox bereits mehrfach in verschiedenen Formen integriert. Meist in dem ich schlicht eine CSS Klasse per TypoScript Konfiguration vergeben habe und diese dann global anspreche.
Eine Intergration in den clickenlarge kann man so auch sehr einfach vornehmen.
Für Bildergallerien nutze ich meine Extension, die man recht flexibel für Bildergallerien und auch Slider nutzen kann:
typo3.org/extensions/repository/view/generic_gallery/current/
Ich hoffe das hilft dir weiter.
Grüße
Felix
01. Dezember 2010
Hallo Felix,
schaut gut aus Deine Lightbox und funktioniert auf gut mit der Tastatur!
Weisst Du ob schon jemand die Lightbox in TYPO3 integriert hat? Ich suche sowas für eine Website einer Behinderten Organisation.
Besten Dank & Freundliche Grüsse
Jon
15. April 2010
Sehr geehrter Herr Schmidt,
freut mich das Sie mein Plugin gelungen finden!
Leider kann ich den beschriebenen Fehler unter Win XP Pro SP3 + IE8.0.6001.18702 nicht nachvollziehen. Was genau geht denn nicht mehr? Gibts Fehlermeldungen?
Gibts irgendwo eine Demoseite? So kann ich da schwerlich mehr zu sagen. Doktype gesetzt? Richtige jQuery Version (Unterstützung von UI 1.8 erst seit gestern offiziell)?
Grüße
Felix
15. April 2010
Sehr geehrter Herr Nagel,
entweder bin ich zu dusselig, oder ich hab' ein Bug entdeckt:
De Lightbox ist ein wunderbares Plugin, - großes Kompliment,- aber
im IE8 krieg ich sie nicht zum Laufen.
Der IE7 und alle "Nicht-IE's gehen aber.
Grüße
W.Schmidt
27. März 2010
Moin,
die Lightbox funktioniert unter Opera 10.51 nicht.
Grüße,
Marco
12. Dezember 2009
Hey Maria,
ja hab ich auch schon bemerkt. Das ging aber mal und ich hab es schon im Bugtracker aufgenommen. Siehe hier:
github.com/fnagel/jQuery-Accessible-RIA/issues
Kümmer ich mich möglichst bald drum.
11. Dezember 2009
Sollte der Fokus nach dem Schließen der Lightbox nicht beim jeweiligen Thumnnail bleiben? Hab getestet im Firefox mit Tastatur und springe zum Seitenanfang.
24. November 2009
Nettes Gerät. Eh, bei der Galerie auf dem Button zum Vorwärtsblättern sollte "Näch*s*tes Bild" stehen (mit s) :-)
24. November 2009
Nein, hab ich noch nicht. Will ich aber noch machen.Du meinst gerade speziell das für die Tabs oder?
Bin mir nur noch nicht so sicher wohin genau. Ich denke hier wäre gut:
http://wiki.jqueryui.com/
Mhh nein, die kannte ich leider nicht. Zu Lightboxen gibts nicht so viele Referenzen, sollte mal man bei codeTalk eintragen (edit: done)! Interessant sind ein paar der Features wie zum Bsp das Deaktivieren bei zu kleinem screen. Das kommt in meine auch noch rein.
Naja, und das es
a) nativ in JS gecoded ist und
b) das es fast alles laden kann, meine Lightbox is ja eigentlich nur für Bilder bis dato
Was ich aber gar nicht verstehe ist das includen des iframes in jedes PopUp. Auch benutzt er außer tabindex keine weiteren ARIA oder WCAG Eigenschaften. Trotzdem muss ich mir das Teil nochmal in Ruhe anschauen, danke für den Tip.
Grüße Felix
24. November 2009
Oh, vergessen: kennst Du diese barrierefreie Lightbox schon? majx-js.digissime.net/js/popin/
24. November 2009
Hi Felix,
hast Du dieses verbesserte Widget schon als Bugfix oder Verbessserungsvorschlag an jQuery UI submitted? Damit würdest Du jQuery UI verbessern und das barrierefreie Widget einer maximal breiten Nutzergruppe zugänglich machen.
Cheers,
Martin