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.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.
Visuelt skjult innhold
Innhold som skal være visuelt skjult, men fortsatt tilgjengelig for hjelpeteknologier som skjermlesere, kan styles ved hjelp av .visually-hidden
klassen. 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-focusable
klassen. Dette vil sikre at kontrollen blir synlig når den er fokusert (for seende tastaturbrukere). Se opp, sammenlignet med tilsvarende .sr-only
og .sr-only-focusable
klasser i tidligere versjoner, er Bootstrap 5's .visually-hidden-focusable
en frittstående klasse, og må ikke brukes i kombinasjon med .visually-hidden
klassen.
<a class="visually-hidden-focusable" href="#content">Skip to main content</a>
Redusert bevegelse
Bootstrap inkluderer støtte for prefers-reduced-motion
mediefunksjonen . 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-behavior
egenskapen.
Tilleggsressurser
- Retningslinjer for tilgjengelighet for nettinnhold (WCAG) 2.1
- A11Y-prosjektet
- MDN tilgjengelighetsdokumentasjon
- Tenon.io Tilgjengelighetskontroll
- Fargekontrastanalysator (CCA)
- "HTML Codesniffer" bokmerke for å identifisere tilgjengelighetsproblemer
- Microsoft Accessibility Insights
- Deque Axe testverktøy
- Introduksjon til netttilgjengelighet