Lightbox: veel gebruikt, zelden voor iedereen bruikbaar

Gijs Veyfeyken op 09/11/2010 - 4 reacties

Update 27 mei 2015: er is een meer recente blogpost over de toegankelijkheid van dialoogvensters.

Wat is een lightbox?

Een Lightbox is een user interface concept dat gebruikers toelaat om afbeeldingen te vergroten in een soort venster of pop-up zonder de pagina te verlaten. Het is meestal gebaseerd op JavaScript maar bestaat ook in HTML/CSS.

screenshot jQuery Lightbox

Fotogalerijen verschijnen steeds vaker in zulke Lightboxes, maar ook video en Flash wordt zo aan de man gebracht. De rest van de pagina wordt tegelijkertijd gedimd om het vergrote element te benadrukken. Er bestaan heel wat varianten, een mooi overzicht vind je in The Lightbox Clones Matrix.

Wat is het probleem?

  • onaangekondigde pagina-wijziging
  • gebrekkige toetsenbordtoegankelijkheid
  • verwarrende lees - en tabvolgorde

Zoals met alle JavaScript functionaliteiten hoeft er geen probleem te zijn maar is het er meestal wel. Wanneer JavaScript gebruikt wordt om browsergedrag na te bootsen, in dit geval het openen van een nieuw venster of pop-up, denken de meeste ontwikkelaars enkel vanuit het visuele standpunt.

Onaangekondigde pagina-wijziging

Wanneer we op een link klikken, ook wanneer dat een afbeelding is, verwachten we dat we naar een nieuwe pagina gebracht worden die ons daar meer over verteld. We verwachten niet dat dit element uitvergroot wordt terwijl de rest van de pagina bijna onleesbaar wordt gemaakt.

Een blinde gebruiker die met een screenreader surft, heeft niet in de gaten dat er iets gebeurt en komt een link tegen die blijkbaar niet werkt. Kondig onverwacht gedrag daarom altijd aan. Voor een screenreadergebruiker is dit essentieel, voor uw andere bezoekers is het een vorm van beleefdheid.

Alt="toon vergrote weergave in een fotogalerij" lijkt me voldoende als alternatieve beschrijving. "Klik om te vergroten" als bijschrift? Hangt natuurlijk van de context af en waarvoor het wordt gebruikt.

Gebrekkige toetsenbordtoegankelijkheid

Je moet de Lightbox niet enkel met het toetsenbord kunnen openen, maar ook kunnen sluiten. De escape-toets mag hier ook aan toegewezen worden, op voorwaarde dat je dit aan de bezoeker laat weten.

Als er knoppen zijn om binnen de Lightbox tussen meerdere foto's of andere elementen te navigeren dan moeten die ook met het toetsenbord bedienbaar zijn. 'Vorige en volgende afbeelding' is kristalhelder als link tekst. De pijltjestoetsen worden vaak aan deze acties gekoppeld. Op zich geen slecht idee zolang je dat communiceert naar de gebruiker. Helaas worden de horizontale pijltjestoetsen (links en rechts) al door sommige screenreaders gebruikt om het element dat de virtuele focus heeft, te spellen. Met de verticale pijltjetoetesen (naar boven en naar onder) wordt het vorige,volgende element voorgelezen. Het is theoretisch mogelijk om dit te omzeilen maar de gemiddelde screenreadergebruiker is hier niet van op de hoogte.

Tijdens mijn zoektocht ben ik heel wat varianten tegengekomen. Omdat de ontwikkelaar bepaalt hoe de bediening werkt, is er geen standaard. Sommige tonen knoppen (pre/next) wanneer je met de muis over de linker - of rechterhelft zweeft. Andere moet je sluiten door buiten de box te klikken. Nog andere werken met de pijltjestoetsen en hebben een sluitknop (x). Welke variant je ook kiest: zorg dat het duidelijk is voor de gebruiker hoe de bediening werkt.

Vergeet zeker geen focus-state te definiëren. Dit geldt trouwens voor de hele website. Als je over de pagina 'tabt' maar niet kan zien welk element de focus heeft, wordt de site onbruikbaar met het toetsenbord. Eén regel CSS kan dit oplossen. Bijvoorbeeld:

a:focus {outline: 1px solid red;} 

Verwarrende lees - en tabvolgorde

Een Lightbox is een div-element onderaan in de broncode die met CSS is verborgen en bij activatie zichtbaar wordt gemaakt. Hierdoor heeft de broncode geen logische volgorde. Problematisch, aangezien screenreaders de broncode volgen om de leesvolgorde te bepalen. Dit wordt duidelijk wanneer je een Lightbox opent en met de tabtoets verder over de pagina navigeert. Je zal eerst over de volledige pagina-inhoud moeten tabben, die zich visueel achter de lightbox bevindt. Pas helemaal op het einde van de pagina komt de focus in het div-element van de Lightbox terecht.

Om de lees - en tabvolgorde logisch en begrijpelijk te houden, zorg je ervoor dat na het openen, de focus op het eerste element in de Lightbox komt te liggen. Bij het sluiten, wordt de focus terug op het element gelegd waar je vandaan komt.

Dit is een zeldzaam voorbeeld waar een 'keyboard-trap' wel wenselijk is. De gebruiker zou niet buiten de Lightbox mogen kunnen tabben. De box moet eerst gesloten worden, zoals een klassieke JavaScript pop-up, vooraleer men verder kan. Op die manier is er geen verwarring mogelijk.

In de praktijk

Tot nu toe heb ik nog geen implementatie van het Lightbox-principe gevonden die aan alle toegankelijkheidsvereisten voldoet zoals hierboven beschreven. Moest je er ééntje kennen, laat het me zeker weten. Ik kan er hier wel één aanbevelen die zeer dicht in de buurt komt. De jQuery-Accessible-RIA Lightbox van Felix Nagels. Ik heb de demoversie niet in alle mogelijke combinaties van browser, screenreader en besturingssystemen getest. Maar wat de combinatie Windows XP, Internet Explorer 8 en Jaws 9 betreft, zit het goed. Het enige minpunt is dat je buiten de Lightbox kan tabben.

Reacties

Edwin Waelbers schreef 8 jaar geleden

“Klik om te vergroten” als link is niet zo goed voor de usability "Vergroot Afbeelding" is beter.

Doch dit is maar een detail.

De functionaliteit die de meeste websites aanbieden voor het vergroten van afbeeldingen is niet alleen een probleem voor blinden maar geeft dikwijls ook problemen bij alle andere mensen.

De volgende zaken zie ik veel in testen met gebruikers:

* De pop-up verstoort de flow.

* Het scherm verlaten moet dikwijls gebeuren via een Engelstalige "Close" (niet iedereen praat Engels).

* Sommige mensen veronderstellen dat ze via die 'Close' de volledige website verlaten en dan maar even wachten.

* ...

Een oplossing die goed werkt voor blinden en slechtzienden, zou misschien ook wel eens een goede oplossing kunnen zijn voor iedereen.

Gijs Veyfeyken schreef 8 jaar geleden

De jQuery-Accessible-RIA Lightbox die ik hierboven vermeld, maakt gebruik van role="application" en role="dialog". Hierdoor gaan recente versies van screenreaders met ondersteuning voor ARIA (Accessible Rich Internet Applications), in "applicatiemodus". Goed bedoeld maar in de praktijk vreselijk verwarrend.

Om een lang verhaal kort te maken. Haal die specifieke "roles" uit de code.

Hier is het lange verhaal:

http://terrillthompson.blogspot.com/2009/11/musings-on-aria-roleapplication.html

Gijs Veyfeyken schreef 7 jaar geleden

Een toegankelijk live voorbeeld van de jQuery lightbox van Felix Nagels:

http://www.ms-vlaanderen.be/ms-liga/verslagen-en-fotos

Met dank aan Netlash voor het finetunen.

Zowika schreef 6 jaar geleden

Ik ben het er niet helemaal mee eens, naar mijn mening vinden de bezoekers het tegenwoordig juist fijn als een (bijvoorbeeld) plaatje vergroot wordt i.p.v. dat een nieuwe pagina moet laden. Men gaat ook mee met de tijd en aangezien Lightboxes erg veel gebruikt worden verwacht ik ook dat grotendeels hier al mee bekend is. Vooralsnog bedankt voor de tips! Ik ontdek deze website nu voor het eerst en ik hou jullie in de gaten.

Reageer

De volgende HTML tags zijn toegestaan: <a> <b> <ul> <li>