Carousel Accessibile - Come rendere i caroselli fruibili per tutti
I caroselli automatici possono bloccare gli utenti con disabilità cognitive o che usano screen reader. Scopri le 3 regole d'oro per renderli accessibili secondo WCAG 2.1. Scopriamo come rendere un carousel accessibile.
I carousel sono componenti dinamici molto usati nei siti moderni. Nella maggior parte dei casi, questi elementi vengono forniti da sviluppatori terzi e integrati come estensioni o plugin nei vari CMS come WordPress, Joomla o Drupal e non sono accessibili. Di solito è molto difficile di intervenire sul codice per applicare le modifiche necessarie se non esistono possibilità di override. Per garantire l'accessibilità, è fondamentale fornire controlli chiari, gestire il focus e offrire opzioni di pausa. Scopri le best practice e gli snippet di codice per implementare un carousel conforme a WCAG 2.1 livello AA.
Perché i carousel devono essere accessibili?
Un carousel non accessibile può causare frustrazione per utenti con:
- Disabilità cognitive: autoplay incontrollato può essere stressante
- Disabilità motorie: impossibilità di interagire senza tastiera
- Disabilità visive: mancanza di annunci audio o focus mal gestito
Secondo la normativa EN 301 549 v3.2.1, i contenuti in movimento devono essere controllabili dall'utente. Il tuo sito potrebbe essere in violazione se i carousel non rispettano questi standard. Questi elementi convolgono diversi criteri del WCAG.
Regola 1 - Controlli di pausa e navigazione
Fornisci sempre pulsanti per pausa, avanti e indietro. Usa attributi aria-label descrittivi e assicurati che siano raggiungibili con la tastiera.
< button aria-label="Pausa carousel" onclick="pause()" tabindex="0">⏸️< />
< button aria-label="Slide successiva" onclick="next()" tabindex="0">▶️< />
< button aria-label="Slide precedente" onclick="prev()" tabindex="0">◀️< />
Regola 2 - Focus management e semantica
Quando il carousel è attivo, sposta il focus sul contenuto corrente e usa role="region" con aria-roledescription="carousel" e aria-label="Featured slides" per chiarire il ruolo al lettore di schermo.
Aggiungi anche aria-live="polite" per annunciare automaticamente il contenuto della slide attuale.
< div class="carousel" role="region" aria-roledescription="carousel" aria-label="Featured slides" aria-live="polite" tabindex="0">
< !-- Slide content -- >< /div>
Regola 3 - Evita autoplay incontrollato
Imposta l'autoplay su false di default; l'utente deve attivarlo manualmente. Se lo vuoi, aggiungi un pulsante “Avvia” che abilita l'autoplay.
< div id="myCarousel" data-bs-ride="carousel" data-bs-interval="false">
< !-- Slide content -- >
< /div>
Validazione con AxY tools
Entrambi i tools AxY Site Scanner e AxY Page Validator rilevano questi elementi se presenti nelle pagine. Vista la varietà del codice creato dagli sviluppatori, non sempre riescono a identificare automaticamente se il loro codice è conforme e li segnalano come da verificare manualmente.
Qui hai la possibilità di testare l'accessibilità del tuo carousel e segnalare ad AxY il codice di verifica se il carosello / slideshow è conforme. In questo modo, alle successive scansioni, il tool riconoscerà l'elemento come verificato.
Verifica i caroselli e scopri se:
- Manca un pulsante di pausa
- L'elemento principale non ha
role="region" - Il focus non è gestito correttamente
- È presente autoplay obbligatorio
- Mancano i tasti Avanti / Indietro o altro metodo di navigazione
Il report ti indica esattamente dove e come correggere, con link alle linee guida WCAG 2.1.
FAQ
role="region" con aria-live="polite" per annunciare il contenuto della slide corrente. Assicurati che i pulsanti abbiano etichette semantiche con aria-label.