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ù in basso nelle pagine interne, per mostrare le news recenti o i prodotti correlati.
In termini di accessibilità ci sono alcuni punti importanti da tenere presente:
Evitare la riproduzione automatica del carosello e in ogni caso permettere all’utente di metterla in pausa tramite apposito pulsante
Inserire i pulsanti “pausa” e “riproduci” per fermare o avviare il carosello
Assicurarsi che lo scorrimento delle immagini non sia troppo veloce o fastidioso
Verificare i contrasti, soprattutto se vi sono dei testi inseriti in sovra impressione rispetto alle immagini, e in ogni caso verificare se è opportuno che le immagini abbiano un testo alternativo
Fare attenzione a come viene gestito il focus nel carosello
Le funzionalità, come ad esempio la navigazione delle slide, spesso realizzata tramite una “dot pagination”, devono essere raggiungibili e utilizzabili da tastiera
I cambiamenti allo stato dello slider vanno comunicati all’utente, ad esempio tramite aria-live=”polite”
Altre informazioni utili sono disponibili in maggior dettaglio nella pagina dedicata del WAI: Carousel Tutorials.
Plugin Javascript utili
Alcuni plugin Javascript che posso consigliare sono i seguenti:
Splide, usato anche da AGID in alcuni loro esempi e usato come default in Bootstrap Italia, è aggiornato al 2022
Accessible Slick, la versione di Slick focalizzata sull’accessibilità, aggiornato al 2021
Owl carousel, l’ultimo aggiornamento su Github è del 2018
BxSlider, anche qui l’ultimo aggiornamento su Github è del 2018
Vi sono poi dei plugin sviluppati per WordPress o altri CMS, oppure delle librerie dedicate per Node o altri framework, anche se personalmente preferisco inserire nel sito web i file del plugin stand-alone completo senza dipendere da piattaforme o sistemi esterni.
A parte il codice Javascript dell’esempio che probabilmente non useremo, perché faremo affidamento a dei plugin esterni, è utile controllare e in alcuni casi modificare il codice HTML e CSS per assicurarsi che il componente risulti il più possibile accessibile. Vediamo gli elementi principali:
I pulsanti “precedente” e “successivo” sono dei <button>, solitamente (ma non necessariamente) inseriti dentro a degli <li>. Se contengono un tag <img> per l’icona, assicurarsi che questo abbia un testo alternativo come “Elemento successivo” e “Elemento precedente”, se invece contengono un <svg> potremmo inserire un aria-label al button oppure uno <span> testuale con classe sr-only (Bootstrap 4) o visually-hidden (Bootstrap 5).
Lo slider dovrebbe prevedere una “regione” che comunica i cambiamenti all’utente, come un <div> con aria-live e aria-atomic. Nell’esempio del W3C viene usato un <div> che contiene il testo “Item 1 of 3” e si aggiorna di conseguenza al cambiamento della slide, con “aria-atomic” che indica alle tecnologie assistive di rileggere l’intero contenuto del carosello con il testo aggiornato.
La paginazione degli elementi, realizzata generalmente a punti o a numeri, usa dei <button> inseriti dentro a un <ul> e relativi <li>, dove la “pagina” (slide) selezionata usa una classe CSS “current” nel <button> per evidenziare il cambio di stato. Si potrebbe usare anche aria-current per uno scòpo simile.
Quando una slide viene selezionata, il focus viene passato all’<li> di quella slide, in questo caso viene usato anche tabindex=”-1” sull’elemento <li> per permettergli di ricevere il focus
Inoltre, viene usato aria-hidden impostato a “true” sull’<li> delle slide che non sono visibili in quel momento
