Accessibilité

Un bref aperçu des fonctionnalités et des limites de Bootstrap pour la création de contenu accessible.

Sur cette page

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.

Présentation et limites

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 satisfont aux normes WCAG 2.1 (A/AA/AAA), Section 508 et aux normes et exigences d'accessibilité similaires.

Balisage structurel

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.

Composants interactifs

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.

Contraste des couleurs

Certaines combinaisons de couleurs qui composent actuellement la palette par défaut de Bootstrap - utilisée dans tout le cadre pour des éléments tels que les variations de boutons, les variations d'alerte, les indicateurs de validation de formulaire - peuvent entraîner un contraste de couleur insuffisant (inférieur au rapport de contraste de couleur de texte WCAG 2.1 recommandé de 4,5: 1 et le rapport de contraste des couleurs non textuelles WCAG 2.1 de 3:1 ), en particulier lorsqu'il est utilisé sur un fond clair. Les auteurs sont encouragés à tester leurs utilisations spécifiques de la couleur et, si nécessaire, à 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 .visually-hiddenclasse. 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="visually-hidden">Danger: </span>
  This action is not reversible
</p>

Pour les contrôles interactifs masqués visuellement, tels que les liens "sauter" traditionnels, utilisez la .visually-hidden-focusableclasse. Cela garantira que la commande devient visible une fois focalisée (pour les utilisateurs de clavier voyants). Attention, par rapport à l'équivalent .sr-onlyet .sr-only-focusableaux classes des versions précédentes, Bootstrap 5 .visually-hidden-focusableest une classe autonome et ne doit pas être utilisée en combinaison avec la .visually-hiddenclasse.

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

Mouvement réduit

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, ou l'animation de glissement dans les carrousels) seront désactivés et les animations significatives ( tels que les fileuses) seront ralentis.

Sur les navigateurs qui prennent en charge prefers-reduced-motion, et où l'utilisateur n'a pas explicitement signalé qu'il préférerait un mouvement réduit (c'est-à-dire où prefers-reduced-motion: no-preference), Bootstrap permet un défilement fluide à l'aide de la scroll-behaviorpropriété.