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.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.
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 .visually-hidden
klase. 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-focusable
klasu. Ovo će osigurati da kontrola postane vidljiva kada se fokusira (za videće korisnike tastature). Pazite, u poređenju sa ekvivalentom .sr-only
i .sr-only-focusable
klasama u prošlim verzijama, Bootstrap 5 je .visually-hidden-focusable
samostalna klasa i ne smije se koristiti u kombinaciji sa .visually-hidden
klasom.
<a class="visually-hidden-focusable" href="#content">Skip to main content</a>
Smanjeno kretanje
Bootstrap uključuje podršku za prefers-reduced-motion
medijsku 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-behavior
svojstva.
Dodatni resursi
- Smjernice za pristupačnost web sadržaja (WCAG) 2.1
- Projekat A11Y
- MDN dokumentacija o pristupačnosti
- Tenon.io Provjera pristupačnosti
- Analizator kontrasta boja (CCA)
- “HTML Codesniffer” bookmarklet za identifikaciju problema pristupačnosti
- Microsoft Accessibility Insights
- Deque Axe alati za testiranje
- Uvod u Web pristupačnost