Come realizzare gallerie fotografiche e lightbox accessibili
L’uso di gallerie fotografiche per mostrare delle immagini si sta diffondendo molto nei siti web. Si possono trovare in particolare per presentare un prodotto o anche solo per condividere le foto di un evento. Sono molto utilizzate anche dalle Pubbliche Amministrazioni, ad esempio nella sezione news nel caso di eventi, convegni, interviste e via dicendo.
In genere viene richiesto anche di poter ingrandire (zoomare) le immagini, questa funzionalità è spesso nota come “lightbox”, cioè un contenitore che mostra l’immagine cliccata in una dimensione più grande.
Tra gli esempi del WAI al momento non troviamo gallerie o lightbox, abbiamo solo alcune spiegazioni generali sulle immagini e sui gruppi di immagini.
Sicuramente utile da sapere è quello che riguarda le immagini responsive, almeno sull’uso dei tag HTML corretti:
Utilizziamo il <figure> come contenitore di un’immagine. Possiamo anche associargli gli attributi role=”group” e aria-labelledby, a seconda delle necessità
All’interno del <figure> possiamo usare il <figcaption> se l’immagine ha una didascalia
Usiamo il <picture> per includere diversi formati della stessa immagine, in genere questo è il metodo consigliato per le immagini responsive, perché possiamo inserire più tag <source>, lasciando al browser la scelta di quale versione utilizzare
Il tag <source>, inserito generalmente nel tag <picture> o <video>, viene usato per indicare più sorgenti disponibili per un file multimediale, come una immagine, un video o un file audio. Viene collegato agli attributi media e srcset proprio a questo scòpo
Il tag <img> può essere usato in modo simile, così da indicare al browser quale versione utilizzare attraverso l’uso degli attributi srcset e sizes
Codice HTML di esempio
Detto questo, possiamo usare queste informazioni per creare una galleria di immagini o un lightbox. Vediamo un esempio di codice HTML, realizzato con WordPress, Bootstrap Italia e Tobii:
Il plugin Javascript utilizzato in questo caso per la realizzazione del lightbox è Tobii, molto funzionale e dichiarato accessibile dagli autori.
Analisi del codice
Qui possiamo notare alcuni elementi interessanti:
L’insieme di immagini è costituito da un semplice tag <ul> con i relativi <li>
Le immagini sono racchiuse in dei link con tag <a> e classi CSS lightbox tobii-zoom, che vengono utilizzate da Tobii per generare l’HTML del Lightbox. L’attributo href del link punta all’immagine in dimensione più grande
I tag <img> sono creati da WordPress tramite la funzione wp_get_attachment_image, che si occupa di generare il codice HTML necessario con tanto di attributi decoding, loading, sizes, srcset e alt. La funzione viene richiamata in questo modo in PHP:
Nel nostro esempio abbiamo usato un plugin esterno che si occupa di generare il lightbox, cioè la funzionalità che permette di ingrandire le immagini come possiamo vedere nella demo:
Dimostrazione del lightbox realizzato con plugin TobiiIngrandimento di una immagine tramite Lightbox Tobii
Potremmo anche realizzare un HTML personalizzato, l’importante in questo caso è inserire alcuni elementi fondamentali, in modo simile ad un carosello di immagini:
I pulsanti “precedente” e “successivo” che possono essere dei <button> con aria-label ed eventuale aria-hidden
Il pulsante di chiusura del lightbox, anch’esso un <button> con aria-label
L’immagine, inserita come <img> all’interno di un tag <figure> che potrebbe anche contenere un <picture> con i relativi <source> come abbiamo visto prima. Se inseriamo la didascalia, usiamo <figcaption> dentro al <figure>. Ricordiamoci di impostare l’attributo “alt” all’immagine, anche se vuoto
