{"id":196,"date":"2024-08-13T15:30:19","date_gmt":"2024-08-13T15:30:19","guid":{"rendered":"https:\/\/www.accessibilita.digital\/?p=196"},"modified":"2024-08-21T13:06:38","modified_gmt":"2024-08-21T13:06:38","slug":"come-realizzare-gallerie-fotografiche-e-lightbox-accessibili","status":"publish","type":"post","link":"https:\/\/www.accessibilita.digital\/come-realizzare-gallerie-fotografiche-e-lightbox-accessibili\/","title":{"rendered":"Come realizzare gallerie fotografiche e lightbox accessibili"},"content":{"rendered":"<p>L\u2019uso di gallerie fotografiche per <b>mostrare delle immagini<\/b> si sta diffondendo molto nei siti web. Si possono trovare in particolare per <b>presentare un prodotto<\/b> o anche solo per <b>condividere le foto di un evento<\/b>. Sono molto utilizzate anche dalle <b>Pubbliche Amministrazioni<\/b>, ad esempio nella sezione news nel caso di eventi, convegni, interviste e via dicendo.<\/p>\n<p>In genere viene richiesto anche di poter <b>ingrandire<\/b> (zoomare) le immagini, questa funzionalit\u00e0 \u00e8 spesso nota come \u201clightbox\u201d, cio\u00e8 un <b>contenitore<\/b> che mostra l\u2019immagine cliccata in una dimensione pi\u00f9 grande.<\/p>\n<p>Tra gli esempi del WAI al momento non troviamo gallerie o lightbox, abbiamo solo alcune spiegazioni generali sulle immagini e sui <a href=\"https:\/\/www.w3.org\/WAI\/tutorials\/images\/groups\/\" rel=\"nofollow noopener\">gruppi di immagini<\/a>.<\/p>\n\n<h2>Cosa sapere per l&#8217;accessibilit\u00e0<\/h2>\n<p>Sicuramente utile da sapere \u00e8 quello che riguarda le <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/HTML\/Multimedia_and_embedding\/Responsive_images\" rel=\"nofollow noopener\">immagini responsive<\/a>, almeno sull\u2019uso dei tag HTML corretti:<\/p>\n<ul>\n<li>Utilizziamo il <b>&lt;<\/b><b>figure&gt;<\/b> come contenitore di un\u2019immagine. Possiamo anche associargli gli attributi role=\u201dgroup\u201d e aria-labelledby, a seconda delle necessit\u00e0<\/li>\n<li>All\u2019interno del &lt;figure&gt; possiamo usare il <b>&lt;figcaption&gt;<\/b> se l\u2019immagine ha una didascalia<\/li>\n<li>Usiamo il <b>&lt;<\/b><b>picture&gt;<\/b> per includere <b>diversi formati della stessa immagine<\/b>, in genere questo \u00e8 il metodo consigliato per le immagini responsive, perch\u00e9 possiamo inserire pi\u00f9 tag <b>&lt;source&gt;<\/b>, lasciando al browser la scelta di quale versione utilizzare<\/li>\n<li>Il tag <b>&lt;source&gt;<\/b>, inserito generalmente nel tag &lt;picture&gt; o &lt;video&gt;, viene usato per <b>indicare pi<\/b><b>\u00f9 sorgenti<\/b> disponibili per un file multimediale, come una immagine, un video o un file audio. Viene collegato agli attributi <b>media<\/b> e <b>srcset<\/b> proprio a questo sc\u00f2po<\/li>\n<li>Il tag &lt;img&gt; pu\u00f2 essere usato in modo simile, cos\u00ec da indicare al browser quale versione utilizzare attraverso l\u2019uso degli attributi <b>srcset<\/b> e <b>sizes<\/b><\/li>\n<\/ul>\n<h2>Codice HTML di esempio<\/h2>\n<p>Detto questo, possiamo usare queste informazioni per creare una <b>galleria di immagini<\/b> o un <b>lightbox<\/b>. Vediamo un esempio di codice HTML, realizzato con WordPress, Bootstrap Italia e <a href=\"https:\/\/midzer.github.io\/tobii\/\" rel=\"nofollow noopener\">Tobii<\/a>:<\/p>\n<pre class=\"language-markup\"><code>&lt;div class=\"content-section post-gallery\"&gt;\r\n    &lt;h2 class=\"h6\"&gt;Galleria fotografica&lt;\/h2&gt;\r\n    &lt;ul&gt;\r\n        &lt;li&gt;\r\n            &lt;a href=\"\/app\/uploads\/2024\/04\/Acme_TTG_13_10_23_01.png\" class=\"lightbox tobii-zoom\" data-group=\"article\"&gt;&lt;img width=\"900\" height=\"500\" src=\"\/app\/uploads\/2024\/04\/Acme_TTG_13_10_23_01.png\" class=\"attachment-full size-full\" alt=\"\" loading=\"lazy\" decoding=\"async\" srcset=\"\/app\/uploads\/2024\/04\/Acme_TTG_13_10_23_01.png 900w, \/app\/uploads\/2024\/04\/Acme_TTG_13_10_23_01-300x167.png 300w, \/app\/uploads\/2024\/04\/Acme_TTG_13_10_23_01-768x427.png 768w, \/app\/uploads\/2024\/04\/Acme_TTG_13_10_23_01-450x250.png 450w\" sizes=\"(max-width: 900px) 100vw, 900px\"&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n        &lt;li&gt;\r\n            &lt;a href=\"\/app\/uploads\/2024\/04\/Acme_TTG_13_10_23_02.png\" class=\"lightbox tobii-zoom\" data-group=\"article\"&gt;&lt;img width=\"510\" height=\"450\" src=\"\/app\/uploads\/2024\/04\/Acme_TTG_13_10_23_02.png\" class=\"attachment-full size-full\" alt=\"\" loading=\"lazy\" decoding=\"async\" srcset=\"\/app\/uploads\/2024\/04\/Acme_TTG_13_10_23_02.png 510w, \/app\/uploads\/2024\/04\/Acme_TTG_13_10_23_02-300x265.png 300w, \/app\/uploads\/2024\/04\/Acme_TTG_13_10_23_02-283x250.png 283w\" sizes=\"(max-width: 510px) 100vw, 510px\"&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n        &lt;li&gt;\r\n            &lt;a href=\"\/app\/uploads\/2024\/04\/Acme_TTG_13_10_23_03.png\" class=\"lightbox tobii-zoom\" data-group=\"article\"&gt;&lt;img width=\"510\" height=\"450\" src=\"\/app\/uploads\/2024\/04\/Acme_TTG_13_10_23_03.png\" class=\"attachment-full size-full\" alt=\"\" loading=\"lazy\" decoding=\"async\" srcset=\"\/app\/uploads\/2024\/04\/Acme_TTG_13_10_23_03.png 510w, \/app\/uploads\/2024\/04\/Acme_TTG_13_10_23_03-300x265.png 300w, \/app\/uploads\/2024\/04\/Acme_TTG_13_10_23_03-283x250.png 283w\" sizes=\"(max-width: 510px) 100vw, 510px\"&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n    &lt;\/ul&gt;\r\n&lt;\/div&gt;<\/code><\/pre>\n<p>Il <b>plugin<\/b><b> Javascript<\/b> utilizzato in questo caso per la realizzazione del lightbox \u00e8 <a href=\"https:\/\/midzer.github.io\/tobii\/\" rel=\"nofollow noopener\">Tobii<\/a>, molto funzionale e dichiarato accessibile dagli autori.<\/p>\n<h2>Analisi del codice<\/h2>\n<p>Qui possiamo notare alcuni elementi interessanti:<\/p>\n<ul>\n<li>L\u2019insieme di immagini \u00e8 costituito da un semplice tag <b>&lt;<\/b><b>ul&gt;<\/b> con i relativi <b>&lt;<\/b><b>li&gt;<\/b><\/li>\n<li>Le immagini sono racchiuse in dei link con tag <b>&lt;a&gt;<\/b> e classi CSS <b>lightbox tobii-zoom<\/b>, che vengono utilizzate da Tobii per generare l\u2019HTML del Lightbox. L\u2019attributo <b>href<\/b> del link punta all\u2019immagine in dimensione pi\u00f9 grande<\/li>\n<li>I tag &lt;img&gt; sono creati da WordPress tramite la funzione <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_get_attachment_image\/\" rel=\"nofollow noopener\">wp_get_attachment_image<\/a>, che si occupa di generare il codice HTML necessario con tanto di attributi <b>decoding<\/b>, <b>loading<\/b>, <b>sizes<\/b>, <b>srcset<\/b> e <b>alt<\/b>. La funzione viene richiamata in questo modo in PHP:\n<pre class=\"language-php\"><code>wp_get_attachment_image($image['ID'], 'full', false, ['loading' =&gt; 'lazy']);\u200b<\/code><\/pre>\n<\/li>\n<\/ul>\n<h2>Considerazioni tecniche<\/h2>\n<p>Nel nostro esempio abbiamo usato un plugin esterno che si occupa di <b>generare il lightbox<\/b>, cio\u00e8 la funzionalit\u00e0 che permette di <b>ingrandire le immagini<\/b> come possiamo vedere nella <a href=\"https:\/\/midzer.github.io\/tobii\/demo\/\" rel=\"nofollow noopener\">demo<\/a>:<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-197 size-full\" src=\"https:\/\/www.accessibilita.digital\/app\/uploads\/2024\/08\/Figura-6-Lightbox.png\" alt=\"\" width=\"855\" height=\"492\" srcset=\"https:\/\/www.accessibilita.digital\/app\/uploads\/2024\/08\/Figura-6-Lightbox.png 855w, https:\/\/www.accessibilita.digital\/app\/uploads\/2024\/08\/Figura-6-Lightbox-300x173.png 300w, https:\/\/www.accessibilita.digital\/app\/uploads\/2024\/08\/Figura-6-Lightbox-768x442.png 768w, https:\/\/www.accessibilita.digital\/app\/uploads\/2024\/08\/Figura-6-Lightbox-434x250.png 434w\" sizes=\"(max-width: 855px) 100vw, 855px\" \/><figcaption>Dimostrazione del lightbox realizzato con plugin Tobii<\/figcaption><\/figure>\n<figure><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-198 size-full aligncenter\" src=\"https:\/\/www.accessibilita.digital\/app\/uploads\/2024\/08\/Figura-7-Originale.png\" alt=\"\" width=\"788\" height=\"695\" srcset=\"https:\/\/www.accessibilita.digital\/app\/uploads\/2024\/08\/Figura-7-Originale.png 788w, https:\/\/www.accessibilita.digital\/app\/uploads\/2024\/08\/Figura-7-Originale-300x265.png 300w, https:\/\/www.accessibilita.digital\/app\/uploads\/2024\/08\/Figura-7-Originale-768x677.png 768w, https:\/\/www.accessibilita.digital\/app\/uploads\/2024\/08\/Figura-7-Originale-283x250.png 283w\" sizes=\"(max-width: 788px) 100vw, 788px\" \/><figcaption>Ingrandimento di una immagine tramite Lightbox Tobii<\/figcaption><\/figure>\n<p>Potremmo anche realizzare un <b>HTML personalizzato<\/b>, l\u2019importante in questo caso \u00e8 inserire <b>alcuni elementi fondamentali<\/b>, in modo simile ad un carosello di immagini:<\/p>\n<ul>\n<li>I pulsanti \u201cprecedente\u201d e \u201csuccessivo\u201d che possono essere dei &lt;button&gt; con <b>aria-label<\/b> ed eventuale <b>aria-hidden<\/b><\/li>\n<li>Il pulsante di chiusura del lightbox, anch\u2019esso un &lt;button&gt; con aria-label<\/li>\n<li>L\u2019immagine, inserita come <b>&lt;img&gt;<\/b> all\u2019interno di un tag <b>&lt;figure&gt;<\/b> che potrebbe anche contenere un <b>&lt;picture&gt;<\/b> con i relativi &lt;source&gt; come abbiamo visto prima. Se inseriamo la didascalia, usiamo <b>&lt;figcaption&gt;<\/b> dentro al &lt;figure&gt;. Ricordiamoci di impostare l\u2019attributo \u201calt\u201d all\u2019immagine, anche se vuoto<\/li>\n<\/ul>\n<p>Alcuni altri plugin Javascript che potremmo usare oltre a Tobii sono: <a href=\"https:\/\/fslightbox.com\/\" rel=\"nofollow noopener\">FsLightbox<\/a>, <a href=\"https:\/\/photoswipe.com\/\" rel=\"nofollow noopener\">Photoswipe<\/a>, <a href=\"https:\/\/www.lightgalleryjs.com\/\" rel=\"nofollow noopener\">LightGallery<\/a>, <a href=\"https:\/\/lokeshdhakar.com\/projects\/lightbox2\/\" rel=\"nofollow noopener\">Lightbox2<\/a>, di questi ce ne sono di pi\u00f9 e meno recenti.<\/p>\n<p>Ovviamente rimane nostra responsabilit\u00e0 assicurarci che l\u2019HTML generato sia <b>accessibile<\/b>.<\/p>\n<h2>Link utili<\/h2>\n<ul>\n<li>WAI: <a href=\"https:\/\/www.w3.org\/WAI\/tutorials\/images\/groups\/\" rel=\"nofollow noopener\">Groups of Images<\/a><\/li>\n<li>MDN: <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/HTML\/Multimedia_and_embedding\/Responsive_images\" rel=\"nofollow noopener\">Responsive images<\/a><\/li>\n<li>MDN: <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Accessibility\/ARIA\/Roles\/group_role\" rel=\"nofollow noopener\">Group role<\/a><\/li>\n<li><a href=\"https:\/\/midzer.github.io\/tobii\/\" rel=\"nofollow noopener\">Tobii<\/a><\/li>\n<li><a href=\"https:\/\/fslightbox.com\/\" rel=\"nofollow noopener\">FsLightbox<\/a><\/li>\n<li><a href=\"https:\/\/photoswipe.com\/\" rel=\"nofollow noopener\">Photoswipe<\/a><\/li>\n<li><a href=\"https:\/\/www.lightgalleryjs.com\/\" rel=\"nofollow noopener\">LightGallery<\/a><\/li>\n<li><a href=\"https:\/\/lokeshdhakar.com\/projects\/lightbox2\/\" rel=\"nofollow noopener\">Lightbox2<\/a><\/li>\n<\/ul>\n<h2>Leggi anche<\/h2>\n<ul>\n<li><a href=\"https:\/\/www.accessibilita.digital\/come-sviluppare-un-sito-web-accessibile\/\">Come sviluppare un sito web accessibile<\/a><\/li>\n<li><a href=\"https:\/\/www.accessibilita.digital\/come-realizzare-caroselli-e-slider-accessibili\/\">Come realizzare caroselli e slider accessibili<\/a><\/li>\n<li><a href=\"https:\/\/www.accessibilita.digital\/come-realizzare-un-componente-leggi-di-piu-read-more-accessibile\/\">Come realizzare un componente Leggi di pi\u00f9 (read more) accessibile<\/a><\/li>\n<li><a href=\"https:\/\/www.accessibilita.digital\/come-creare-popup-e-modali-accessibili\/\">Come creare popup e modali accessibili<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>L\u2019uso 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. [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":227,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-196","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/posts\/196"}],"collection":[{"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/comments?post=196"}],"version-history":[{"count":7,"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/posts\/196\/revisions"}],"predecessor-version":[{"id":230,"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/posts\/196\/revisions\/230"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/media\/227"}],"wp:attachment":[{"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/media?parent=196"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/categories?post=196"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/tags?post=196"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}