tilgjengelighet

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

Bootstrap gir et brukervennlig rammeverk med ferdiglagde stiler, layoutverktøy og interaktive komponenter, slik at utviklere kan 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.0 (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

De fleste farger som for tiden utgjør Bootstraps standardpalett – brukt i hele rammeverket for ting som knappevariasjoner, varslingsvariasjoner, skjemavalideringsindikatorer – fører til utilstrekkelig fargekontrast (under det anbefalte WCAG 2.0 fargekontrastforholdet på 4,5:1 ) når de brukes mot en lys bakgrunn. Forfattere må 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 .sr-onlyklassen. 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="sr-only">Danger: </span>
  This action is not reversible
</p>

For visuelt skjulte interaktive kontroller, for eksempel tradisjonelle "hopp"-koblinger, .sr-onlykan kombineres med .sr-only-focusableklassen. Dette vil sikre at kontrollen blir synlig når den er fokusert (for seende tastaturbrukere).

<a class="sr-only sr-only-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 dialogboks åpnes eller lukkes, eller skyveanimasjonen i karuseller) bli deaktivert.