Creare un accordion PE

La versione PE di un accordion utilizza solo HTML, ovvero la coppia di elementi nativi <details>/<summary>. Faccia clic su summary per aprire o chiudere il pannello. Funziona senza CSS, JS o framework: è integrata nell'HTML.

<summary> è un pulsante che può ricevere il focus e può essere attivato da tastiera (Enter/Space attiva o disattiva l'apertura). I lettori di schermo annunciano lo stato espanso o compresso. Due elementi HTML offrono ciò che per un accordion React personalizzato potrebbe richiedere decine di righe di ARIA e di gestione degli eventi.

Imposti con il normale CSS il triangolo di apertura, la spaziatura interna del pannello e le transizioni. L'attributo open riflette lo stato, quindi details[open] summary { color: blue; } viene applicato solo quando l'elemento è espanso. Non serve JavaScript per rifinire l'aspetto.

L'apertura e la chiusura predefinite sono istantanee. Può aggiungere un'animazione applicando una transizione a content-visibility oppure usando JS per misurare l'altezza del pannello e animare max-height. Nei casi semplici, il passaggio immediato è accettabile; l'animazione è un miglioramento progressivo basato su CSS e JS.

JS può aggiungere funzionalità opzionali: chiudere gli altri accordion quando se ne apre uno (modalità con un solo elemento aperto), memorizzare lo stato di apertura in localStorage, animare la transizione oppure registrare nei dati analitici quali elementi vengono espansi. Ogni miglioramento è puramente aggiuntivo.

<details> genera un evento toggle ogni volta che cambia il suo stato di apertura. Lo usi per reagire all'espansione da parte dell'utente senza riscrivere i gestori dei clic. È compatibile sia con i clic del mouse sia con l'attivazione da tastiera.

Per visualizzare inizialmente aperto un accordion, imposti l'attributo open lato server: <details open>. Lo stato è presente nell'HTML ed è accessibile ai crawler e agli utenti con connessioni lente prima dell'esecuzione di qualsiasi JS.

Se il design richiede un'icona personalizzata per l'apertura e la chiusura, una visualizzazione animata o un pannello a più colonne, realizzi una versione personalizzata, ma usi se possibile <details>/<summary> come struttura sottostante. Aggiunga ARIA solo se non può usare in alcun modo gli elementi nativi.

Disabiliti JavaScript negli strumenti per sviluppatori e verifichi che l'accordion continui a funzionare: faccia clic su summary, controlli che il pannello cambi stato, che l'ordine del focus rimanga logico e che la tastiera lo attivi. Se qualcosa non funziona, JS non è un miglioramento, ma un requisito, in violazione di PE.

Per ottenere con stile radio l'apertura di "un solo elemento alla volta" senza JS, usi l'attributo name su <details> (supportato in Chrome/Safari): tutti gli elementi <details name="faq"> condividono lo stato, quindi l'apertura di uno chiude gli altri. Un pattern basato esclusivamente su HTML che replica il comportamento dei pulsanti radio.

Sostituisca div+JS con <details>/<summary>, mantenendo le classi CSS per gli stili. Il risultato è un HTML più breve, senza dipendenze da JS, più accessibile e con contenuti indicizzabili. La maggior parte degli accordion basati su JS può essere migrata a PE con modifiche minime visibili all'utente.

Un accordion PE usa <details>/<summary> nativi come base: è completamente accessibile e utilizzabile da tastiera senza JS. Può aggiungere CSS per gli stili visivi e, facoltativamente, JS per le animazioni o per il comportamento con un solo elemento aperto. Verifichi, disabilitando JS, che la funzionalità di base continui a funzionare. Il nuovo attributo name consente persino una modalità con un solo elemento aperto realizzata solo con CSS.