Pristupačnost
Kratak pregled značajki i ograničenja Bootstrapa za stvaranje pristupačnog sadržaja.
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 trebati 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.
Vizualno skriven sadržaj
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-hidden
klase. 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-focusable
klasu. Ovo će osigurati da kontrola postane vidljiva nakon fokusiranja (za korisnike tipkovnice koji vide). Pazite, u usporedbi s ekvivalentom .sr-only
i .sr-only-focusable
klasama u prošlim verzijama, Bootstrap 5 .visually-hidden-focusable
je samostalna klasa i ne smije se koristiti u kombinaciji s .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
znač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-behavior
svojstva.
Dodatna sredstva
- Smjernice za pristupačnost web sadržaja (WCAG) 2.1
- Projekt A11Y
- MDN dokumentacija o pristupačnosti
- Tenon.io provjera pristupačnosti
- Analizator kontrasta boja (CCA)
- “HTML Codesniffer” bookmarklet za identificiranje problema s pristupačnošću
- Microsoft Accessibility Insights
- Alati za testiranje Deque Axe
- Uvod u web pristupačnost