Aksesibilitas

Ringkesan ringkes babagan fitur lan watesan Bootstrap kanggo nggawe konten sing bisa diakses.

Ing kaca iki

Bootstrap nyedhiyakake kerangka kerja sing gampang digunakake kanggo gaya sing wis digawe, alat tata letak, lan komponen interaktif, ngidini pangembang nggawe situs web lan aplikasi sing katon apik, kaya fungsional, lan bisa diakses metu saka kothak.

Ringkesan lan watesan

Aksesibilitas sakabèhé saka proyek apa wae sing dibangun nganggo Bootstrap gumantung saka markup penulis, gaya tambahan, lan skrip sing wis dilebokake. Nanging, yen iki wis dileksanakake kanthi bener, mesthine bisa nggawe situs web lan aplikasi kanthi Bootstrap sing cocog karo WCAG 2.1 (A/AA/AAA), Bagian 508 , lan standar lan syarat aksesibilitas sing padha.

Markup struktural

Gaya lan tata letak Bootstrap bisa ditrapake ing macem-macem struktur markup. Dokumentasi iki nduweni tujuan kanggo nyedhiyakake conto praktik paling apik kanggo pangembang kanggo nduduhake panggunaan Bootstrap dhewe lan nggambarake markup semantik sing cocog, kalebu cara kanggo ngatasi masalah aksesibilitas potensial.

Komponen interaktif

Komponen interaktif Bootstrap—kayata dialog modal, menu gulung mudhun, lan tooltip khusus—dirancang kanggo pangguna tutul, mouse, lan keyboard. Liwat panggunaan peran lan atribut WAI - ARIA sing relevan , komponen kasebut uga kudu dingerteni lan bisa digunakake kanthi nggunakake teknologi bantu (kayata pembaca layar).

Amarga komponen Bootstrap sengaja dirancang kanggo umum, penulis bisa uga kudu nyakup peran lan atribut ARIA luwih akeh , uga prilaku JavaScript, supaya bisa nuduhake sifat lan fungsi komponen sing luwih akurat. Iki biasane dicathet ing dokumentasi.

Kontras warna

Sawetara kombinasi warna sing saiki dadi palet standar Bootstrap-digunakake ing saindhenging kerangka kanggo macem-macem kayata variasi tombol, variasi tandha, indikator validasi formulir-bisa nyebabake kontras warna sing ora cukup (ing rasio kontras warna teks WCAG 2.1 sing disaranake yaiku 4.5:1. lan rasio kontras warna non-teks WCAG 2.1 3:1 ), utamane yen digunakake ing latar mburi sing padhang. Penulis dianjurake kanggo nyoba nggunakake warna sing spesifik lan, yen perlu, ngowahi / ngluwihi warna standar kasebut kanthi manual kanggo njamin rasio kontras warna sing nyukupi.

Konten sing kudu didhelikake kanthi visual, nanging tetep bisa diakses dening teknologi bantu kayata pembaca layar, bisa ditata nganggo .visually-hiddenkelas. Iki bisa migunani ing kahanan ing ngendi informasi visual tambahan utawa isyarat (kayata makna dilambangake liwat nggunakake werna) uga kudu dikirim menyang pangguna non-visual.

<p class="text-danger">
  <span class="visually-hidden">Danger: </span>
  This action is not reversible
</p>

Kanggo kontrol interaktif sing didhelikake kanthi visual, kayata pranala "skip" tradisional, gunakake .visually-hidden-focusablekelas kasebut. Iki bakal mesthekake yen kontrol dadi katon yen fokus (kanggo pangguna keyboard katon). Awas, dibandhingake karo sing padha .sr-onlylan .sr-only-focusablekelas ing versi kepungkur, Bootstrap 5 .visually-hidden-focusableminangka kelas mandiri, lan ora kudu digunakake ing kombinasi karo .visually-hiddenkelas kasebut.

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

Gerakan suda

Bootstrap kalebu dhukungan kanggo prefers-reduced-motionfitur media . Ing browser/lingkungan sing ngidini pangguna nemtokake pilihan kanggo gerakan suda, efek transisi CSS paling akeh ing Bootstrap (contone, nalika dialog modal dibukak utawa ditutup, utawa animasi geser ing carousel) bakal dipateni, lan animasi sing migunani ( kayata spinners) bakal kalem mudhun.

Ing browser sing ndhukung prefers-reduced-motion, lan ing ngendi pangguna durung menehi tandha kanthi jelas yen dheweke luwih seneng nyuda gerakan (yaiku ing ngendi prefers-reduced-motion: no-preference), Bootstrap ngidini nggulung kanthi lancar nggunakake scroll-behaviorproperti kasebut.