Pristupačnost

Kratak pregled značajki i ograničenja Bootstrapa za stvaranje pristupačnog sadržaja.

Na ovoj stranici

Bootstrap pruža okvir koji je jednostavan za korištenje gotovih stilova, alata za izgled i interaktivnih komponenti, omogućujući razvojnim programerima da kreiraju web stranice i aplikacije koje su vizualno privlačne, funkcionalno bogate i dostupne odmah.

Pregled i ograničenja

Sveukupna pristupačnost bilo kojeg projekta izgrađenog s Bootstrapom uvelike ovisi o autorovom označavanju, dodatnom stilu i skriptiranju koje je uključio. Međutim, pod uvjetom da su oni ispravno implementirani, trebalo bi biti savršeno moguće izraditi web stranice i aplikacije s Bootstrapom koje ispunjavaju WCAG 2.1 (A/AA/AAA), odjeljak 508 i slične standarde i zahtjeve pristupačnosti.

Strukturno označavanje

Bootstrapov stil i izgled mogu se primijeniti na širok raspon struktura označavanja. Ova dokumentacija ima za cilj pružiti programerima primjere najbolje prakse za demonstraciju upotrebe samog Bootstrapa i ilustrirati odgovarajuće semantičko označavanje, uključujući načine na koje se mogu riješiti potencijalni problemi s pristupačnošću.

Interaktivne komponente

Bootstrapove interaktivne komponente—kao što su modalni dijalozi, padajući izbornici i prilagođeni opisi alata—osmišljene su za rad s korisnicima dodira, miša i tipkovnice. Korištenjem relevantnih WAI - ARIA uloga i atributa, ove komponente također bi trebale biti razumljive i operabilne korištenjem pomoćnih tehnologija (kao što su čitači zaslona).

Budući da su Bootstrapove komponente namjerno dizajnirane da budu prilično generičke, autori će možda morati uključiti dodatne ARIA uloge i atribute, kao i ponašanje JavaScripta, kako bi točnije prenijeli preciznu prirodu i funkcionalnost svoje komponente. To je obično navedeno u dokumentaciji.

Kontrast boja

Neke kombinacije boja koje trenutno čine Bootstrapovu zadanu paletu—koje se koriste u okviru za stvari kao što su varijacije gumba, varijacije upozorenja, indikatori provjere valjanosti obrazaca—mogu dovesti do nedovoljnog kontrasta boja (ispod preporučenog WCAG 2.1 omjera kontrasta boje teksta od 4,5:1 i omjer kontrasta boja bez teksta WCAG 2.1 od 3:1 ), osobito kada se koristi na svijetloj pozadini. Autore se potiče da testiraju svoje specifične upotrebe boja i, gdje je potrebno, ručno modificiraju/prošire ove zadane boje kako bi osigurali odgovarajuće omjere kontrasta boja.

Sadržaj koji bi trebao biti vizualno skriven, ali ostati dostupan pomoćnim tehnologijama kao što su čitači zaslona, može se stilizirati pomoću .visually-hiddenklase. To može biti korisno u situacijama kada dodatne vizualne informacije ili znakove (kao što je značenje označeno upotrebom boje) također treba prenijeti nevizualnim korisnicima.

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

Za vizualno skrivene interaktivne kontrole, kao što su tradicionalne veze za preskakanje, koristite .visually-hidden-focusableklasu. Ovo će osigurati da kontrola postane vidljiva nakon fokusiranja (za korisnike tipkovnice koji vide). Pazite, u usporedbi s ekvivalentom .sr-onlyi .sr-only-focusableklasama u prošlim verzijama, Bootstrap 5 .visually-hidden-focusableje samostalna klasa i ne smije se koristiti u kombinaciji s .visually-hiddenklasom.

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

Smanjeno kretanje

Bootstrap uključuje podršku za prefers-reduced-motionznačajku medija . U preglednicima/okruženjima koji korisniku dopuštaju da odredi svoje preferencije za smanjeno kretanje, većina CSS efekata prijelaza u Bootstrapu (na primjer, kada se otvori ili zatvori modalni dijaloški okvir ili klizna animacija u karuselima) bit će onemogućena, a smislene animacije ( kao što su spinneri) bit će usporeni.

Na preglednicima koji podržavaju prefers-reduced-motion, i gdje korisnik nije izričito signalizirao da bi radije smanjio kretanje (tj. gdje prefers-reduced-motion: no-preference), Bootstrap omogućuje glatko pomicanje pomoću scroll-behaviorsvojstva.