Tilgængelighed

En kort oversigt over Bootstraps funktioner og begrænsninger for oprettelse af tilgængeligt indhold.

På denne side

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.

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-hiddenklassen. 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-onlyog .sr-only-focusableklasser i tidligere versioner, er Bootstrap 5's .visually-hidden-focusableen selvstændig klasse, og må ikke bruges i kombination med .visually-hiddenklassen.

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

Reduceret bevægelse

Bootstrap inkluderer understøttelse af prefers-reduced-motionmediefunktionen . 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-behavioregenskaben.