Accordion

Quando usarlo

Il componente Accordion permette di espandere e collassare delle sezioni con contenuti molto lunghi e non principali. L’intestazione delle sezioni dà una panoramica dei contenuti e permette all’utente di scegliere quali leggere.

Alternative a questo componente

• Tabs: mostrano i contenuti senza spingere altre sezioni verso il fondo della pagina e sono utili quando l’utente deve passare velocemente da una sezione all’altra.
• Collapse: visivamente meno prominente, utile quando ci sono una o due sezioni di contenuti brevi e meno importanti.

Come usarlo

• Usa un accordion per ridurre lo scorrimento di contenuti testuali lunghi e non cruciali, soprattutto su mobile.
• Usa il componente per dare un’anteprima di contenuti correlati tra loro.
• Organizza e collega contenuti simili che si trovano su altre pagine.
• Permetti all’utente di mostrare o nascondere contenuti che per lui rilevanti grazie alle interazioni per espandere o collassare l'accordion.

Attenzione a

• Non nascondere in un accordion informazioni importanti che devono essere lette dagli utenti.
• Non usare l’accordion su pagine che gli utenti potrebbero avere bisogno di stampare.
• Non usare l’accordion per contenuti molto articolati graficamente, ad esempio con immagini e icone.

Buone pratiche sui contenuti

• I titoli delle sezioni dell’accordion devono essere il più brevi possibile, rimanendo comunque chiari, descrittivi e specifici rispetto al contenuto della sezione.
• Usa per ogni titolo un heading di livello appropriato all'architettura dell'informazione della pagina.
• Puoi utilizzare paragrafi per dividere il contenuto di sezione, e includere sottotitoli per agevolare la leggibilità.

Accessibilità

Lo stato delle verifiche di accessibilità effettuate sul componente Bootstrap Italia

Stato del componente

Lo stato del presente componente nelle diverse librerie di design e sviluppo del design system