Slideshow e gallerie di immagini accessibili

Le migliori soluzioni JavaScript per realizzare gallerie di immagini accessibili, utilizzando i framework jQuery e Mootools.

Dall’uscita di Lightbox le soluzioni JavaScript per realizzare gallerie di immagini si sono moltiplicate: le scelte a disposizione sono innumerevoli, ma non è solo l’aspetto estetico quello che conta. Molto spesso gli script disponibili in rete sono fin troppo pesanti per il loro scopo, o non tengono presenti gli standard minimi per quanto riguarda l’accessibilità dei contenuti.

In questo articolo troverete una selezione di alcuni effetti che consentono di creare gallerie di immagini accessibili: non intrusivi, degradano nel modo giusto se JavaScript è disabilitato, e si appoggiano a framework già collaudati come jQuery e Mootools. Potrebbero essere migliorati ulteriormente, ma sono un’ottima base di partenza.

SmoothGallery

Soluzione basata sulla libreria Mootools, consente di creare slideshow di immagini mettendo a disposizione vari parametri come lo scorrimento automatico ed il tempo riservato ad ogni fotografia. E’ possibile anche avere più set di immagini nella stessa galleria: funzione comoda per risparmiare spazio nella pagina.

In assenza di JavaScript, le immagini appaiono comunque precedute da titolo e descrizione. Il difetto riguarda i controlli, non è infatti possibile scorrere le foto da tastiera.

Slideshow 2

Un buon set di effetti a disposizione anche per questo script basato sul framework Mootools, che può essere a sua volta esteso con altre funzionalità, come l’anteprima delle immagini con Lightbox.

Notevole la realizzazione degli esempi: disabilitando JavaScript le funzionalità restano le stesse, spariranno semplicemente le transizioni. Ottimi anche i controlli, non c’è alcun problema a spostarsi tra le immagini utilizzando anche la tastiera.

Galleria

Probabilmente il migliore tra quelli presentati, questo script si basa su jQuery e pesa solamente 4kb. Non è intrusivo, degrada senza problemi in assenza di JavaScript o con i CSS disabilitati e può essere personalizzato facilmente anche nell’aspetto. Le immagini sono organizzate in una lista nel codice HTML: una soluzione ottimale.

Notevole anche l’efficienza dello slideshow, perchè le foto vengono caricate e mostrate solo quando disponibili, evitando attese nel momento dell’interazione.

Se conoscete altre soluzioni accessibili per la creazione di gallerie di immagini segnalatele nei commenti, è sempre utile conoscere le migliori risorse in questo ambito. Potete trovare altri script nel mio precedente post dedicato a Lightbox ed ai suoi cloni: se comunque volete uno slideshow accessibile il mio consiglio è di partire dagli script appena illustrati.

Tommaso Baldovino

UX/UI Designer di Firenze, appassionato di tecnologia e accessibilità, esperto di WordPress, blogger, gamer e amante della fotografia.

5 commenti su “Slideshow e gallerie di immagini accessibili”

  1. Vi segnalo Highslide, che uso con soddisfazione da molto tempo.

    Sul sito ufficiale)trovate l’impressionante lista di feature, ma soprattutto l’altissima compatibilità e capacità di degradare in maniera efficace anche su browser non più moderni :)

  2. perdonami l’ignoranza ma nel campo del web design non sono una cima, cosa intendi per “degrada” se non è attivo il flag del javascript?

  3. @cirio: uno script è veramente accessibile quando consente di usufruire delle funzionalità di una pagina anche quando js è disabilitato, il mio “degrada” era riferito a questo. Nei casi citati è importante che tutte le immagini di uno slideshow siano comunque visibili, indipendentemente dalle tecnologie a disposizione.

    Gli effetti grafici servono a migliorare l’estetica di una pagina, ma non devono essere un ostacolo :)