Vai al contenuto principale

Bootstrap Italia

Interfacce Web Accessibili per la PA

Steppers

Steppers

Indica il progresso all’interno di una procedura suddivisa in più passi.

Introduzione

È composto da tre aree principali:

  • intestazione, che mostra i passi della procedura e lo step attivo;
  • area del contenuto, che mostra il contenuto relativo allo step attivo;
  • navigazione, che mostra i pulsanti per navigare fra gli step.

Opzionalmente, è possibile aggiungere un’area per il salvataggio del progresso. Vai alla sezione Salva per maggiori dettagli.

Esempio

Codice sorgente

Gli esempi includono sempre il codice HTML per elementi globali come il .container-* , .row e .col-*. Questi elementi non sono necessari per il corretto funzionamento del componente, ma sono inclusi per completezza.

  • Primo contenuto
  • Secondo contenuto
  • Terzo contenuto

Contenuto di esempio dello step corrente

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<div class="container-fluid">
  <div class="row">
    <div class="col-12">
      <div class="steppers">
        <div class="steppers-header mb-3">
          <ul>
            <li class="confirmed">Primo contenuto <svg class="icon steppers-success" aria-hidden="true"><use href="/dist/svg/sprites.svg#it-check"></use></svg><span class="visually-hidden">Confermato</span></li>
            <li class="active">Secondo contenuto <span class="visually-hidden">Attivo</span></li>
            <li>Terzo contenuto</li>
          </ul>
          <span class="steppers-index" aria-hidden="true">2/6</span>
        </div>
        <div class="steppers-content mb-3" aria-live="polite">
          <!-- Esempio START -->
          <p>Contenuto di esempio dello step corrente</p>
          <!-- Esempio END -->
        </div>
        <nav class="steppers-nav mb-3">
          <button type="button" class="btn btn-icon btn-outline-primary btn-sm steppers-btn-prev"><svg class="icon icon-sm icon-primary"><use href="/dist/svg/sprites.svg#it-chevron-left"></use></svg>Indietro</button>
          <button type="button" class="btn btn-icon btn-primary btn-sm steppers-btn-next">Avanti <svg class="icon icon-sm icon-inverse"><use href="/dist/svg/sprites.svg#it-chevron-right"></use></svg></button>
        </nav>
      </div>
    </div>
  </div>
</div>

Intestazione

Il contenitore ha sempre una classe .steppers. La sua intestazione è contenuta in una lista <ul> all’interno della quale i singoli passi (o step) sono rappresentati da elementi <li>.

Visualizzazione su mobile

La modalità mobile dell’intestazioneha un aspetto diverso da quella desktop. Se stai consultando questa documentazione da un computer, ridimensiona la finestra del browser a meno di 992 pixel di larghezza per visualizzare l’esempio su dispositivo mobile.

Solo testo

I passi visibili nell’intestazione possono essere corredati da tre classi aggiuntive:

  • .confirmed per individuare uno step già confermato. È bene corredare tali step con un’icona che ne identifichi il completamento (vedi di seguito).
  • .active per individuare lo step attualmente attivo; su dispositivi mobili è l’unico visualizzato.
  • .steppers-index per individuare un indice, visibile solo su mobile, che può contenere lo stato attuale di progresso indicato in forma testuale
  • Primo contenuto
  • Secondo contenuto
  • Terzo contenuto

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<div class="container-fluid">
  <div class="row">
    <div class="col-12">
      <div class="steppers">
        <div class="steppers-header">
          <ul>
            <li class="confirmed">Primo contenuto <svg class="icon steppers-success" aria-hidden="true"><use href="/dist/svg/sprites.svg#it-check"></use></svg><span class="visually-hidden">Confermato</span></li>
            <li class="active">Secondo contenuto <span class="visually-hidden">Attivo</span></li>
            <li>Terzo contenuto</li>
          </ul>
          <span class="steppers-index" aria-hidden="true">2/6</span>
        </div>
      </div>
    </div>
  </div>
</div>

Testo e icone

Le label presenti negli step dell’intestazione possono essere anticipate da un’icona.

Accessibilità delle icone

Nel caso in cui l’icona è semanticamente rilevante e non spiegata dal testo che la segue, occorre:

  • rimuovere aria-hidden="true"
  • aggiungere role="img" sul tag <svg>
  • inserire all’interno il tag <title> con un titolo per l’icona che ne spieghi il significato (nel formato <title>significato icona</title>")
  • Primo contenuto
  • Secondo contenuto
  • Terzo contenuto

1
2
3
4
5
6
7
8
9
10

<div class="steppers">
  <div class="steppers-header">
    <ul>
      <li class="confirmed"><svg class="icon" aria-hidden="true"><use href="/dist/svg/sprites.svg#it-calendar"></use></svg>Primo contenuto <svg class="icon steppers-success" aria-hidden="true"><use href="/dist/svg/sprites.svg#it-check"></use></svg><span class="visually-hidden">Confermato</span></li>
      <li class="active"><svg class="icon" aria-hidden="true"><use href="/dist/svg/sprites.svg#it-lock"></use></svg>Secondo contenuto <span class="visually-hidden">Attivo</span></li>
      <li><svg class="icon" aria-hidden="true"><use href="/dist/svg/sprites.svg#it-settings"></use></svg>Terzo contenuto</li>
    </ul>
    <span class="steppers-index" aria-hidden="true">2/6</span>
  </div>
</div>

Testo e numeri

Le label presenti negli steps dell’header possono essere anticipate dal numero ordinale relativo allo stesso. Come mostrato nell’esempio, nel caso di uno step completato al posto del numero deve essere inclusa un’icona di conferma con un testo riservato agli screen reader.

  • Primo contenuto
  • 2Secondo contenuto
  • 3Terzo contenuto

1
2
3
4
5
6
7
8
9
10

<div class="steppers">
  <div class="steppers-header">
    <ul>
      <li class="confirmed"><span class="steppers-number"><svg class="icon steppers-success" aria-hidden="true"><use href="/dist/svg/sprites.svg#it-check"></use></svg><span class="visually-hidden">Confermato</span></span>Primo contenuto</li>
      <li class="active"><span class="steppers-number"><span class="visually-hidden">Step </span>2</span>Secondo contenuto <span class="visually-hidden">Attivo</span></li>
      <li><span class="steppers-number"><span class="visually-hidden">Step </span>3</span>Terzo contenuto</li>
    </ul>
    <span class="steppers-index" aria-hidden="true"><span>1</span> <span class="active">2</span> <span>3</span> <span>4</span></span>
  </div>
</div>

I pulsanti “Avanti” e “Indietro” dovranno essere utilizzati per implementare la logica di navigazione degli Steppers nelle web app e sono dotati di classi .steppers-btn-prev e .steppers-btn-next.

Il passaggio da uno step all’altro attraverso i pulsanti contenuti in .steppers-nav determina un cambiamento del contenuto presente in .steppers-content.

Accessibilità

Nel caso si stia sviluppando una Single page application oppure una sequenza di step in AJAX il contenitore .steppers-content dovrebbe avere un attributo ARIA aria-live="polite" per avvisare gli utilizzatori di screen reader dall’avvenuto cambiamento del contenuto.

Indicatori di progresso

La versione mobile degli Steppers non visualizza l’elenco completo degli step disponibili, ma solo quello corrente. Per questa ragione è possibile aggiungere degli indicatori di progresso allo .steppers-nav.

Questi indicatori sono visualizzati solo su mobile, ma nei seguenti esempi sono stati resi disponibili anche nella visualizzazione desktop.

Progress bar

La Progress bar è quella nativa di Bootstrap 5 ed è contenuta in un elemento .steppers-progress situato fra i pulsanti “Indietro” ed “Avanti”.

Contenuto di esempio dello step corrente

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<div class="steppers mobile-examples">
  <div class="steppers-content" aria-live="polite">
    <!-- Esempio START -->
    <p>Contenuto di esempio dello step corrente</p>
    <!-- Esempio END -->
  </div>
  <nav class="steppers-nav">
    <button type="button" class="btn btn-icon btn-outline-primary btn-sm steppers-btn-prev"><svg class="icon icon-sm icon-primary"><use href="/dist/svg/sprites.svg#it-chevron-left"></use></svg>Indietro</button>
    <div class="steppers-progress">
      <div class="progress">
        <div class="progress-bar" role="progressbar" style="width: 33%" aria-valuenow="33" aria-valuemin="0" aria-valuemax="100"></div>
      </div>
    </div>
    <button type="button" class="btn btn-icon btn-primary btn-sm steppers-btn-next">Avanti<svg class="icon icon-sm icon-inverse"><use href="/dist/svg/sprites.svg#it-chevron-right"></use></svg></button>
  </nav>
</div>

Pallini

I pallini sono elementi <li> contenuti in una lista .steppers-dots situato fra i pulsanti “Indietro” e “Avanti”.

Accessibilità liste

Per ragioni di accessibilità, i <li> devono contenere uno <span> con classe .visually-hidden riservato agli screen reader con un testo indicante il numero di step e lo stato.

Contenuto di esempio dello step corrente

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<div class="steppers mobile-examples">
  <div class="steppers-content" aria-live="polite">
    <!-- Esempio START -->
    <p>Contenuto di esempio dello step corrente</p>
    <!-- Esempio END -->
  </div>
  <nav class="steppers-nav">
    <button type="button" class="btn btn-icon btn-outline-primary btn-sm steppers-btn-prev"><svg class="icon icon-sm icon-primary"><use href="/dist/svg/sprites.svg#it-chevron-left"></use></svg>Indietro</button>
    <ul class="steppers-dots">
      <li class="done"><span class="visually-hidden">Step 1 di 6 - Confermato</span></li>
      <li class="done"><span class="visually-hidden">Step 2 di 6 - Confermato</span></li>
      <li class="done"><span class="visually-hidden">Step 3 di 6 - Confermato</span></li>
      <li><span class="visually-hidden">Step 4 di 6</span></li>
      <li><span class="visually-hidden">Step 5 di 6</span></li>
      <li><span class="visually-hidden">Step 6 di 6</span></li>
    </ul>
    <button type="button" class="btn btn-icon btn-primary btn-sm steppers-btn-next">Avanti<svg class="icon icon-sm icon-inverse"><use href="/dist/svg/sprites.svg#it-chevron-right"></use></svg></button>
  </nav>
</div>

Salva

È possibile inserire un pulsante “Salva” all’interno di un elemento con classe .steppers-save. Il pulsante è posizionato a destra su dispositivi desktop e a sinistra su dispositivi mobili, in uno spazio che prevede anche un testo di supporto.

Contenuto di esempio dello step corrente

Vuoi salvare il progresso?

Potrai riprendere il flusso da questo punto in poi.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<div class="steppers mobile-examples">
  <div class="steppers-content" aria-live="polite">
    <!-- Esempio START -->
    <p>Contenuto di esempio dello step corrente</p>
    <!-- Esempio END -->
  </div>
  <nav class="steppers-nav">
    <button type="button" class="btn btn-icon btn-outline-primary btn-sm steppers-btn-prev"><svg class="icon icon-sm icon-primary"><use href="/dist/svg/sprites.svg#it-chevron-left"></use></svg>Indietro</button>
    <button type="button" class="btn btn-icon btn-primary btn-sm steppers-btn-next">Avanti<svg class="icon icon-sm icon-inverse"><use href="/dist/svg/sprites.svg#it-chevron-right"></use></svg></button>
  </nav>
  <div class="steppers-save d-flex border-top border-subtle pt-3 mt-2">
    <div class="text-lg-end mb-2 mb-lg-0 me-lg-3">
      <p class="text-muted mb-0 small"><strong>Vuoi salvare il progresso?</strong></p>
      <p class="text-muted mb-0 small">Potrai riprendere il flusso da questo punto in poi.</p>
    </div>
    <button type="button" class="btn btn-outline-secondary btn-sm">Salva</button>
  </div>
</div>

Conferma

Su dispositivi mobili è possibile sostituire il pulsante “Avanti” con un pulsante “Conferma” di stile differente, con la classe .steppers-btn-confirm.

Contenuto di esempio dello step corrente

1
2
3
4
5
6
7
8
9
10
11

<div class="steppers mobile-examples">
  <div class="steppers-content" aria-live="polite">
    <!-- Esempio START -->
    <p>Contenuto di esempio dello step corrente</p>
    <!-- Esempio END -->
  </div>
  <nav class="steppers-nav">
    <button type="button" class="btn btn-icon btn-outline-primary btn-sm steppers-btn-prev"><svg class="icon icon-sm icon-primary"><use href="/dist/svg/sprites.svg#it-chevron-left"></use></svg>Indietro</button>
    <button type="button" class="btn btn-icon btn-primary btn-sm steppers-btn-confirm">Conferma</button>
  </nav>
</div>

Versione su sfondo scuro

Per ottenere una versione scura degli Stepper è sufficiente aggiungere la classe .bg-dark al contenitore principale.

  • Primo contenuto
  • Secondo contenuto
  • Terzo contenuto

Contenuto di esempio dello step corrente

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<div class="steppers bg-dark">
  <div class="steppers-header">
    <ul>
      <li class="confirmed">Primo contenuto <svg class="icon steppers-success" aria-hidden="true"><use href="/dist/svg/sprites.svg#it-check"></use></svg><span class="visually-hidden">Confermato</span></li>
      <li class="active">Secondo contenuto <span class="visually-hidden">Attivo</span></li>
      <li>Terzo contenuto</li>
    </ul>
    <span class="steppers-index" aria-hidden="true">2/6</span>
  </div>
  <div class="steppers-content" aria-live="polite">
    <!-- Esempio START -->
    <p>Contenuto di esempio dello step corrente</p>
    <!-- Esempio END -->
  </div>
  <nav class="steppers-nav">
    <button type="button" class="btn btn-icon btn-outline-primary btn-sm steppers-btn-prev"><svg class="icon icon-sm icon-inverse"><use href="/dist/svg/sprites.svg#it-chevron-left"></use></svg>Indietro</button>
    <button type="button" class="btn btn-icon btn-outline-primary btn-sm steppers-btn-next">Avanti<svg class="icon icon-sm icon-inverse"><use href="/dist/svg/sprites.svg#it-chevron-right"></use></svg></button>
  </nav>
</div>

Varianti intestazione

  • Primo contenuto
  • Secondo contenuto
  • Terzo contenuto
  • Primo contenuto
  • Secondo contenuto
  • Terzo contenuto
  • Primo contenuto
  • 2Secondo contenuto
  • 3Terzo contenuto

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

<!-- Solo testo -->
<div class="steppers bg-dark">
  <div class="steppers-header">
    <ul>
      <li class="confirmed">Primo contenuto <svg class="icon steppers-success" aria-hidden="true"><use href="/dist/svg/sprites.svg#it-check"></use></svg><span class="visually-hidden">Confermato</span></li>
      <li class="active">Secondo contenuto <span class="visually-hidden">Attivo</span></li>
      <li>Terzo contenuto</li>
    </ul>
    <span class="steppers-index" aria-hidden="true">2/6</span>
  </div>
</div>

<!-- Testo e icone -->
<div class="steppers bg-dark">
  <div class="steppers-header">
    <ul>
      <li class="confirmed"><svg class="icon" aria-hidden="true"><use href="/dist/svg/sprites.svg#it-calendar"></use></svg>Primo contenuto <svg class="icon steppers-success" aria-hidden="true"><use href="/dist/svg/sprites.svg#it-check"></use></svg><span class="visually-hidden">Confermato</span></li>
      <li class="active"><svg class="icon" aria-hidden="true"><use href="/dist/svg/sprites.svg#it-lock"></use></svg>Secondo contenuto <span class="visually-hidden">Attivo</span></li>
      <li><svg class="icon" aria-hidden="true"><use href="/dist/svg/sprites.svg#it-settings"></use></svg>Terzo contenuto</li>
    </ul>
    <span class="steppers-index" aria-hidden="true">2/6</span>
  </div>
</div>

<!-- Numeri -->
<div class="steppers bg-dark">
  <div class="steppers-header">
    <ul>
      <li class="confirmed"><span class="steppers-number"><svg class="icon steppers-success" aria-hidden="true"><use href="/dist/svg/sprites.svg#it-check"></use></svg><span class="visually-hidden">Confermato Step 1</span></span>Primo contenuto</li>
      <li class="active"><span class="steppers-number"><span class="visually-hidden">Attivo Step </span>2</span>Secondo contenuto</li>
      <li><span class="steppers-number"><span class="visually-hidden">Step </span>3</span>Terzo contenuto</li>
    </ul>
    <span class="steppers-index" aria-hidden="true"><span>1</span> <span class="active">2</span> <span>3</span> <span>4</span></span>
  </div>
</div>

Properties

Il selettore da utilizzare per le sovrascrittura delle property è .steppers. La descrizione delle custom properties è in inglese perché risiede nei files .scss dei componenti.

Properties statiche

Variabile CSS Descrizione (Inglese) Valore predefinito
--bsi-stepper-active-indicator-height Controls the stepper active indicator height. 2px
--bsi-stepper-dot-gap Controls the stepper dot gap. 8px
--bsi-stepper-dot-size Controls the stepper dot size. 4px
--bsi-stepper-font-size Controls the stepper font size, using typography tokens. var(--bsi-label-font-size-l)
--bsi-stepper-icon-size Controls the stepper icon size, using icon tokens. var(--bsi-icon-size-m)
--bsi-stepper-index-font-size Controls the stepper index font size, using typography tokens. var(--bsi-label-font-size-s)
--bsi-stepper-item-background Controls the stepper item background. var(--bsi-stepper-background)
--bsi-stepper-nav-height Controls the stepper nav height. 64px
--bsi-stepper-number-size Controls the stepper number size. 2rem
--bsi-stepper-progress-height Controls the stepper progress height. 2px
--bsi-stepper-spacing-x Controls the stepper spacing x, using spacing tokens. var(--bsi-spacing-xs)
--bsi-stepper-spacing-y Controls the stepper spacing y, using spacing tokens. var(--bsi-spacing-s)

Properties dinamiche

Nella colonna "Valore predefinito" è possibile trovare, oltre al valore di base, un’indicazione delle eventuali varianti responsive/tema/stato della property stessa: fare riferimento ai file elencati nella colonna "File SCSS" per il dettaglio dei valori e del contesto di applicazione.

Variabile CSS Descrizione (Inglese) Valore predefinito File SCSS
--bsi-stepper-index-color Controls the stepper index color, using color tokens. var(--bsi-color-text-secondary) +1 _steppers.scss
--bsi-stepper-background Controls the stepper background. transparent +1 _steppers.scss
--bsi-stepper-border-color Controls the stepper border color, using color tokens. var(--bsi-color-border-subtle) +1 _steppers.scss
--bsi-stepper-dot-color Controls the stepper dot color, using color tokens. var(--bsi-color-background-subtle) +1 _steppers.scss
--bsi-stepper-icon-color Controls the stepper icon color. var(--bsi-stepper-item-text-color) +1 _steppers.scss
--bsi-stepper-icon-confirmed Controls the stepper icon confirmed, using icon tokens. var(--bsi-icon-success) +1 _steppers.scss
--bsi-stepper-item-border-color-active Controls the stepper item border color active, using color tokens. var(--bsi-color-border-primary) +1 _steppers.scss
--bsi-stepper-item-text-color Controls the stepper item text color, using color tokens. var(--bsi-color-text-muted) +4 _steppers.scss
--bsi-stepper-number-border-color Controls the stepper number border color, using color tokens. var(--bsi-color-border-subtle) +3 _steppers.scss
--bsi-stepper-number-color Controls the stepper number color, using color tokens. var(--bsi-color-text-muted) +3 _steppers.scss

Breaking change

  • Rimossa la classe .no-line per nascondere il bordo inferiore azzurro.
  • Aggiunta la classe .btn-icon ai pulsanti “Indietro” e “Avanti”.
  • Il pulsante “Avanti” è sempre un .btn-primary.
  • Modificata la posizione del pulsante “Salva”, ora posizionato in un righe a sé stante.

L’elemento con classe .steppers-index adesso è diventato uno <span> collocato fuori dalla lista <ul>.

Gli elementi di tipo <svg> non interattivi necessitano dell’aggiunta di aria-hidden="true".