Accordion

Stato del componente:Pronto

Un accordion è una lista di intestazioni che possono espandersi per mostrare contenuti nascosti, utile per ottimizzare spazio su pagina e creare collegamenti con contenuti correlati

Componenti

Metadati e link per approfondire

Utile per

Anteprima

Inizio componente:Fine componente.
Risoluzione

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.

Come usarlo

  • Per ridurre lo scorrimento di contenuti testuali lunghi e non cruciali, soprattutto su mobile.
  • Per dare un’anteprima di contenuti correlati tra loro.
  • Per organizzare e collegare contenuti simili che si trovano su altre pagine.
  • Per permettere all’utente di mostrare o nascondere contenuti che gli sono rilevanti.

Attenzione a

  • Non nascondere in un accordion informazioni importanti che devono essere lette dagli utenti.
  • Non usare l’accordion su pagine che devono essere stampate.
  • 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ù breve possibile, rimanendo comunque chiari e descrittivi del contenuto della sezione.
  • Ogni titolo deve essere formattato come un heading (H2-H4) appropriato all’informazione dell’architettura della pagina.
  • Il contenuto di sezione può essere diviso in paragrafi e includere sottotitoli di paragrafo, se necessario.

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.

Accessibilità

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

CaratteristicaStatoDescrizione

Visivamente accessibile

Pronto

Uso e contrasto dei colori, leggibilità

Amichevole con lettori di schermo

Pronto

Struttura titolazioni, etichette e testi alternativi

Navigabile

Pronto

Focus, struttura, navigazione da tastiera o altri device

Comprensibile

Pronto

Comprensibile, prevedibile, gestione semplice dell’errore

Stato del componente

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

LibreriaStato componenteLink

UI Kit (design)

ProntoKit nello UI Kit su Figma (si apre in una nuova finestra)

Bootstrap Italia

ProntoScheda documentazione (si apre in una nuova finestra)

React

Da rivedereScheda storybook (si apre in una nuova finestra)

Angular

Non presente

Anatomia

In stesura

Comportamento

In stesura

Specifiche di design

In stesura

Come iniziare

Scopri come utilizzare tutti gli strumenti pensati per progettare interfacce ed esperienze dei servizi pubblici

Design tokens

In stesura, quello che segue è un esempio

Colori

ElementoStatoProprietàToken

Text

color

$color-text-base

Link

color

$color-text-primary

Link

active

color

$color-text-primary-active

Icon

background

$color-background-primary

Icon

active

background

$color-background-primary-active

Separators

border

$color-bluegray-04

Spaziature

ElementoDimensioneToken

Inset

S

$spacing-inset-s

Inset

M

$spacing-inset-m

Stack

M

$spacing-stack-m

Stack

XL

$spacing-stack-xl

Icone

ElementoStatoIcona

Chevron

Collapse

Navigazione/Chevron/Collapse

Chevron

Expand

Navigazione/Chevron/Expand

Stili di testo

ElementoStatoStile

Text

body text/sans

link

link/sans-bold

link

active

link/sans-bold-underline

Anteprima

Inizio componente:Fine componente.
Risoluzione

Come iniziare

Scopri come utilizzare tutti gli strumenti pensati per progettare interfacce ed esperienze dei servizi pubblici