Toegankelijkheid

Een kort overzicht van de functies en beperkingen van Bootstrap voor het maken van toegankelijke inhoud.

Op deze pagina

Bootstrap biedt een gebruiksvriendelijk raamwerk van kant-en-klare stijlen, lay-outtools en interactieve componenten, waarmee ontwikkelaars websites en applicaties kunnen maken die visueel aantrekkelijk, functioneel rijk en direct toegankelijk zijn.

Overzicht en beperkingen

De algehele toegankelijkheid van elk project dat met Bootstrap is gebouwd, hangt voor een groot deel af van de opmaak van de auteur, de aanvullende styling en het script dat ze hebben toegevoegd. Als deze echter correct zijn geïmplementeerd, zou het perfect mogelijk moeten zijn om met Bootstrap websites en applicaties te maken die voldoen aan WCAG 2.1 (A/AA/AAA), Sectie 508 en vergelijkbare toegankelijkheidsnormen en -vereisten.

Structurele opmaak

De styling en lay-out van Bootstrap kunnen worden toegepast op een breed scala aan opmaakstructuren. Deze documentatie is bedoeld om ontwikkelaars te voorzien van voorbeelden van beste praktijken om het gebruik van Bootstrap zelf te demonstreren en om de juiste semantische opmaak te illustreren, inclusief manieren waarop mogelijke toegankelijkheidsproblemen kunnen worden aangepakt.

Interactieve componenten

De interactieve componenten van Bootstrap, zoals modale dialoogvensters, vervolgkeuzemenu's en aangepaste tooltips, zijn ontworpen om te werken voor gebruikers met aanraking, muis en toetsenbord. Door het gebruik van relevante WAI - ARIA - rollen en -attributen moeten deze componenten ook begrijpelijk en bruikbaar zijn met behulp van ondersteunende technologieën (zoals schermlezers).

Omdat de componenten van Bootstrap met opzet zijn ontworpen om vrij algemeen te zijn, moeten auteurs mogelijk meer ARIA - rollen en -attributen opnemen, evenals JavaScript-gedrag, om de precieze aard en functionaliteit van hun component nauwkeuriger over te brengen. Dit wordt meestal vermeld in de documentatie.

Kleurcontrast

Sommige kleurencombinaties die momenteel het standaardpalet van Bootstrap vormen - die in het hele framework worden gebruikt voor zaken als knopvariaties, waarschuwingsvariaties, formuliervalidatie-indicatoren - kunnen leiden tot onvoldoende kleurcontrast (onder de aanbevolen WCAG 2.1-tekstkleurcontrastverhouding van 4,5:1 en de WCAG 2.1 niet-tekst kleurcontrastverhouding van 3:1 ), vooral bij gebruik tegen een lichte achtergrond. Auteurs worden aangemoedigd om hun specifieke kleurgebruik te testen en, waar nodig, deze standaardkleuren handmatig aan te passen/uit te breiden om adequate kleurcontrastverhoudingen te garanderen.

Inhoud die visueel verborgen moet zijn, maar toegankelijk moet blijven voor ondersteunende technologieën zoals schermlezers, kan worden gestyled met behulp van de .visually-hiddenklasse. Dit kan handig zijn in situaties waarin aanvullende visuele informatie of aanwijzingen (zoals betekenis die wordt aangegeven door het gebruik van kleur) ook moeten worden overgebracht naar niet-visuele gebruikers.

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

.visually-hidden-focusableGebruik de klasse voor visueel verborgen interactieve bedieningselementen, zoals traditionele 'overslaan'-koppelingen . Dit zorgt ervoor dat de besturing zichtbaar wordt zodra deze is gefocust (voor ziende toetsenbordgebruikers). Let op, vergeleken met het equivalent .sr-onlyen de .sr-only-focusableklassen in eerdere versies, is Bootstrap 5 .visually-hidden-focusableeen op zichzelf staande klasse en mag niet worden gebruikt in combinatie met de .visually-hiddenklasse.

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

Verminderde beweging

Bootstrap bevat ondersteuning voor de prefers-reduced-motionmediafunctie . In browsers/omgevingen waarin de gebruiker zijn voorkeur voor verminderde beweging kan specificeren, worden de meeste CSS-overgangseffecten in Bootstrap (bijvoorbeeld wanneer een modaal dialoogvenster wordt geopend of gesloten, of de glijdende animatie in carrousels) uitgeschakeld en betekenisvolle animaties ( zoals spinners) worden vertraagd.

Op browsers die prefers-reduced-motion, en waar de gebruiker niet expliciet heeft aangegeven dat ze de voorkeur geven aan verminderde beweging (dwz waar prefers-reduced-motion: no-preference), maakt Bootstrap soepel scrollen mogelijk met behulp van de scroll-behavioreigenschap.