Prieinamumas

Trumpa „Bootstrap“ funkcijų ir prieinamo turinio kūrimo apribojimų apžvalga.

Šiame puslapyje

„Bootstrap“ suteikia lengvai naudojamą paruoštų stilių, išdėstymo įrankių ir interaktyvių komponentų sistemą, leidžiančią kūrėjams kurti vizualiai patrauklias, funkcionaliai turtingas ir prieinamas svetaines ir programas.

Apžvalga ir apribojimai

Bendras bet kurio projekto, sukurto naudojant „Bootstrap“, prieinamumas daugiausia priklauso nuo autoriaus žymėjimo, papildomo stiliaus ir scenarijų, kuriuos jie įtraukė. Tačiau su sąlyga, kad jos įdiegtos teisingai, turėtų būti visiškai įmanoma sukurti svetaines ir programas naudojant „Bootstrap“, atitinkančias WCAG 2.1 (A/AA/AAA), 508 skirsnį ir panašius prieinamumo standartus bei reikalavimus.

Struktūrinis žymėjimas

„Bootstrap“ stilius ir išdėstymas gali būti pritaikyti įvairioms žymėjimo struktūroms. Šios dokumentacijos tikslas – pateikti kūrėjams geriausios praktikos pavyzdžių, kaip parodyti paties „Bootstrap“ naudojimą ir iliustruoti tinkamą semantinį žymėjimą, įskaitant būdus, kuriais galima spręsti galimas prieinamumo problemas.

Interaktyvūs komponentai

Interaktyvūs „Bootstrap“ komponentai, tokie kaip modaliniai dialogai, išskleidžiamieji meniu ir pasirinktiniai patarimai, yra sukurti taip, kad veiktų liečiantiems, pelės ir klaviatūros naudotojams. Naudojant atitinkamus WAI – ARIA vaidmenis ir atributus, šie komponentai taip pat turėtų būti suprantami ir naudojami naudojant pagalbines technologijas (pvz., ekrano skaitytuvus).

Kadangi „Bootstrap“ komponentai yra sąmoningai sukurti taip, kad būtų gana bendri, autoriams gali tekti įtraukti daugiau ARIA vaidmenų ir atributų, taip pat „JavaScript“ elgsenos, kad būtų galima tiksliau perteikti tikslų jų komponento pobūdį ir funkcionalumą. Paprastai tai pažymima dokumentuose.

Spalvų kontrastas

Kai kurie spalvų deriniai, kurie šiuo metu sudaro numatytąją „Bootstrap“ paletę (naudojami visoje sistemoje, pvz., mygtukų variantams, įspėjimų variantams, formų patvirtinimo indikatoriams), gali lemti nepakankamą spalvų kontrastą (žemiau rekomenduojamo WCAG 2.1 teksto spalvų kontrasto santykio 4,5:1). ir WCAG 2.1 ne teksto spalvų kontrasto santykis 3:1 ), ypač kai naudojamas šviesiame fone. Autoriai raginami išbandyti savo specifinį spalvų panaudojimą ir, jei reikia, rankiniu būdu modifikuoti / išplėsti šias numatytas spalvas, kad būtų užtikrintas tinkamas spalvų kontrasto santykis.

Turinys, kuris turėtų būti vizualiai paslėptas, bet likti pasiekiamas pagalbinėms technologijoms, pvz., ekrano skaitytuvams, gali būti kuriamas naudojant .visually-hiddenklasę. Tai gali būti naudinga tais atvejais, kai papildomos vaizdinės informacijos arba užuominų (pavyzdžiui, reikšmės, pažymėtos naudojant spalvas) reikia perteikti ir nevaizdiniams naudotojams.

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

Norėdami vizualiai paslėpti interaktyvius valdiklius, pvz., tradicines „praleisti“ nuorodas, naudokite .visually-hidden-focusableklasę. Tai užtikrins, kad valdiklis taps matomas, kai tik sufokusuotas (regintiems klaviatūros naudotojams). Būkite atsargūs, palyginti su ankstesnių versijų atitikmenimis .sr-onlyir .sr-only-focusableklasėmis, „Bootstrap 5“ .visually-hidden-focusableyra atskira klasė ir negali būti naudojama kartu su .visually-hiddenklase.

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

Sumažintas judesys

„Bootstrap“ palaiko prefers-reduced-motionmedijos funkciją . Naršyklėse/aplinkose, kuriose naudotojas gali nurodyti sumažinto judesio pasirinkimą, dauguma CSS perėjimo efektų programoje „Bootstrap“ (pavyzdžiui, kai atidaromas arba uždaromas modalinis dialogo langas arba slankiojanti animacija karuselėse) bus išjungti, o prasmingos animacijos ( pavyzdžiui, suktukai) bus sulėtinti.

Naršyklėse, palaikančiose prefers-reduced-motion, o naudotojas aiškiai nenurodė , kad norėtų sumažinti judėjimą (ty kur prefers-reduced-motion: no-preference), „Bootstrap“ įgalina sklandų slinkimą naudojant scroll-behaviornuosavybę.