Kebolehcapaian

Gambaran keseluruhan ringkas tentang ciri dan had Bootstrap untuk penciptaan kandungan yang boleh diakses.

Pada halaman ini

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 yang sepatutnya tersembunyi secara visual, tetapi kekal boleh diakses oleh teknologi bantuan seperti pembaca skrin, boleh digayakan menggunakan .visually-hiddenkelas. 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-focusablekelas. Ini akan memastikan bahawa kawalan menjadi kelihatan apabila difokuskan (untuk pengguna papan kekunci yang kelihatan). Berhati-hati, berbanding kelas yang setara .sr-onlydan .sr-only-focusabledalam versi terdahulu, Bootstrap 5 .visually-hidden-focusableialah kelas kendiri, dan tidak boleh digunakan dalam kombinasi dengan .visually-hiddenkelas.

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

Pergerakan berkurangan

Bootstrap termasuk sokongan untuk prefers-reduced-motionciri 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-behaviorharta tersebut.