Accessibilità

Una breve panoramica delle funzionalità e delle limitazioni di Bootstrap per la creazione di contenuti accessibili.

Su questa pagina

Bootstrap fornisce un framework di facile utilizzo di stili pronti, strumenti di layout e componenti interattivi, consentendo agli sviluppatori di creare siti Web e applicazioni visivamente accattivanti, ricchi di funzionalità e accessibili immediatamente.

Panoramica e limitazioni

L'accessibilità complessiva di qualsiasi progetto creato con Bootstrap dipende in gran parte dal markup dell'autore, dallo stile aggiuntivo e dagli script inclusi. Tuttavia, a condizione che questi siano stati implementati correttamente, dovrebbe essere perfettamente possibile creare siti Web e applicazioni con Bootstrap che soddisfino WCAG 2.1 (A/AA/AAA), Sezione 508 e standard e requisiti di accessibilità simili.

Marcatura strutturale

Lo stile e il layout di Bootstrap possono essere applicati a un'ampia gamma di strutture di markup. Questa documentazione mira a fornire agli sviluppatori esempi di buone pratiche per dimostrare l'uso di Bootstrap stesso e illustrare il markup semantico appropriato, inclusi i modi in cui è possibile affrontare potenziali problemi di accessibilità.

Componenti interattivi

I componenti interattivi di Bootstrap, come finestre di dialogo modali, menu a discesa e descrizioni comandi personalizzate, sono progettati per funzionare con utenti touch, mouse e tastiera. Attraverso l'uso di ruoli e attributi WAI - ARIA pertinenti , questi componenti dovrebbero anche essere comprensibili e utilizzabili utilizzando tecnologie assistive (come lettori di schermo).

Poiché i componenti di Bootstrap sono appositamente progettati per essere abbastanza generici, gli autori potrebbero dover includere ulteriori ruoli e attributi ARIA , oltre al comportamento JavaScript, per trasmettere in modo più accurato la precisa natura e funzionalità del loro componente. Questo di solito è annotato nella documentazione.

Contrasto di colore

Alcune combinazioni di colori che attualmente costituiscono la tavolozza predefinita di Bootstrap, utilizzate in tutto il framework per cose come variazioni dei pulsanti, variazioni degli avvisi, indicatori di convalida dei moduli, possono portare a un contrasto cromatico insufficiente (al di sotto del rapporto di contrasto del colore del testo WCAG 2.1 consigliato di 4,5:1 e il rapporto di contrasto del colore non testuale WCAG 2.1 di 3:1 ), in particolare se utilizzato su uno sfondo chiaro. Gli autori sono incoraggiati a testare i loro usi specifici del colore e, ove necessario, a modificare/estendere manualmente questi colori predefiniti per garantire rapporti di contrasto cromatici adeguati.

I contenuti che dovrebbero essere nascosti visivamente, ma che rimangono accessibili alle tecnologie assistive come i lettori di schermo, possono essere stilizzati utilizzando la .visually-hiddenclasse. Ciò può essere utile in situazioni in cui è necessario trasmettere informazioni o segnali visivi aggiuntivi (come il significato indicato dall'uso del colore) anche a utenti non visivi.

<p class="text-danger">
  <span class="visually-hidden">Danger: </span>
  This action is not reversible
</p>

Per i controlli interattivi visivamente nascosti, come i tradizionali collegamenti "salta", usa la .visually-hidden-focusableclasse. Ciò garantirà che il controllo diventi visibile una volta messo a fuoco (per gli utenti vedenti della tastiera). Attenzione, rispetto all'equivalente .sr-onlye .sr-only-focusablealle classi nelle versioni precedenti, Bootstrap 5 .visually-hidden-focusableè una classe autonoma e non deve essere utilizzata in combinazione con la .visually-hiddenclasse.

<a class="visually-hidden-focusable" href="#content">Skip to main content</a>

Movimento ridotto

Bootstrap include il supporto per la prefers-reduced-motionfunzione multimediale . Nei browser/ambienti che consentono all'utente di specificare la propria preferenza per il movimento ridotto, la maggior parte degli effetti di transizione CSS in Bootstrap (ad esempio, quando viene aperta o chiusa una finestra di dialogo modale o l'animazione scorrevole nei caroselli) sarà disabilitata e le animazioni significative ( come gli spinner) sarà rallentato.

Nei browser che supportano prefers-reduced-motione in cui l'utente non ha segnalato esplicitamente che preferirebbe il movimento ridotto (ad esempio dove prefers-reduced-motion: no-preference), Bootstrap consente lo scorrimento fluido utilizzando la scroll-behaviorproprietà.