TomStardust Diary - Il blog personale di Tommaso Baldovino
feed
classifica commentatori
categorie
archivio
risorse esterne
extra
dic 01
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.
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 :)
[...] Grazie a Tommaso: [...]
perdonami l’ignoranza ma nel campo del web design non sono una cima, cosa intendi per “degrada” se non è attivo il flag del javascript?
[...] Slideshow e gallerie di immagini accessibili Dall’uscita di Lightbox le soluzioni JavaScript per realizzare gallerie di immagini si sono [...]
@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 :)