tilgjengelighet

En kort oversikt over Bootstraps funksjoner og begrensninger for å lage tilgjengelig innhold.

På denne siden

Bootstrap gir et brukervennlig rammeverk av ferdiglagde stiler, layoutverktøy og interaktive komponenter, som lar utviklere lage nettsteder og applikasjoner som er visuelt tiltalende, funksjonelt rike og tilgjengelige rett ut av esken.

Oversikt og begrensninger

Den generelle tilgjengeligheten til ethvert prosjekt bygget med Bootstrap avhenger i stor grad av forfatterens markering, ekstra styling og skripting de har inkludert. Men forutsatt at disse er implementert riktig, bør det være fullt mulig å lage nettsider og applikasjoner med Bootstrap som oppfyller WCAG 2.1 (A/AA/AAA), Section 508 , og lignende tilgjengelighetsstandarder og krav.

Strukturell markering

Bootstraps styling og layout kan brukes på et bredt spekter av markup-strukturer. Denne dokumentasjonen tar sikte på å gi utviklere eksempler på beste praksis for å demonstrere bruken av selve Bootstrap og illustrere passende semantisk markup, inkludert måter som potensielle tilgjengelighetsproblemer kan løses på.

Interaktive komponenter

Bootstraps interaktive komponenter – som modale dialoger, rullegardinmenyer og tilpassede verktøytips – er designet for å fungere for brukere av berøring, mus og tastatur. Gjennom bruk av relevante WAI - ARIA roller og attributter, bør disse komponentene også være forståelige og operative ved hjelp av hjelpeteknologier (som skjermlesere).

Fordi Bootstraps komponenter med hensikt er designet for å være ganske generiske, kan det hende forfattere må inkludere ytterligere ARIA - roller og -attributter, samt JavaScript-adferd, for mer nøyaktig å formidle den nøyaktige naturen og funksjonaliteten til komponenten deres. Dette er vanligvis notert i dokumentasjonen.

Fargekontrast

Noen kombinasjoner av farger som for øyeblikket utgjør Bootstraps standardpalett – brukt i hele rammeverket for ting som knappevariasjoner, varslingsvariasjoner, skjemavalideringsindikatorer – kan føre til utilstrekkelig fargekontrast (under anbefalt WCAG 2.1 tekstfargekontrastforhold på 4,5:1 og WCAG 2.1 ikke-tekstfargekontrastforhold på 3:1 ), spesielt når det brukes mot en lys bakgrunn. Forfattere oppfordres til å teste sin spesifikke bruk av farge og, der det er nødvendig, manuelt endre/utvide disse standardfargene for å sikre tilstrekkelig fargekontrastforhold.

Innhold som skal være visuelt skjult, men fortsatt tilgjengelig for hjelpeteknologier som skjermlesere, kan styles ved hjelp av .visually-hiddenklassen. Dette kan være nyttig i situasjoner der ytterligere visuell informasjon eller signaler (som betydning angitt ved bruk av farger) også må formidles til ikke-visuelle brukere.

<p class="text-danger">
  <span class="visually-hidden">Danger: </span>
  This action is not reversible
</p>

For visuelt skjulte interaktive kontroller, for eksempel tradisjonelle «hopp over»-koblinger, bruk .visually-hidden-focusableklassen. Dette vil sikre at kontrollen blir synlig når den er fokusert (for seende tastaturbrukere). Se opp, sammenlignet med tilsvarende .sr-onlyog .sr-only-focusableklasser i tidligere versjoner, er Bootstrap 5's .visually-hidden-focusableen frittstående klasse, og må ikke brukes i kombinasjon med .visually-hiddenklassen.

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

Redusert bevegelse

Bootstrap inkluderer støtte for prefers-reduced-motionmediefunksjonen . I nettlesere/miljøer som lar brukeren spesifisere preferansen for redusert bevegelse, vil de fleste CSS-overgangseffekter i Bootstrap (for eksempel når en modal dialog åpnes eller lukkes, eller skyveanimasjonen i karuseller) bli deaktivert, og meningsfulle animasjoner ( som spinnere) vil bremses.

På nettlesere som støtter prefers-reduced-motion, og hvor brukeren ikke eksplisitt har signalisert at de foretrekker redusert bevegelse (dvs. hvor prefers-reduced-motion: no-preference), muliggjør Bootstrap jevn rulling ved hjelp av scroll-behavioregenskapen.