Accessibilité
Un bref aperçu des fonctionnalités et des limites de Bootstrap pour la création de contenu accessible.
Bootstrap fournit un cadre facile à utiliser de styles prêts à l'emploi, d'outils de mise en page et de composants interactifs, permettant aux développeurs de créer des sites Web et des applications visuellement attrayants, riches en fonctionnalités et accessibles prêts à l'emploi.
L'accessibilité globale de tout projet construit avec Bootstrap dépend en grande partie du balisage de l'auteur, du style supplémentaire et des scripts qu'ils ont inclus. Cependant, à condition que ceux-ci aient été correctement implémentés, il devrait être parfaitement possible de créer des sites Web et des applications avec Bootstrap qui respectent les normes WCAG 2.0 (A/AA/AAA), Section 508 et les normes et exigences d'accessibilité similaires.
Le style et la mise en page de Bootstrap peuvent être appliqués à un large éventail de structures de balisage. Cette documentation vise à fournir aux développeurs des exemples de bonnes pratiques pour démontrer l'utilisation de Bootstrap lui-même et illustrer le balisage sémantique approprié, y compris les moyens de résoudre les problèmes d'accessibilité potentiels.
Les composants interactifs de Bootstrap, tels que les boîtes de dialogue modales, les menus déroulants et les info-bulles personnalisées, sont conçus pour fonctionner avec les utilisateurs tactiles, de souris et de clavier. Grâce à l'utilisation des rôles et attributs WAI - ARIA pertinents , ces composants doivent également être compréhensibles et utilisables à l'aide de technologies d'assistance (telles que les lecteurs d'écran).
Étant donné que les composants de Bootstrap sont délibérément conçus pour être assez génériques, les auteurs peuvent avoir besoin d'inclure d'autres rôles et attributs ARIA , ainsi que le comportement JavaScript, pour transmettre plus précisément la nature et les fonctionnalités précises de leur composant. Ceci est généralement noté dans la documentation.
La plupart des couleurs qui composent actuellement la palette par défaut de Bootstrap - utilisée dans tout le cadre pour des choses telles que les variations de boutons, les variations d'alerte, les indicateurs de validation de formulaire - conduisent à un contraste de couleur insuffisant (inférieur au rapport de contraste de couleur WCAG 2.0 recommandé de 4,5: 1 ) lorsqu'il est utilisé contre un fond clair. Les auteurs devront modifier/étendre manuellement ces couleurs par défaut pour garantir des rapports de contraste de couleur adéquats.
Le contenu qui doit être masqué visuellement, mais qui reste accessible aux technologies d'assistance telles que les lecteurs d'écran, peut être stylisé à l'aide de la .sr-onlyclasse. Cela peut être utile dans des situations où des informations visuelles ou des indices supplémentaires (comme la signification indiquée par l'utilisation de la couleur) doivent également être transmis aux utilisateurs non visuels.
<p class="text-danger">
<span class="sr-only">Danger: </span>
This action is not reversible
</p>Pour les contrôles interactifs masqués visuellement, tels que les liens « sauter » traditionnels, .sr-onlyils peuvent être combinés avec la .sr-only-focusableclasse. Cela garantira que la commande devient visible une fois focalisée (pour les utilisateurs de clavier voyants).
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>Bootstrap inclut la prise en charge de la prefers-reduced-motionfonctionnalité multimédia . Dans les navigateurs/environnements qui permettent à l'utilisateur de spécifier sa préférence pour le mouvement réduit, la plupart des effets de transition CSS dans Bootstrap (par exemple, lorsqu'une boîte de dialogue modale est ouverte ou fermée) seront désactivés. Actuellement, la prise en charge est limitée à Safari sur macOS et iOS.