Kebolehcapaian
Gambaran keseluruhan ringkas tentang ciri dan had Bootstrap untuk penciptaan kandungan yang boleh diakses.
Bootstrap menyediakan rangka kerja yang mudah digunakan bagi gaya siap sedia, alatan reka letak dan komponen interaktif, membolehkan pembangun mencipta tapak web dan aplikasi yang menarik secara visual, kaya dari segi fungsi dan boleh diakses di luar kotak.
Gambaran keseluruhan dan batasan
Kebolehcapaian keseluruhan bagi mana-mana projek yang dibina dengan Bootstrap sebahagian besarnya bergantung pada penanda pengarang, penggayaan tambahan dan skrip yang telah mereka sertakan. Walau bagaimanapun, dengan syarat ini telah dilaksanakan dengan betul, adalah mungkin untuk membuat tapak web dan aplikasi dengan Bootstrap yang memenuhi WCAG 2.1 (A/AA/AAA), Seksyen 508 dan standard dan keperluan kebolehcapaian yang serupa.
Penanda struktur
Penggayaan dan reka letak Bootstrap boleh digunakan pada pelbagai struktur penanda. Dokumentasi ini bertujuan untuk menyediakan pembangun contoh amalan terbaik untuk menunjukkan penggunaan Bootstrap itu sendiri dan menggambarkan penanda semantik yang sesuai, termasuk cara bagaimana kebimbangan kebolehcapaian yang berpotensi dapat ditangani.
Komponen interaktif
Komponen interaktif Bootstrap—seperti dialog modal, menu lungsur turun dan petua alat tersuai—direka bentuk untuk berfungsi untuk pengguna sentuhan, tetikus dan papan kekunci. Melalui penggunaan peranan dan atribut WAI - ARIA yang berkaitan, komponen ini juga harus difahami dan boleh dikendalikan menggunakan teknologi bantuan (seperti pembaca skrin).
Oleh kerana komponen Bootstrap sengaja direka bentuk untuk menjadi agak generik, pengarang mungkin perlu memasukkan peranan dan atribut ARIA yang lebih lanjut , serta gelagat JavaScript, untuk menyampaikan sifat dan kefungsian komponen mereka dengan lebih tepat. Ini biasanya dinyatakan dalam dokumentasi.
Kontras warna
Beberapa kombinasi warna yang pada masa ini membentuk palet lalai Bootstrap—digunakan di seluruh rangka kerja untuk perkara seperti variasi butang, variasi amaran, penunjuk pengesahan bentuk—mungkin membawa kepada kontras warna yang tidak mencukupi (di bawah nisbah kontras warna teks WCAG 2.1 yang disyorkan iaitu 4.5:1 dan nisbah kontras warna bukan teks WCAG 2.1 3:1 ), terutamanya apabila digunakan pada latar belakang yang terang. Pengarang digalakkan untuk menguji penggunaan warna khusus mereka dan, jika perlu, ubah suai/lanjutkan warna lalai ini secara manual untuk memastikan nisbah kontras warna yang mencukupi.
Kandungan tersembunyi secara visual
Kandungan yang sepatutnya tersembunyi secara visual, tetapi kekal boleh diakses oleh teknologi bantuan seperti pembaca skrin, boleh digayakan menggunakan .visually-hidden
kelas. Ini boleh berguna dalam situasi di mana maklumat visual atau isyarat tambahan (seperti makna yang dilambangkan melalui penggunaan warna) perlu juga disampaikan kepada pengguna bukan visual.
<p class="text-danger">
<span class="visually-hidden">Danger: </span>
This action is not reversible
</p>
Untuk kawalan interaktif tersembunyi secara visual, seperti pautan "langkau" tradisional, gunakan .visually-hidden-focusable
kelas. Ini akan memastikan bahawa kawalan menjadi kelihatan apabila difokuskan (untuk pengguna papan kekunci yang kelihatan). Berhati-hati, berbanding kelas yang setara .sr-only
dan .sr-only-focusable
dalam versi terdahulu, Bootstrap 5 .visually-hidden-focusable
ialah kelas kendiri dan tidak boleh digunakan dalam kombinasi dengan .visually-hidden
kelas.
<a class="visually-hidden-focusable" href="#content">Skip to main content</a>
Pergerakan berkurangan
Bootstrap termasuk sokongan untuk prefers-reduced-motion
ciri media . Dalam penyemak imbas/persekitaran yang membolehkan pengguna menentukan pilihan mereka untuk gerakan yang dikurangkan, kebanyakan kesan peralihan CSS dalam Bootstrap (contohnya, apabila dialog modal dibuka atau ditutup, atau animasi gelongsor dalam karusel) akan dilumpuhkan dan animasi yang bermakna ( seperti pemutar) akan diperlahankan.
Pada penyemak imbas yang menyokong prefers-reduced-motion
, dan di mana pengguna tidak memberi isyarat secara jelas bahawa mereka lebih suka gerakan yang dikurangkan (iaitu di mana prefers-reduced-motion: no-preference
), Bootstrap mendayakan penatalan lancar menggunakan scroll-behavior
harta tersebut.
Sumber tambahan
- Garis Panduan Kebolehcapaian Kandungan Web (WCAG) 2.1
- Projek A11Y
- Dokumentasi kebolehcapaian MDN
- Pemeriksa Kebolehcapaian Tenon.io
- Penganalisis Kontras Warna (CCA)
- Penanda buku “HTML Codesniffer” untuk mengenal pasti isu kebolehaksesan
- Microsoft Accessibility Insights
- Alat ujian Deque Ax
- Pengenalan kepada Kebolehcapaian Web