Accessibilità
Una breve panoramica delle funzionalità e delle limitazioni di Bootstrap per la creazione di contenuti accessibili.
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.
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.0 (A/AA/AAA), Sezione 508 e standard e requisiti di accessibilità simili.
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à.
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.
La maggior parte dei colori che attualmente costituiscono la tavolozza predefinita di Bootstrap, utilizzati in tutto il framework per cose come variazioni di pulsanti, variazioni di avviso, indicatori di convalida dei moduli, portano a un contrasto cromatico insufficiente (al di sotto del rapporto di contrasto cromatico WCAG 2.0 consigliato di 4,5:1 ) se utilizzato contro uno sfondo chiaro. Gli autori dovranno 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 .sr-onlyclasse. 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="sr-only">Danger: </span>
This action is not reversible
</p>Per i controlli interattivi visivamente nascosti, come i tradizionali collegamenti "salta", .sr-onlypossono essere combinati con la .sr-only-focusableclasse. Ciò garantirà che il controllo diventi visibile una volta messo a fuoco (per gli utenti vedenti della tastiera).
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>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 una finestra di dialogo modale viene aperta o chiusa) sarà disabilitata. Attualmente, il supporto è limitato a Safari su macOS e iOS.