Creare caroselli accessibili

Robert Flack

Penny McLachlan

Lucas Radaelli

Data di pubblicazione: 29 settembre 2025

Che ti piacciano o meno, i caroselli sono un pattern ampiamente utilizzato e richiesto. Pertanto, quando viene implementato un carosello, deve essere solido e accessibile. Deve essere interattivo al primo rendering, dichiarativo per una manutenzione più semplice e costruito con una struttura semantica testata con tecnologie assistive.

Tuttavia, rendere accessibili i caroselli è spesso difficile. La gestione della messa a fuoco, la corretta ricezione degli annunci dello screen reader e la gestione degli elementi interattivi fuori schermo sono complicate, pertanto i caroselli di molti siti non sono accessibili. Queste sfide hanno portato il team di Chrome a lavorare su caroselli CSS interattivi nell'ambito del modulo CSS Overflow di livello 5, rilasciato in Chrome 135.

Dopo il lancio iniziale della funzionalità in Chrome, abbiamo ricevuto molti feedback dalla community, che abbiamo cercato di risolvere. Sono incluse nuove funzionalità come il supporto delle modalità di indicatore di scorrimento discrete e di navigazione e la correzione di numerosi bug. Ad esempio:

• Supporto dei contatori nel testo alternativo, disponibile in Chrome 140.
• Risolto un problema per cui un ::scroll-button state disattivato non viene letto correttamente dagli screen reader.
• Assicurarsi che ::scroll-marker riceva un nome di etichetta ARIA dal valore del contenuto.
• Correzione di un bug per cui tutti gli pseudo-elementi ::scroll-marker venivano letti come "selezionati".

Riteniamo che le funzionalità in CSS Overflow 5 possano creare caroselli robusti e accessibili che sono interattivi al primo rendering. Questo post ti guida passo passo con un focus su come utilizzare queste funzionalità per risolvere problemi di accessibilità di vecchia data.

Per un'introduzione più generale ai caroselli, consulta l'articolo Caroselli con CSS. Ricorda: nessuna UI può essere garantita come accessibile fin da subito, devi sempre testare l'accessibilità delle tue pagine.

Di che tipo di carosello hai bisogno?

Prima di iniziare a scrivere il codice, è importante sapere che tipo di carosello stai creando. La strategia di accessibilità giusta dipende da come l'utente deve vivere l'esperienza dei contenuti. Questo post tratta tre tipi comuni:

Caroselli con un solo elemento

Con i caroselli a un solo elemento, solo una slide è completamente visibile e interattiva alla volta (ad esempio, banner hero o presentazioni).

Caroselli con paginazione automatica

I caroselli con paginazione automatica mostrano "pagine" di contenuti, come un elenco di prodotti o programmi TV.

Caroselli con più elementi

Nei caroselli multi-item, più elementi del carosello sono visibili contemporaneamente, ma puoi comunque scorrere tra loro singolarmente senza paginazione.

Ogni tipo di carosello ha considerazioni e best practice diverse in termini di accessibilità.

Caroselli con un solo elemento

Questa è una presentazione classica. Deve essere letto un solo elemento secondario alla volta, anche se in molti casi gli utenti vedranno un "sbirciatina" dell'elemento successivo o precedente per fornire indizi contestuali su contenuti aggiuntivi. L'obiettivo è garantire che solo la slide centrata e completamente visibile sia interattiva.

Ecco come renderlo accessibile, passo dopo passo.

Passaggio 1: imposta un unico punto focale con lo scorrimento agganciato

Per garantire che il contenitore di scorrimento si "agganci" sempre a una slide, senza lasciare elementi bloccati in modo strano nel mezzo, utilizza lo scorrimento con aggancio CSS. In questo modo, dopo lo scorrimento, un elemento viene "agganciato" perfettamente alla sua posizione corretta, creando un'esperienza utente pulita.

.carousel {
  scroll-snap-type: inline mandatory;
}
.item {
  scroll-snap-align: center;
}

Passaggio 2: annuncia le modifiche al carosello e alle slide

Un utente con un lettore di schermo deve sapere di essere entrato in un carosello e quando cambia la slide. Per questo sono necessari alcuni attributi ARIA nel contenitore del carosello:

Ecco la struttura HTML:

<div class="carousel" role="region" aria-label="Slideshow" aria-live="polite"> ... </div>

Passaggio 3: rendi interattiva solo la slide visibile

Questo è fondamentale per l'accessibilità, in quanto impedisce agli utenti di passare accidentalmente a pulsanti o link nelle slide fuori dallo schermo. Per farlo, utilizza la nuova query del container scroll-state e la proprietà interactivity.

Innanzitutto, rendi inerte ogni elemento della slide per impostazione predefinita utilizzando interactivity: inert. Poi, utilizza una query del contenitore scroll-state per scegliere come target la slide attualmente "agganciata" nell'area visibile e imposta i relativi contenuti su interactivity: auto.

.item {
  container-type: scroll-state;
}
/* Make all content inside slides inert by default */
.item > * {
  interactivity: inert;
  /* When a slide is snapped inline, make its content interactive */
  @container scroll-state(snapped: inline) {
    > .content {
      interactivity: auto;
    }
  }
}

Con questo CSS, il browser gestisce automaticamente quali elementi sono attivabili. Non è più necessario JavaScript per gestire un tabindex. La query scroll-state rende inerti tutte le slide tranne quella corrente.

Caroselli paginati

Questo pattern viene spesso utilizzato per gallerie di prodotti o scelte in cui i contenuti sono raggruppati in pagine. L'accessibilità può essere gestita in due modi, a seconda di come vuoi presentare i contenuti.

Un carosello con pagine separate

Utilizza un contenitore con role="region" con un singolo elemento con role="tabpanel" al suo interno. I contenuti di questo pannello verranno aggiornati in base alla scheda o alla pagina attiva.

<div role="region" class="carousel" aria-label="Featured Products Carousel">
    <div role="tabpanel">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        ...
        <div class="item">Item n</div> </div>
    </div>
</div>

Per gestire l'interattività, utilizza un trucco di animazione intelligente legato alla view() sequenza temporale. In questo modo, l'ordine di tabulazione raggiunge solo gli elementi attualmente visibili sullo schermo.

@keyframes interactive-when-visible {
  0% { interactivity: auto; }
}
.item {
  interactivity: inert;
  animation: interactive-when-visible steps(1);
  animation-timeline: view(inline);
}

Un elenco dei contenuti

Se i contenuti sono fondamentalmente un elenco, utilizza un elemento <ul> per la semantica corretta.

Ad esempio:

<div class="carousel" role="region" aria-label="Related Posts">
  <ul>
    <li><!-- Post 1 content --></li>
    <li><!-- Post 2 content --></li>
    <li><!-- Post 3 content --></li>
    <!-- ... -->
  </ul>
</div>

Per questo pattern, non utilizzare la proprietà di interattività per rendere inerte il contenuto fuori dallo schermo. In questo modo, il conteggio degli elementi annunciato dagli screen reader verrebbe modificato, quindi tutti i contenuti devono rimanere nell'albero di accessibilità.

Caroselli con più elementi

Questo pattern è per i caroselli in cui più elementi secondari possono essere visibili e leggibili contemporaneamente. Ad esempio, una sezione "Prodotti correlati" su un sito di e-commerce.

Questi caroselli si comportano in modo diverso a seconda della risposta alla seguente decisione: guidi l'attenzione dell'utente su un elemento alla volta o gli consenti di accedere liberamente a tutti i contenuti visibili?

Pattern 1: un singolo elemento interattivo tra gli elementi visibili

In questo modello sono visibili più elementi, ma solo l'elemento principale o "attuale" è interattivo. Gli altri elementi visibili sono inerti. Questo pattern è utile per guidare un utente attraverso una serie di elementi uno alla volta.

Per creare questo componente correttamente, devi utilizzare lo stesso pattern di accessibilità del carosello a un solo elemento descritto in precedenza. Ciò comporta:

• Utilizza una query del contenitore dello stato di scorrimento per applicare l'interattività: inerzia agli elementi non attivi.
• Aggiungi un padding sufficiente intorno agli elementi per assicurarti che ogni elemento possa essere agganciato alla posizione principale (ad esempio, il centro della finestra di visualizzazione). In questo modo, il modello di navigazione uno per uno risulta intenzionale e fluido.

Pattern 2: tutti gli elementi visibili sono interattivi

Se il tuo obiettivo è consentire agli utenti di interagire liberamente con tutti gli elementi visibili, la best practice è assicurarsi che nessuno dei contenuti sia inerte.

Per questo schema:

• Utilizza un elemento <ul> se i contenuti sono semanticamente un elenco, in quanto fornisce il contesto corretto per gli utenti di screen reader.
• Non utilizzare la gestione dell'interattività (interactivity: inert). Tutti i contenuti visibili devono rimanere nell'albero dell'accessibilità ed essere raggiungibili tramite la navigazione con il tasto Tab.

In sintesi

CSS Overflow 5 ti consente di creare in modo dichiarativo pattern di carosello interattivi comuni con meno problemi di accessibilità. Combinando HTML semantico, CSS moderni come lo stato di scorrimento e l'interattività e i ruoli ARIA corretti, puoi creare esperienze accessibili e ad alte prestazioni che sono interattive al primo paint.

Prova queste nuove API. Come sempre, anche se questi pattern e API sono progettati per semplificare la creazione di componenti interattivi, veloci e accessibili, non esiste un sostituto per i test di accessibilità completi. Dovrai sempre verificare che il codice sia accessibile e funzioni per il target di base.