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.
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 tersembunyi secara visual
Konten yang seharusnya tersembunyi secara visual, tetapi tetap dapat diakses oleh teknologi bantu seperti pembaca layar, dapat ditata menggunakan .visually-hidden
kelas. 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-focusable
kelas. Ini akan memastikan bahwa kontrol menjadi terlihat setelah difokuskan (untuk pengguna keyboard yang dapat melihat). Hati-hati, dibandingkan dengan yang setara .sr-only
dan .sr-only-focusable
kelas di versi sebelumnya, Bootstrap 5 .visually-hidden-focusable
adalah kelas yang berdiri sendiri, dan tidak boleh digunakan dalam kombinasi dengan .visually-hidden
kelas.
<a class="visually-hidden-focusable" href="#content">Skip to main content</a>
Gerakan berkurang
Bootstrap includes support for the prefers-reduced-motion
media feature. In browsers/environments that allow the user to specify their preference for reduced motion, most CSS transition effects in Bootstrap (for instance, when a modal dialog is opened or closed, or the sliding animation in carousels) will be disabled, and meaningful animations (such as spinners) will be slowed down.
On browsers that support prefers-reduced-motion
, and where the user has not explicitly signaled that they’d prefer reduced motion (i.e. where prefers-reduced-motion: no-preference
), Bootstrap enables smooth scrolling using the scroll-behavior
property.
Additional resources
- Web Content Accessibility Guidelines (WCAG) 2.1
- The A11Y Project
- MDN accessibility documentation
- Tenon.io Accessibility Checker
- Color Contrast Analyser (CCA)
- Bookmarklet “HTML Codesniffer” untuk mengidentifikasi masalah aksesibilitas
- Wawasan Aksesibilitas Microsoft
- Alat pengujian Deque Axe
- Pengantar Aksesibilitas Web