Tillgänglighet

En kort översikt över Bootstraps funktioner och begränsningar för att skapa tillgängligt innehåll.

På den här sidan

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 dialoger, 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 förståeliga och fungerande 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.

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 .visually-hiddenklassen. 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="visually-hidden">Danger: </span>
  This action is not reversible
</p>

Använd klassen för visuellt dolda interaktiva kontroller, som traditionella "hoppa över"-länkar .visually-hidden-focusable. Detta kommer att säkerställa att kontrollen blir synlig när den är fokuserad (för seende tangentbordsanvändare). Se upp, jämfört med motsvarande .sr-onlyoch .sr-only-focusableklasser i tidigare versioner är Bootstrap 5:s .visually-hidden-focusableen fristående klass och får inte användas i kombination med .visually-hiddenklassen.

<a class="visually-hidden-focusable" href="#content">Skip to main content</a>

Minskad rörelse

Bootstrap inkluderar stöd för prefers-reduced-motionmediafunktionen . 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 animationen i karuseller) att inaktiveras, och meningsfulla animationer ( såsom spinnare) kommer att saktas ner.

På webbläsare som stöder prefers-reduced-motion, och där användaren inte uttryckligen har signalerat att de föredrar reducerad rörelse (dvs. var prefers-reduced-motion: no-preference), möjliggör Bootstrap smidig rullning med hjälp av scroll-behavioregenskapen.