Aksesibilitas
Tinjauan singkat tentang fitur dan batasan Bootstrap untuk pembuatan konten yang dapat diakses.
Bootstrap menyediakan kerangka kerja gaya siap pakai, alat tata letak, dan komponen interaktif yang mudah digunakan, memungkinkan pengembang untuk membuat situs web dan aplikasi yang menarik secara visual, kaya fungsi, dan dapat diakses secara langsung.
Aksesibilitas keseluruhan dari setiap proyek yang dibangun dengan Bootstrap sebagian besar bergantung pada markup penulis, gaya tambahan, dan skrip yang mereka sertakan. Namun, asalkan ini telah diterapkan dengan benar, akan sangat mungkin untuk membuat situs web dan aplikasi dengan Bootstrap yang memenuhi WCAG 2.0 (A/AA/AAA), Bagian 508 dan standar serta persyaratan aksesibilitas serupa.
Penataan dan tata letak bootstrap dapat diterapkan ke berbagai struktur markup. Dokumentasi ini bertujuan untuk memberikan contoh praktik terbaik kepada pengembang untuk mendemonstrasikan penggunaan Bootstrap itu sendiri dan menggambarkan markup semantik yang sesuai, termasuk cara-cara di mana masalah aksesibilitas potensial dapat diatasi.
Komponen interaktif Bootstrap—seperti dialog modal, menu tarik-turun, dan tip alat khusus—dirancang untuk bekerja untuk pengguna sentuh, mouse, dan keyboard. Melalui penggunaan peran dan atribut WAI - ARIA yang relevan , komponen ini juga harus dapat dipahami dan dapat dioperasikan menggunakan teknologi bantu (seperti pembaca layar).
Karena komponen Bootstrap sengaja dirancang agar cukup umum, penulis mungkin perlu menyertakan peran dan atribut ARIA lebih lanjut , serta perilaku JavaScript, untuk menyampaikan sifat dan fungsionalitas komponen mereka secara lebih akurat. Ini biasanya dicatat dalam dokumentasi.
Sebagian besar warna yang saat ini membentuk palet default Bootstrap—digunakan di seluruh kerangka kerja untuk hal-hal seperti variasi tombol, variasi peringatan, indikator validasi formulir—mengakibatkan kontras warna yang tidak mencukupi (di bawah rasio kontras warna WCAG 2.0 yang direkomendasikan sebesar 4,5:1 ) saat digunakan melawan latar belakang yang terang. Penulis perlu memodifikasi/memperluas warna default ini secara manual untuk memastikan rasio kontras warna yang memadai.
Konten yang seharusnya tersembunyi secara visual, tetapi tetap dapat diakses oleh teknologi bantu seperti pembaca layar, dapat ditata menggunakan .sr-onlykelas. Ini dapat berguna dalam situasi di mana informasi atau isyarat visual tambahan (seperti makna yang ditunjukkan melalui penggunaan warna) perlu juga disampaikan kepada pengguna non-visual.
<p class="text-danger">
<span class="sr-only">Danger: </span>
This action is not reversible
</p>Untuk kontrol interaktif yang tersembunyi secara visual, seperti tautan "lewati" tradisional, .sr-onlydapat digabungkan dengan .sr-only-focusablekelas. Ini akan memastikan bahwa kontrol menjadi terlihat setelah difokuskan (untuk pengguna keyboard yang dapat melihat).
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>Bootstrap menyertakan dukungan untuk prefers-reduced-motionfitur media . Di browser/lingkungan yang memungkinkan pengguna untuk menentukan preferensi mereka untuk mengurangi gerakan, sebagian besar efek transisi CSS di Bootstrap (misalnya, ketika dialog modal dibuka atau ditutup) akan dinonaktifkan. Saat ini, dukungan terbatas pada Safari di macOS dan iOS.