Source

Pristupačnost

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

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.0 (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

Većina 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 forme—dovode do nedovoljnog kontrasta boja (ispod preporučenog WCAG 2.0 omjera kontrasta boja od 4,5:1 ) kada se koristi protiv svetlu pozadinu. Autori će morati ručno modificirati/proširiti ove zadane boje kako bi osigurali adekvatan omjer kontrasta boja.

Vizuelno skriven sadržaj

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 .sr-onlyklase. 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="sr-only">Danger: </span>
  This action is not reversible
</p>

Za vizuelno skrivene interaktivne kontrole, kao što su tradicionalne veze za preskakanje, .sr-onlymogu se kombinovati sa .sr-only-focusableklasom. Ovo će osigurati da kontrola postane vidljiva kada se fokusira (za videće korisnike tastature).

<a class="sr-only sr-only-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 tranzicije u Bootstrapu (na primjer, kada se otvori ili zatvori modalni dijalog) će biti onemogućena. Trenutno je podrška ograničena na Safari na macOS-u i iOS-u.

Dodatni resursi