Barrierefreie jQuery Lightbox nach WAI ARIA und WCAG 2.0

Avatar of Felix Nagel Felix Nagel - 23. November 2009 - jQuery, Accessibility, Open Source, Studium

Features-jquery-aria

© jQuey Logo: The jQuery Project

Im zweiten Teil meiner kleinen Reihe geht es um einen, mittlwerweile, alten Bekannten: die Lightbox. Ich stelle hier meine barrierefreie Variante auf Basis der jQuery UI 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 WAI ARIA 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

Lightbox Demo

 

Download @ GitHub

 

Wiki @ GitHub

  

 

Wie auch schon die Live Formular Validierung steht auch dieses jQuery UI Widget unter CC-BY-SA Lizenz 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:

  • Barrierefreie Live Validierung von Formularen mit jQuery
  • jQuery UI Tabs barrierefrei erweitern
  • Sortierbare, barrierefreie Tabellen mit jQuery

Die Kommentarfunktion ist für diesen Artikel deaktiviert.

12 Kommentare

Wiyono

21. Februar 2012

Nice

I love this, after few hours i editing i get cool lightbox gallery

Thank you


Felix Nagel

21. Februar 2011

TYPO3 Integration

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

 


Jon Piguet

01. Dezember 2010

Lightbox in TYPO3 integriert?

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


Felix Nagel

15. April 2010

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

 


Werner Schmidt

15. April 2010

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


Marco

27. März 2010

Opera

Moin,

die Lightbox funktioniert unter Opera 10.51 nicht.

Grüße,

Marco


Felix Nagel

12. Dezember 2009

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.


maria

11. Dezember 2009

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.


Rude

24. November 2009

Buchtabenn

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


Felix Nagel

24. November 2009

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


Martin Kliehm

24. November 2009

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


Martin Kliehm

24. November 2009

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