Accessibility   jQuery   Open Source   Studium
23.11.200922:45

Barrierefreie jQuery Lightbox nach WAI ARIA und WCAG 2.0

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.


$(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):


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

Lightbox Demo

 

Download @ GitHub

 

Wiki @ GitHub

 

 

 

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:

Felix NagelGravatar: Felix Nagel
PermalinkTrackbackShare

Kommentar schreiben

Felder mit * sind Pflichtfelder

9 Kommentare

#
24.11.200917:57

Re-submit zu jQuery UI?

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

Martin KliehmGravatar: Martin Kliehm
http://learningtheworld.eu
#
24.11.200918:00

Oh, vergessen: kennst Du diese barrierefreie Lightbox schon? majx-js.digissime.net/js/popin/

Martin KliehmGravatar: Martin Kliehm
http://learningtheworld.eu
#
24.11.200919:58

Stimmt, das hatte ich vergessen

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

Felix NagelGravatar: Felix Nagel
http://www.felixnagel.com
#
27.03.201023:26

Opera

Moin,

die Lightbox funktioniert unter Opera 10.51 nicht.

Grüße,

Marco

MarcoGravatar: Marco
http://www.marcokrings.de
#
24.11.200923:33

Buchtabenn

Nettes Gerät. Eh, bei der Galerie auf dem Button zum Vorwärtsblättern sollte "Näch*s*tes Bild" stehen (mit s) :-)

RudeGravatar: Rude
http://www.ravn.de
#
11.12.200909:27

Fokus nach dem Schließen

Sollte der Fokus nach dem Schließen der Lightbox nicht beim jeweiligen Thumnnail bleiben? Hab getestet im Firefox mit Tastatur und springe zum Seitenanfang.

mariaGravatar: maria
#
12.12.200920:08

Siehe Bugtracker

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.

Felix NagelGravatar: Felix Nagel
http://www.felixnagel.com
#
15.04.201014:13

AriaLightbox

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

Werner SchmidtGravatar: Werner Schmidt
#
15.04.201015:29

Funkioniert unter Win XP Pro SP3 + IE8.0.6001.18702

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

 

Felix NagelGravatar: Felix Nagel
http://www.felixnagel.com