Tillgänglighet
En kort översikt över Bootstraps funktioner och begränsningar för att skapa tillgängligt innehåll.
Bootstrap tillhandahåller ett lättanvänt ramverk av färdiga stilar, layoutverktyg och interaktiva komponenter, vilket gör att utvecklare kan skapa webbplatser och applikationer som är visuellt tilltalande, funktionellt rika och tillgängliga direkt.
Den övergripande tillgängligheten för alla projekt byggda med Bootstrap beror till stor del på författarens uppmärkning, ytterligare stil och skript som de har inkluderat. Men förutsatt att dessa har implementerats korrekt bör det vara fullt möjligt att skapa webbplatser och applikationer med Bootstrap som uppfyller WCAG 2.0 (A/AA/AAA), Section 508 och liknande tillgänglighetsstandarder och krav.
Bootstraps styling och layout kan appliceras på ett brett utbud av uppmärkningsstrukturer. Den här dokumentationen syftar till att ge utvecklare exempel på bästa praxis för att demonstrera användningen av själva Bootstrap och illustrera lämplig semantisk uppmärkning, inklusive sätt på vilka potentiella tillgänglighetsproblem kan lösas.
Bootstraps interaktiva komponenter – som modala dialogrutor, rullgardinsmenyer och anpassade verktygstips – är designade för att fungera för pek-, mus- och tangentbordsanvändare. Genom att använda relevanta WAI - ARIA roller och attribut bör dessa komponenter också vara begripliga och funktionsdugliga med hjälp av hjälpmedel (som skärmläsare).
Eftersom Bootstraps komponenter är avsiktligt utformade för att vara ganska generiska, kan författare behöva inkludera ytterligare ARIA- roller och -attribut, såväl som JavaScript-beteende, för att mer exakt förmedla den exakta karaktären och funktionaliteten hos deras komponent. Detta brukar noteras i dokumentationen.
De flesta färger som för närvarande utgör Bootstraps standardpalett – som används i hela ramverket för saker som knappvariationer, varningsvarianter, formulärvalideringsindikatorer – leder till otillräcklig färgkontrast (under det rekommenderade WCAG 2.0-färgkontrastförhållandet på 4,5:1 ) när de används mot en ljus bakgrund. Författare måste manuellt ändra/förlänga dessa standardfärger för att säkerställa adekvata färgkontrastförhållanden.
Innehåll som ska vara visuellt dolt, men förbli tillgängligt för hjälpmedel som skärmläsare, kan utformas med hjälp av .sr-onlyklassen. Detta kan vara användbart i situationer där ytterligare visuell information eller ledtrådar (såsom betydelse betecknas genom användning av färg) också behöver förmedlas till icke-visuella användare.
<p class="text-danger">
<span class="sr-only">Danger: </span>
This action is not reversible
</p>För visuellt dolda kan interaktiva kontroller, som traditionella "hoppa över"-länkar, .sr-onlykombineras med .sr-only-focusableklassen. Detta kommer att säkerställa att kontrollen blir synlig när den är fokuserad (för seende tangentbordsanvändare).
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>Bootstrap inkluderar stöd för prefers-reduced-motionmediafunktionen . I webbläsare/miljöer som låter användaren ange sina preferenser för reducerad rörelse, kommer de flesta CSS-övergångseffekter i Bootstrap (till exempel när en modal dialogruta öppnas eller stängs) att inaktiveras. För närvarande är stödet begränsat till Safari på macOS och iOS.