Accordion con button e aria-expanded

Un accordion è un insieme di intestazioni che si espandono e si comprimono per mostrare il contenuto. Ogni sezione può essere aperta autonomamente, a differenza delle schede.

Renda ogni intestazione dell’accordion un vero button. I pulsanti ricevono lo stato attivo, funzionano con Invio e Spazio e vengono annunciati automaticamente dagli screen reader.

Faccia attenzione a usare un div cliccabile come intestazione. Non può ricevere lo stato attivo, ignora la tastiera e non comunica agli strumenti assistivi quale sia la sua funzione.

Aggiunga aria-expanded al pulsante, così gli screen reader annunciano se la sezione è compressa o espansa. Questo singolo stato rende accessibile un accordion.

Quando l’utente attiva il pulsante, alterni aria-expanded tra true e false. Lo mantenga sincronizzato con l’effettiva visibilità del pannello.

Usi aria-controls sul pulsante e lo imposti sull’id del pannello che apre. Gli utenti capiranno quale contenuto viene mostrato da questa intestazione.

Quando una sezione è chiusa, assegni al suo pannello l’attributo hidden. In questo modo viene rimosso dalla pagina e dall’albero di accessibilità finché non viene riaperto.

Inserisca ogni pulsante in una vera intestazione, ad esempio h3. Gli utenti di screen reader potranno così passare da una sezione all’altra usando la navigazione per intestazioni.

Un singolo elemento da mostrare e nascondere è una disclosure, non un insieme di schede. Ha bisogno soltanto di un pulsante con aria-expanded, senza ruoli tablist o tab.

Dopo l’apertura o la chiusura, lasci lo stato attivo sul button premuto dall’utente. Non lo sposti nel pannello: per chi usa la tastiera sarebbe una sorpresa.

Poiché il pulsante contiene il proprio stato, lo screen reader annuncia ogni volta se è espanso o compresso. Gli utenti sanno sempre che cosa accadrà attivandolo.

Ha imparato che l’intestazione di un accordion è un button con aria-expanded, racchiuso in un’intestazione. Alterni lo stato, indichi il pannello e lo nasconda quando è chiuso.