{"id":193,"date":"2024-08-13T15:21:59","date_gmt":"2024-08-13T15:21:59","guid":{"rendered":"https:\/\/www.accessibilita.digital\/?p=193"},"modified":"2024-08-23T12:28:23","modified_gmt":"2024-08-23T12:28:23","slug":"caroselli-slider-accessibili","status":"publish","type":"post","link":"https:\/\/www.accessibilita.digital\/caroselli-slider-accessibili\/","title":{"rendered":"Come realizzare caroselli e slider accessibili"},"content":{"rendered":"<p>I caroselli sono ormai utilizzati in qualsiasi sito web e vengono solitamente posizionati nella parte alta del sito, in particolare <b>in homepage<\/b>, ma a volte anche pi\u00f9 in basso nelle pagine interne, per <b>mostrare le news recenti o i prodotti correlati<\/b>.<\/p>\n\n<h2>Cosa sapere per l&#8217;accessibilit\u00e0<\/h2>\n<p>In termini di accessibilit\u00e0 ci sono alcuni punti importanti da tenere presente:<\/p>\n<ul>\n<li>Evitare la <b>riproduzione automatica<\/b> del carosello e in ogni caso permettere all\u2019utente di metterla in pausa tramite apposito pulsante<\/li>\n<li>Inserire i pulsanti \u201cpausa\u201d e \u201criproduci\u201d per <b>fermare o avviare il carosello<\/b><\/li>\n<li>Assicurarsi che <b>lo scorrimento<\/b> delle immagini non sia troppo veloce o fastidioso<\/li>\n<li><b>Verificare i contrasti<\/b>, soprattutto se vi sono dei testi inseriti in sovra impressione rispetto alle immagini, e in ogni caso verificare se \u00e8 opportuno che le immagini abbiano un <b>testo alternativo<\/b><\/li>\n<li>Fare attenzione a come viene gestito il <b>focus<\/b> nel carosello<\/li>\n<li><b>Le funzionalit<\/b><b>\u00e0<\/b>, come ad esempio la navigazione delle slide, spesso realizzata tramite una \u201cdot pagination\u201d, devono essere <b>raggiungibili e utilizzabili da tastiera<\/b><\/li>\n<li><b>I cambiamenti allo stato dello slider vanno comunicati all\u2019utente<\/b>, ad esempio tramite aria-live=\u201dpolite\u201d<\/li>\n<\/ul>\n<p>Altre informazioni utili sono disponibili in maggior dettaglio nella pagina dedicata del <a href=\"https:\/\/www.w3.org\/WAI\/tutorials\/carousels\/\" rel=\"nofollow noopener\">WAI: Carousel Tutorials<\/a>.<\/p>\n<h2>Plugin Javascript utili<\/h2>\n<p>Alcuni <b>plugin Javascript<\/b> che posso consigliare sono i seguenti:<\/p>\n<ul>\n<li><a href=\"https:\/\/github.com\/Splidejs\/splide\" rel=\"nofollow noopener\">Splide<\/a>, usato anche da AGID in alcuni loro esempi e usato come default in Bootstrap Italia, \u00e8 aggiornato al 2022<\/li>\n<li><a href=\"https:\/\/accessible360.github.io\/accessible-slick\/\" rel=\"nofollow noopener\">Accessible Slick<\/a>, la versione di Slick focalizzata sull\u2019accessibilit\u00e0, aggiornato al 2021<\/li>\n<li><a href=\"https:\/\/github.com\/OwlCarousel2\/OwlCarousel2\" rel=\"nofollow noopener\">Owl carousel<\/a>, l\u2019ultimo aggiornamento su Github \u00e8 del 2018<\/li>\n<li><a href=\"https:\/\/github.com\/stevenwanderski\/bxslider-4\" rel=\"nofollow noopener\">BxSlider<\/a>, anche qui l\u2019ultimo aggiornamento su Github \u00e8 del 2018<\/li>\n<\/ul>\n<p>Vi sono poi dei <b>plugin sviluppati per WordPress o altri CMS<\/b>, oppure delle librerie dedicate per <b>Node o altri framework<\/b>, anche se personalmente preferisco inserire nel sito web i file del plugin stand-alone completo senza dipendere da piattaforme o sistemi esterni.<\/p>\n<h2>Analisi di un esempio dimostrativo<\/h2>\n<p>Analizziamo meglio il caso d\u2019uso proposto dal W3C: <a href=\"https:\/\/www.w3.org\/WAI\/tutorials\/carousels\/working-example\/\" rel=\"nofollow noopener\">Carousel working example<\/a><\/p>\n<p>A parte il <b>codice Javascript<\/b> dell\u2019esempio che probabilmente non useremo, perch\u00e9 faremo affidamento a dei <b>plugin esterni<\/b>, \u00e8 utile controllare e in alcuni casi modificare il codice <b>HTML e CSS<\/b> per assicurarsi che il componente risulti il pi\u00f9 possibile accessibile. Vediamo gli elementi principali:<\/p>\n<ul>\n<li>I pulsanti \u201cprecedente\u201d e \u201csuccessivo\u201d sono dei <b>&lt;<\/b><b>button&gt;<\/b>, solitamente (ma non necessariamente) inseriti dentro a degli &lt;li&gt;. Se contengono un tag <b>&lt;img&gt;<\/b> per l\u2019icona, assicurarsi che questo abbia un <b>testo alternativo<\/b> come \u201cElemento successivo\u201d e \u201cElemento precedente\u201d, se invece contengono un <b>&lt;svg&gt;<\/b> potremmo inserire un <b>aria-label<\/b> al button oppure uno &lt;span&gt; testuale con classe sr-only (Bootstrap 4) o visually-hidden (Bootstrap 5).<\/li>\n<li>Lo slider dovrebbe prevedere una \u201cregione\u201d che comunica i cambiamenti all\u2019utente, come un &lt;div&gt; con <b>a<\/b><b>ria-live<\/b> e <b>aria-atomic<\/b>. Nell\u2019esempio del W3C viene usato un &lt;div&gt; che contiene il testo \u201cItem 1 of 3\u201d e si aggiorna di conseguenza al cambiamento della slide, con \u201caria-atomic\u201d che indica alle tecnologie assistive di <b>rileggere l\u2019intero contenuto<\/b> del carosello con il testo aggiornato.<\/li>\n<li>La <b>paginazione<\/b> degli elementi, realizzata generalmente a punti o a numeri, usa dei <b>&lt;<\/b><b>button&gt;<\/b> inseriti dentro a un &lt;ul&gt; e relativi &lt;li&gt;, dove la \u201cpagina\u201d (slide) selezionata usa una classe CSS \u201ccurrent\u201d nel &lt;button&gt; per evidenziare il cambio di stato. Si potrebbe usare anche <a href=\"http:\/\/aria-current\/\" rel=\"nofollow\">aria-current<\/a> per uno sc\u00f2po simile.<\/li>\n<li>Quando una slide viene selezionata, il <b>focus<\/b> viene passato all\u2019&lt;li&gt; di quella slide, in questo caso viene usato anche <b>tabindex=\u201d-1\u201d<\/b> sull\u2019elemento &lt;li&gt; per permettergli di ricevere il focus<\/li>\n<li>Inoltre, viene usato <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Accessibility\/ARIA\/Attributes\/aria-hidden\" rel=\"nofollow noopener\">aria-hidden<\/a> impostato a \u201ctrue\u201d sull\u2019&lt;li&gt; delle slide che non sono visibili in quel momento<\/li>\n<\/ul>\n<h2>Link utili<\/h2>\n<ul>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/tutorials\/carousels\/\" rel=\"nofollow noopener\">WAI: Carousel Tutorials<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/Splidejs\/splide\" rel=\"nofollow noopener\">Splide<\/a><\/li>\n<li><a href=\"https:\/\/accessible360.github.io\/accessible-slick\/\" rel=\"nofollow noopener\">Accessible Slick<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/OwlCarousel2\/OwlCarousel2\" rel=\"nofollow noopener\">Owl carousel<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/stevenwanderski\/bxslider-4\" rel=\"nofollow noopener\">BxSlider<\/a><\/li>\n<li>WAI: <a href=\"https:\/\/www.w3.org\/WAI\/tutorials\/carousels\/working-example\/\" rel=\"nofollow noopener\">Carousel working example<\/a><\/li>\n<li>MDN: <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Accessibility\/ARIA\/Attributes\/aria-live\" rel=\"nofollow noopener\">aria-live<\/a><\/li>\n<li>MDN: <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Accessibility\/ARIA\/Attributes\/aria-atomic\" rel=\"nofollow noopener\">aria-atomic<\/a><\/li>\n<li>MDN: <a href=\"http:\/\/aria-current\/\" rel=\"nofollow\">aria-current<\/a><\/li>\n<li>MDN: <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Global_attributes\/tabindex\" rel=\"nofollow noopener\">tabindex<\/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-una-navigazione-a-briciole-di-pane-breadcrumbs-accessibile\/\">Come realizzare una navigazione a briciole di pane (breadcrumbs) accessibile<\/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>I caroselli sono ormai utilizzati in qualsiasi sito web e vengono solitamente posizionati nella parte alta del sito, in particolare in homepage, ma a volte anche pi\u00f9 in basso nelle pagine interne, per mostrare le news recenti o i prodotti correlati. Cosa sapere per l&#8217;accessibilit\u00e0 In termini di accessibilit\u00e0 ci sono alcuni punti importanti da [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":262,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-193","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\/193"}],"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=193"}],"version-history":[{"count":4,"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/posts\/193\/revisions"}],"predecessor-version":[{"id":265,"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/posts\/193\/revisions\/265"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/media\/262"}],"wp:attachment":[{"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/media?parent=193"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/categories?post=193"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/tags?post=193"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}