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.
Översikt och begränsningar
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.1 (A/AA/AAA), Section 508 och liknande tillgänglighetsstandarder och krav.
Strukturell markering
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.
Interaktiva komponenter
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.
Färgkontrast
Vissa kombinationer av 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 – kan leda till otillräcklig färgkontrast (under det rekommenderade WCAG 2.1 textfärgkontrastförhållandet på 4,5:1 och WCAG 2.1 icke-textfärgkontrastförhållande på 3:1 ), särskilt när det används mot en ljus bakgrund. Författare uppmuntras att testa sina specifika användningar av färg och, vid behov, manuellt ändra/förlänga dessa standardfärger för att säkerställa adekvata färgkontrastförhållanden.
Visuellt dolt innehåll
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-only
klassen. 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-only
kombineras med .sr-only-focusable
klassen. 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>
Minskad rörelse
Bootstrap inkluderar stöd för prefers-reduced-motion
mediafunktionen . I webbläsare/miljöer som tillåter användaren att 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, eller den glidande animeringen i karuseller) att inaktiveras, och meningsfulla animationer ( såsom spinnare) kommer att saktas ner.