Aksesibilitas

Tinjauan singkat tentang fitur dan batasan Bootstrap untuk pembuatan konten yang dapat diakses.

Di halaman ini

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.

Ikhtisar dan batasan

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.1 (A/AA/AAA), Bagian 508 , dan standar serta persyaratan aksesibilitas serupa.

Markup struktural

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

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.

Kontras warna

Beberapa kombinasi warna yang saat ini membentuk palet default Bootstrap—digunakan di seluruh kerangka kerja untuk hal-hal seperti variasi tombol, variasi peringatan, indikator validasi formulir—dapat menyebabkan kontras warna yang tidak memadai (di bawah rasio kontras warna teks WCAG 2.1 yang direkomendasikan 4,5:1 dan rasio kontras warna non-teks WCAG 2.1 3:1 ), terutama bila digunakan dengan latar belakang terang. Penulis didorong untuk menguji penggunaan warna khusus mereka dan, jika 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 .visually-hiddenkelas. 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="visually-hidden">Danger: </span>
  This action is not reversible
</p>

Untuk kontrol interaktif yang tersembunyi secara visual, seperti tautan "lewati" tradisional, gunakan .visually-hidden-focusablekelas. Ini akan memastikan bahwa kontrol menjadi terlihat setelah difokuskan (untuk pengguna keyboard yang dapat melihat). Hati-hati, dibandingkan dengan yang setara .sr-onlydan .sr-only-focusablekelas di versi sebelumnya, Bootstrap 5 .visually-hidden-focusableadalah kelas yang berdiri sendiri, dan tidak boleh digunakan dalam kombinasi dengan .visually-hiddenkelas.

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

Gerakan berkurang

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, atau animasi geser di korsel) akan dinonaktifkan, dan animasi yang bermakna ( seperti pemintal) akan diperlambat.

Pada browser yang mendukung prefers-reduced-motion, dan di mana pengguna belum secara eksplisit memberi isyarat bahwa mereka lebih suka mengurangi gerakan (yaitu di mana prefers-reduced-motion: no-preference), Bootstrap memungkinkan pengguliran yang mulus menggunakan scroll-behaviorproperti.