L’elemento comunemente chiamato “accordion” viene usato per mostrare e nascondere delle porzioni di contenuto. In genere il primo della lista è aperto e mostra il testo, mentre i successivi sono nascosti. In alcuni casi, si preferisce far aprire un elemento alla volta chiudendo quello aperto in precedenza, mentre in altri casi si sceglie di permettere all’utente di mantenerli tutti aperti.
In termini di accessibilità, e anche di SEO, l’accordion è forse l’elemento meno adatto, perché l’utente per poter vedere il testo nascosto deve prima sapere in qualche modo che questo è presente nella pagina. Solitamente però, gli elementi accordion chiusi hanno il contenuto nascosto (cioè in display:none) e questo significa che il contenuto non viene letto né dagli screen reader e nemmeno dai crawler dei motori di ricerca.
L’accordion potrebbe essere usato anche per mostrare o nascondere dei campi di un form, ad esempio in un modulo fatto a step per il pagamento (login, informazioni di spedizione, informazioni di fatturazione, riepilogo ordine, informazioni di pagamento).
Come per i menù di navigazione, possiamo usare dei button e avvalerci dell’attributo aria-expanded per determinare l’apertura e la chiusura di un accordion. I button saranno sempre visibili, mentre il contenuto degli accordion chiusi sarà nascosto.
I button che azionano l’accordion sono racchiusi in un h3 e usano l’attributo aria-expanded impostato a true quando l’elemento è attivo, o aperto, e a false quando è disattivo, o chiuso
Il contenuto ha un role=”region” per segnalare eventuali cambi di visibilità, che verranno quindi annunciati dagli screen reader. Al posto di questo role potremmo semplicemente usare il tag <section> che ha lo stesso valore
I campi sono racchiusi in un fieldset
Così come avviene con i dropdown, cliccando o azionando il button questo modifica la sua proprietà aria-expanded e mostra oppure nasconde il contenuto di conseguenza, usando Javascript e CSS
Analisi di un caso reale
Vediamo anche il codice di esempio di un caso pratico che ho preso da un sito che ho realizzato, dove nel caso specifico viene inserita una sezione FAQ divisa per categorie, quindi abbiamo una categoria di FAQ che presenta un elenco fatto ad accordion, dove ogni accordion è una singola FAQ. Questa la porzione di codice di esempio:
Quest’ultimo esempio è stato fatto usando Bootstrap Italia e WordPress, e gli elementi principali sono:
L’<h3> che contiene il titolo della categoria di FAQ
Un <ul> che racchiude tutto l’elenco di elementi accordion
Gli <li> che rappresentano ogni singolo accordion
Un <article> che agisce da contenitore dell’accordion
Il <button> che aziona l’accordion e, poiché contiene il titolo della singola FAQ, è racchiuso in un <h4>, visto che il livello di intestazione usato precedentemente è un h3. Notare che il button usa anche aria-controls per definire quale elemento viene controllato da questo pulsante
Il contenuto dell’accordion, che è un <section> ma potrebbe anche essere un <div> con role=”region”, in questo caso usa le classi CSS “accordion-collapse collapse show” come da esempio di Bootstrap 5, inoltre usa aria-labelledby che fa riferimento all’h4 precedente, cioè il titolo della singola FAQ, per indicare alle tecnologie quale testo associare a questo elemento
