in English

Accessibility

Isang maikling pangkalahatang-ideya ng mga tampok at limitasyon ng Bootstrap para sa paglikha ng naa-access na nilalaman.

Sa pahinang ito

Nagbibigay ang Bootstrap ng madaling gamitin na balangkas ng mga istilong handa na, mga tool sa layout, at mga interactive na bahagi, na nagpapahintulot sa mga developer na lumikha ng mga website at application na kaakit-akit sa paningin, mayaman sa pagganap, at naa-access sa labas ng kahon.

Pangkalahatang-ideya at mga limitasyon

Ang pangkalahatang pagiging naa-access ng anumang proyekto na binuo gamit ang Bootstrap ay nakasalalay sa malaking bahagi sa markup ng may-akda, karagdagang estilo, at scripting na kanilang isinama. Gayunpaman, sa kondisyon na ang mga ito ay naisakatuparan nang tama, dapat ay ganap na posible na gumawa ng mga website at application na may Bootstrap na tumutupad sa WCAG 2.1 (A/AA/AAA), Seksyon 508 , at katulad na mga pamantayan at kinakailangan sa accessibility.

Structural markup

Maaaring ilapat ang estilo at layout ng Bootstrap sa isang malawak na hanay ng mga istruktura ng markup. Nilalayon ng dokumentasyong ito na magbigay sa mga developer ng mga halimbawa ng pinakamahusay na kasanayan upang ipakita ang mismong paggamit ng Bootstrap at ilarawan ang naaangkop na semantic markup, kabilang ang mga paraan kung saan maaaring matugunan ang mga potensyal na alalahanin sa accessibility.

Mga interactive na bahagi

Ang mga interactive na bahagi ng Bootstrap—gaya ng mga modal dialog, dropdown na menu, at custom na tooltip—ay idinisenyo upang gumana para sa mga gumagamit ng touch, mouse, at keyboard. Sa pamamagitan ng paggamit ng mga nauugnay na tungkulin at katangian ng WAI - ARIA , ang mga bahaging ito ay dapat ding maunawaan at mapapatakbo gamit ang mga pantulong na teknolohiya (tulad ng mga screen reader).

Dahil ang mga bahagi ng Bootstrap ay sadyang idinisenyo upang maging medyo generic, maaaring kailanganin ng mga may-akda na magsama ng higit pang mga tungkulin at katangian ng ARIA , pati na rin ang pag-uugali ng JavaScript, upang mas tumpak na maihatid ang tiyak na katangian at functionality ng kanilang bahagi. Ito ay karaniwang nakasaad sa dokumentasyon.

Contrast ng kulay

Ilang kumbinasyon ng mga kulay na kasalukuyang bumubuo sa default na palette ng Bootstrap—ginagamit sa buong framework para sa mga bagay tulad ng mga variation ng button, mga variation ng alerto, mga indicator ng validation ng form—ay maaaring humantong sa hindi sapat na contrast ng kulay (sa ibaba ng inirerekomendang WCAG 2.1 na contrast ratio ng kulay ng text na 4.5:1 at ang WCAG 2.1 na hindi text na color contrast ratio na 3:1 ), partikular na kapag ginamit laban sa maliwanag na background. Hinihikayat ang mga may-akda na subukan ang kanilang mga partikular na paggamit ng kulay at, kung kinakailangan, manu-manong baguhin/palawakin ang mga default na kulay na ito upang matiyak ang sapat na mga ratio ng contrast ng kulay.

Ang nilalaman na dapat biswal na nakatago, ngunit nananatiling naa-access sa mga pantulong na teknolohiya tulad ng mga screen reader, ay maaaring i-istilo gamit ang .visually-hiddenklase. Ito ay maaaring maging kapaki-pakinabang sa mga sitwasyon kung saan ang karagdagang visual na impormasyon o mga pahiwatig (tulad ng kahulugan na tinukoy sa pamamagitan ng paggamit ng kulay) ay kailangang ihatid din sa mga hindi visual na user.

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

Para sa mga visual na nakatagong interactive na kontrol, gaya ng tradisyonal na "laktawan" na mga link, gamitin ang .visually-hidden-focusableklase. Titiyakin nito na ang kontrol ay makikita kapag nakatutok (para sa mga nakikitang gumagamit ng keyboard). Mag-ingat, kumpara sa katumbas .sr-onlyat mga .sr-only-focusableklase sa mga nakaraang bersyon, ang Bootstrap 5's .visually-hidden-focusableay isang standalone na klase, at hindi dapat gamitin kasama ng .visually-hiddenklase.

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

Nabawasan ang paggalaw

Kasama sa Bootstrap ang suporta para sa prefers-reduced-motiontampok na media . Sa mga browser/environment na nagbibigay-daan sa user na tukuyin ang kanilang kagustuhan para sa pinababang paggalaw, karamihan sa mga transition effect ng CSS sa Bootstrap (halimbawa, kapag ang isang modal dialog ay binuksan o isinara, o ang sliding animation sa mga carousel) ay idi-disable, at ang mga makabuluhang animation ( tulad ng mga spinner) ay mabagal.

Sa mga browser na sumusuporta prefers-reduced-motionsa , at kung saan ang user ay hindi malinaw na nagsenyas na mas gusto nila ang pinababang paggalaw (ibig sabihin kung saan prefers-reduced-motion: no-preference), ang Bootstrap ay nagbibigay-daan sa maayos na pag-scroll gamit ang scroll-behaviorproperty.