Accessibility
Usa ka mubo nga kinatibuk-ang pagtan-aw sa mga bahin sa Bootstrap ug mga limitasyon alang sa paghimo sa ma-access nga sulud.
Naghatag ang Bootstrap og usa ka dali gamiton nga balangkas sa andam na nga mga istilo, kahimanan sa layout, ug mga interactive nga sangkap, nga gitugotan ang mga developer sa paghimo og mga website ug aplikasyon nga makapadani sa panan-aw, dato nga magamit, ug ma-access sa gawas sa kahon.
Overview ug mga limitasyon
Ang kinatibuk-ang accessibility sa bisan unsang proyekto nga gitukod gamit ang Bootstrap nagdepende sa dakong bahin sa markup sa tagsulat, dugang nga estilo, ug scripting nga ilang gilakip. Bisan pa, kung kini gipatuman sa husto, kinahanglan nga hingpit nga posible ang paghimo sa mga website ug aplikasyon nga adunay Bootstrap nga nagtuman sa WCAG 2.1 (A/AA/AAA), Seksyon 508 , ug parehas nga mga sumbanan ug kinahanglanon sa pagka-access.
Structural markup
Ang estilo ug layout sa Bootstrap mahimong magamit sa usa ka halapad nga mga istruktura sa markup. Kini nga dokumentasyon nagtumong sa paghatag sa mga developers sa pinakamaayong praktis nga mga ehemplo aron ipakita ang paggamit sa Bootstrap mismo ug iilustrar ang tukma nga semantic markup, lakip ang mga paagi diin ang posibleng mga problema sa accessibility mahimong matubag.
Interactive nga mga sangkap
Ang mga interactive nga sangkap sa Bootstrap—sama sa modal dialogs, dropdown menus, ug custom tooltips—gidisenyo aron magamit sa mga tiggamit sa paghikap, mouse, ug keyboard. Pinaagi sa paggamit sa mga may kalabutan nga WAI - ARIA nga mga tahas ug mga hiyas, kini nga mga sangkap kinahanglan usab nga masabtan ug magamit gamit ang mga teknolohiya nga makatabang (sama sa mga magbabasa sa screen).
Tungod kay ang mga sangkap sa Bootstrap gituyo nga gidesinyo aron mahimong medyo generic, ang mga tagsulat mahimong kinahanglan nga maglakip sa dugang nga mga tahas ug mga kinaiya sa ARIA , ingon man ang pamatasan sa JavaScript, aron mas tukma nga ipahayag ang tukma nga kinaiyahan ug gamit sa ilang sangkap. Kasagaran kini makita sa dokumentasyon.
Ang kalainan sa kolor
Ang pipila ka mga kombinasyon sa mga kolor nga sa pagkakaron naglangkob sa default palette sa Bootstrap—gigamit sa tibuok framework para sa mga butang sama sa mga variation sa butones, mga variation sa alerto, mga indikasyon sa pag-validate sa porma—mahimong mosangpot sa dili igo nga kalainan sa kolor (ubos sa girekomendar nga WCAG 2.1 nga text color contrast ratio nga 4.5:1 ug ang WCAG 2.1 non-text color contrast ratio nga 3:1 ), ilabina kon gamiton batok sa kahayag nga background. Giawhag ang mga tagsulat nga sulayan ang ilang piho nga paggamit sa kolor ug, kung gikinahanglan, mano-mano nga usbon / palawigon kini nga mga default nga mga kolor aron masiguro ang igo nga mga ratio sa kalainan sa kolor.
Makita nga tinago nga sulud
Ang sulud nga kinahanglan nga makita nga gitago, apan magpabilin nga magamit sa mga makatabang nga teknolohiya sama sa mga magbabasa sa screen, mahimong i-istilo gamit ang .visually-hidden
klase. Mahimong mapuslanon kini sa mga sitwasyon diin ang dugang nga biswal nga impormasyon o mga pahibalo (sama sa kahulogan nga gipaila pinaagi sa paggamit sa kolor) kinahanglan usab nga ipaabot ngadto sa dili biswal nga tiggamit.
<p class="text-danger">
<span class="visually-hidden">Danger: </span>
This action is not reversible
</p>
Para sa visually hidden interactive controls, sama sa tradisyonal nga “skip” links, gamita ang .visually-hidden-focusable
klase. Kini makasiguro nga ang kontrol mahimong makita sa higayon nga naka-focus (alang sa makita nga mga tiggamit sa keyboard). Pagbantay, kung itandi sa katumbas .sr-only
ug .sr-only-focusable
mga klase sa nangaging mga bersyon, ang Bootstrap 5's .visually-hidden-focusable
usa ka standalone nga klase, ug kinahanglan dili gamiton sa kombinasyon sa .visually-hidden
klase.
<a class="visually-hidden-focusable" href="#content">Skip to main content</a>
Pagkunhod sa paglihok
Ang Bootstrap naglakip sa suporta alang sa prefers-reduced-motion
bahin sa media . Sa browsers/environments nga nagtugot sa user sa pagtino sa ilang gusto alang sa pagkunhod sa motion, kadaghanan sa CSS transition effects sa Bootstrap (pananglitan, kung ang modal dialog giablihan o gisirado, o ang sliding animation sa carousels) ma-disable, ug makahuluganon nga mga animation ( sama sa mga spinner) mohinay.
Sa mga browser nga nagsuporta prefers-reduced-motion
, ug kung diin ang user wala klaro nga nagsenyas nga gusto nila ang pagkunhod sa paglihok (pananglitan kung asa prefers-reduced-motion: no-preference
), ang Bootstrap makahimo sa hapsay nga pag-scroll gamit ang scroll-behavior
kabtangan.
Dugang nga mga kapanguhaan
- Web Content Accessibility Guidelines (WCAG) 2.1
- Ang A11Y Project
- Dokumentasyon sa accessibility sa MDN
- Tenon.io Accessibility Checker
- Colour Contrast Analyzer (CCA)
- "HTML Codesniffer" bookmarklet para sa pag-ila sa mga isyu sa accessibility
- Microsoft Accessibility Insights
- Mga himan sa pagsulay sa Deque Ax
- Pasiuna sa Web Accessibility