Pristupačnost

Kratak pregled Bootstrap-ovih karakteristika i ograničenja za kreiranje pristupačnog sadržaja.

Na ovoj stranici

Bootstrap pruža okvir lak za korištenje gotovih stilova, alata za izgled i interaktivnih komponenti, omogućavajući programerima da kreiraju web stranice i aplikacije koje su vizualno privlačne, funkcionalno bogate i dostupne iz kutije.

Pregled i ograničenja

Ukupna dostupnost bilo kojeg projekta izgrađenog pomoću Bootstrapa u velikoj mjeri ovisi o autorovim oznakama, dodatnim stilovima i skriptovima koje su uključili. Međutim, pod uslovom da su oni ispravno implementirani, trebalo bi biti savršeno moguće kreirati web stranice i aplikacije s Bootstrapom koje ispunjavaju WCAG 2.1 (A/AA/AAA), odjeljak 508 , i slične standarde i zahtjeve pristupačnosti.

Strukturne oznake

Bootstrap-ov stil i raspored mogu se primijeniti na širok raspon struktura za označavanje. Ova dokumentacija ima za cilj da pruži programerima primjere najbolje prakse kako bi demonstrirali upotrebu samog Bootstrapa i ilustrovali odgovarajuće semantičko označavanje, uključujući načine na koje se mogu riješiti potencijalni problemi pristupačnosti.

Interaktivne komponente

Bootstrap interaktivne komponente – kao što su modalni dijalozi, padajući meniji i prilagođeni opisi alata – dizajnirane su da rade za korisnike dodira, miša i tastature. Kroz korištenje relevantnih WAI - ARIA uloga i atributa, ove komponente bi također trebale biti razumljive i operativne pomoću pomoćnih tehnologija (kao što su čitači ekrana).

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

Kontrast boja

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

Sadržaj koji bi trebao biti vizualno skriven, ali ostati dostupan pomoćnim tehnologijama kao što su čitači ekrana, može se stilizirati korištenjem .visually-hiddenklase. Ovo 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 nevizuelnim korisnicima.

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

Za vizuelno skrivene interaktivne kontrole, kao što su tradicionalne veze za preskakanje, koristite .visually-hidden-focusableklasu. Ovo će osigurati da kontrola postane vidljiva kada se fokusira (za videće korisnike tastature). Pazite, u poređenju sa ekvivalentom .sr-onlyi .sr-only-focusableklasama u prošlim verzijama, Bootstrap 5 je .visually-hidden-focusablesamostalna klasa i ne smije se koristiti u kombinaciji sa .visually-hiddenklasom.

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

Smanjeno kretanje

Bootstrap uključuje podršku za prefers-reduced-motionmedijsku funkciju . U pretraživačima/okruženjima koja omogućavaju korisniku da odredi svoje preferencije za smanjeno kretanje, većina efekata CSS prijelaza u Bootstrapu (na primjer, kada se otvori ili zatvori modalni dijalog, ili klizna animacija na vrtuljcima) će biti onemogućena, a značajne animacije ( kao što su spineri) će biti usporen.

Na pretraživačima koji podržavaju prefers-reduced-motion, i gdje korisnik nije eksplicitno signalizirao da bi više volio smanjeno kretanje (tj. gdje prefers-reduced-motion: no-preference), Bootstrap omogućava glatko pomicanje pomoću scroll-behaviorsvojstva.