Dostopnost

Kratek pregled funkcij in omejitev programa Bootstrap za ustvarjanje dostopne vsebine.

Na tej strani

Bootstrap ponuja ogrodje, ki je preprosto za uporabo že pripravljenih slogov, orodij za postavitev in interaktivnih komponent, kar razvijalcem omogoča ustvarjanje spletnih mest in aplikacij, ki so vizualno privlačne, funkcionalno bogate in dostopne takoj po namestitvi.

Pregled in omejitve

Splošna dostopnost katerega koli projekta, zgrajenega z Bootstrapom, je v veliki meri odvisna od avtorjevih oznak, dodatnega sloga in skriptov, ki jih je vključil. Če pa so bili ti pravilno implementirani, bi moralo biti povsem mogoče ustvariti spletna mesta in aplikacije z Bootstrapom, ki izpolnjujejo WCAG 2.1 (A/AA/AAA), razdelek 508 ter podobne standarde in zahteve glede dostopnosti.

Strukturna oznaka

Slog in postavitev Bootstrapa je mogoče uporabiti za širok nabor označevalnih struktur. Namen te dokumentacije je razvijalcem ponuditi primere najboljše prakse za prikaz uporabe samega Bootstrapa in ponazoriti ustrezno semantično oznako, vključno z načini, na katere je mogoče obravnavati morebitne težave glede dostopnosti.

Interaktivne komponente

Interaktivne komponente Bootstrapa, kot so modalna pogovorna okna, spustni meniji in namigi orodij po meri, so zasnovane tako, da delujejo za uporabnike z dotikom, miško in tipkovnico. Z uporabo ustreznih vlog in atributov WAI - ARIA bi morale biti te komponente tudi razumljive in uporabne z uporabo podpornih tehnologij (kot so bralniki zaslona).

Ker so komponente Bootstrapa namenoma zasnovane tako, da so dokaj splošne, bodo avtorji morda morali vključiti nadaljnje vloge in atribute ARIA ter vedenje JavaScripta, da bi natančneje predstavili natančno naravo in funkcionalnost svoje komponente. To je običajno navedeno v dokumentaciji.

Barvni kontrast

Nekatere kombinacije barv, ki trenutno sestavljajo Bootstrapovo privzeto paleto – ki se uporabljajo v celotnem ogrodju za stvari, kot so različice gumbov, različice opozoril, indikatorji preverjanja obrazca – lahko povzročijo nezadostni barvni kontrast (pod priporočenim barvnim kontrastnim razmerjem besedila WCAG 2.1 4,5:1 in barvno kontrastno razmerje WCAG 2.1 brez besedila 3:1 ), zlasti pri uporabi na svetlem ozadju. Avtorje spodbujamo, da preizkusijo svoje posebne uporabe barv in po potrebi ročno spremenijo/razširijo te privzete barve, da zagotovijo ustrezna barvna kontrastna razmerja.

Vsebino, ki bi morala biti vizualno skrita, vendar ostati dostopna podpornim tehnologijam, kot so bralniki zaslona, je mogoče oblikovati z uporabo .visually-hiddenrazreda. To je lahko uporabno v primerih, ko je treba dodatne vizualne informacije ali namige (kot je pomen, označen z uporabo barve) prenesti tudi nevizualnim uporabnikom.

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

Za vizualno skrite interaktivne kontrole, kot so tradicionalne povezave »preskok«, uporabite .visually-hidden-focusablerazred. To bo zagotovilo, da postane nadzor viden, ko je fokus (za uporabnike tipkovnice, ki vidijo). Pozor, v primerjavi z ekvivalentom .sr-onlyin .sr-only-focusablerazredi v prejšnjih različicah je Bootstrap 5 .visually-hidden-focusablesamostojen razred in se ga ne sme uporabljati v kombinaciji z .visually-hiddenrazredom.

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

Zmanjšano gibanje

Bootstrap vključuje podporo za prefers-reduced-motionpredstavnostno funkcijo . V brskalnikih/okoljih, ki uporabniku omogočajo, da določi svoje nastavitve za zmanjšano gibanje, bo večina učinkov prehoda CSS v Bootstrapu (na primer, ko se odpre ali zapre modalno pogovorno okno ali drsna animacija v vrtiljakih) onemogočena, smiselne animacije ( kot so vrtavke) bodo upočasnjene.

V brskalnikih, ki podpirajo prefers-reduced-motion, in kjer uporabnik ni izrecno nakazal, da bi raje zmanjšal gibanje (tj. kjer prefers-reduced-motion: no-preference), Bootstrap omogoča gladko pomikanje z uporabo scroll-behaviorlastnosti.