Tilgængelighed
En kort oversigt over Bootstraps funktioner og begrænsninger for oprettelse af tilgængeligt indhold.
Bootstrap giver en brugervenlig ramme af færdiglavede stilarter, layoutværktøjer og interaktive komponenter, hvilket giver udviklere mulighed for at skabe websteder og applikationer, der er visuelt tiltalende, funktionelt rige og tilgængelige ud af boksen.
Overblik og begrænsninger
Den overordnede tilgængelighed af ethvert projekt bygget med Bootstrap afhænger i høj grad af forfatterens opmærkning, yderligere styling og scripting, de har inkluderet. Men forudsat at disse er implementeret korrekt, burde det være perfekt muligt at oprette hjemmesider og applikationer med Bootstrap, der opfylder WCAG 2.1 (A/AA/AAA), Section 508 og lignende tilgængelighedsstandarder og krav.
Strukturel markup
Bootstraps styling og layout kan anvendes på en lang række markup-strukturer. Denne dokumentation har til formål at give udviklere eksempler på bedste praksis for at demonstrere brugen af selve Bootstrap og illustrere passende semantisk markup, herunder måder, hvorpå potentielle tilgængelighedsproblemer kan løses.
Interaktive komponenter
Bootstraps interaktive komponenter – såsom modale dialoger, rullemenuer og brugerdefinerede værktøjstip – er designet til at fungere for brugere af berøring, mus og tastatur. Ved at bruge relevante WAI - ARIA roller og attributter bør disse komponenter også være forståelige og operative ved hjælp af hjælpeteknologier (såsom skærmlæsere).
Fordi Bootstraps komponenter med vilje er designet til at være ret generiske, kan forfattere være nødt til at inkludere yderligere ARIA - roller og -attributter, såvel som JavaScript-adfærd, for mere præcist at formidle den præcise karakter og funktionalitet af deres komponent. Dette er normalt noteret i dokumentationen.
Farvekontrast
Nogle kombinationer af farver, der i øjeblikket udgør Bootstraps standardpalet – brugt i hele rammen til ting som knapvariationer, advarselsvariationer, formularvalideringsindikatorer – kan føre til utilstrækkelig farvekontrast (under det anbefalede WCAG 2.1 tekstfarvekontrastforhold på 4,5:1 og WCAG 2.1 ikke-tekst farvekontrastforhold på 3:1 ), især når det bruges mod en lys baggrund. Forfattere opfordres til at teste deres specifikke brug af farve og, hvor det er nødvendigt, manuelt ændre/udvide disse standardfarver for at sikre passende farvekontrastforhold.
Visuelt skjult indhold
Indhold, der skal være visuelt skjult, men forblive tilgængeligt for hjælpeteknologier såsom skærmlæsere, kan styles ved hjælp af .visually-hidden
klassen. Dette kan være nyttigt i situationer, hvor yderligere visuel information eller signaler (såsom betydning angivet ved brug af farve) også skal formidles til ikke-visuelle brugere.
<p class="text-danger">
<span class="visually-hidden">Danger: </span>
This action is not reversible
</p>
Brug klassen til visuelt skjulte interaktive kontroller, såsom traditionelle "spring"-links .visually-hidden-focusable
. Dette vil sikre, at kontrollen bliver synlig, når den først er fokuseret (for seende tastaturbrugere). Pas på, sammenlignet med tilsvarende .sr-only
og .sr-only-focusable
klasser i tidligere versioner, er Bootstrap 5's .visually-hidden-focusable
en selvstændig klasse, og må ikke bruges i kombination med .visually-hidden
klassen.
<a class="visually-hidden-focusable" href="#content">Skip to main content</a>
Reduceret bevægelse
Bootstrap inkluderer understøttelse af prefers-reduced-motion
mediefunktionen . I browsere/miljøer, der tillader brugeren at angive deres præference for reduceret bevægelse, vil de fleste CSS-overgangseffekter i Bootstrap (f.eks. når en modal dialog åbnes eller lukkes, eller glidende animation i karruseller) være deaktiveret, og meningsfulde animationer ( såsom spinnere) vil blive bremset.
På browsere, der understøtter prefers-reduced-motion
, og hvor brugeren ikke eksplicit har signaleret, at de foretrækker reduceret bevægelse (dvs. hvor prefers-reduced-motion: no-preference
), muliggør Bootstrap jævn rulning ved hjælp af scroll-behavior
egenskaben.
Yderligere ressourcer
- Web Content Accessibility Guidelines (WCAG) 2.1
- A11Y-projektet
- MDN tilgængelighedsdokumentation
- Tenon.io Accessibility Checker
- Color Contrast Analyzer (CCA)
- "HTML Codesniffer" bogmærke til at identificere tilgængelighedsproblemer
- Microsoft Accessibility Insights
- Deque Axe testværktøjer
- Introduktion til webtilgængelighed