Toegankelijkheid
Een kort overzicht van de functies en beperkingen van Bootstrap voor het maken van toegankelijke inhoud.
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.
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. Echter, op voorwaarde dat deze correct zijn geïmplementeerd, zou het perfect mogelijk moeten zijn om websites en applicaties te maken met Bootstrap die voldoen aan WCAG 2.0 (A/AA/AAA), Sectie 508 en vergelijkbare toegankelijkheidsnormen en vereisten.
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.
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.
De meeste kleuren die momenteel deel uitmaken van het standaardpalet van Bootstrap - dat in het hele raamwerk wordt gebruikt voor zaken als knopvariaties, waarschuwingsvariaties, formuliervalidatie-indicatoren - leiden tot onvoldoende kleurcontrast (onder de aanbevolen WCAG 2.0-kleurcontrastverhouding van 4,5:1 ) bij gebruik tegen een lichte achtergrond. Auteurs moeten deze standaardkleuren handmatig wijzigen/uitbreiden om te zorgen voor voldoende kleurcontrastverhoudingen.
Inhoud die visueel verborgen moet zijn, maar toegankelijk moet blijven voor ondersteunende technologieën zoals schermlezers, kan worden gestyled met behulp van de .sr-onlyklasse. 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="sr-only">Danger: </span>
This action is not reversible
</p>Voor visueel verborgen interactieve bedieningselementen, zoals traditionele "skip"-links, .sr-onlykunnen deze worden gecombineerd met de .sr-only-focusableklas. Dit zorgt ervoor dat de besturing zichtbaar wordt zodra deze is gefocust (voor ziende toetsenbordgebruikers).
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>