Source

Accessibility

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

Nagbibigay ang Bootstrap ng madaling gamitin na balangkas ng mga istilong handa na, mga tool sa layout, at mga interactive na bahagi, na nagbibigay-daan 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 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.0 (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 paggamit mismo 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

Karamihan sa 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, variation ng alerto, mga indicator ng validation ng form—ay humahantong sa hindi sapat na contrast ng kulay (sa ibaba ng inirerekomendang WCAG 2.0 color contrast ratio na 4.5:1 ) kapag ginamit laban sa isang liwanag na background. Kakailanganin ng mga may-akda na manu-manong baguhin/palawigin 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 .sr-onlyklase. 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="sr-only">Danger: </span>
  This action is not reversible
</p>

Para sa mga visual na nakatagong interactive na kontrol, tulad ng tradisyonal na "laktawan" na mga link, .sr-onlyay maaaring isama sa .sr-only-focusableklase. Titiyakin nito na ang kontrol ay makikita kapag nakatutok (para sa mga nakikitang gumagamit ng keyboard).

<a class="sr-only sr-only-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 nagpapahintulot sa user na tukuyin ang kanilang kagustuhan para sa pinababang paggalaw, ang 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.