Sei qui: Homepage » accessibilità, javascript, web design » Slideshow e gallerie di immagini accessibili
dic 01 2008
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.
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.
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.
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.
Hai trovato interessante questo post? Puoi leggere anche i seguenti articoli:
Classificato in accessibilità, javascript, web design. Puoi fare un trackback dal tuo sito.
TomStardust Diary - Il blog personale di Tommaso Baldovino
TomStardust.com è realizzato secondo i canoni dell'accessibilità, le normative del W3C, e la legge Stanca, pur non essendo il sito di una pubblica amministrazione e non avendo nessun obbligo a riguardo.
Poter navigare su internet ed accedere alle informazioni sulla rete è un diritto di tutti, realizzare siti che rispondano agli standard web dovrebbe essere un dovere di ogni sviluppatore.
Questo sito e tutti i suoi contenuti, compresi i temi Wordpress, sono pubblicati sotto licenza Creative Commons 2.5.
Questo sito non rappresenta una testata giornalistica e viene aggiornato senza alcuna periodicità.
Powered by Wordpress
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 :)
perdonami l’ignoranza ma nel campo del web design non sono una cima, cosa intendi per “degrada” se non è attivo il flag del javascript?
@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 :)