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

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 de WAI-ARIA rôles et attributs, ces composants doivent également être compréhensibles et utilisables à l'aide de technologies d'assistance (telles que des lecteurs d'écran).

Parce que les composants de Bootstrap sont volontairement 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 plus transmettre avec précision la nature précise et la fonctionnalité 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ées dans tout le cadre pour des choses telles que les variations de boutons, les variations d'alerte, les indicateurs de validation de formulaire - peuvent conduire à un contraste de couleur insuffisant (ci-dessous le rapport de contraste des couleurs 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.

Contenu masqué visuellement

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 classe .visually-hidden. Cela peut être utile dans les 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 le “ignorer&rdquo ; liens, utilisez la classe .visually-hidden-focusable. Cela garantira que la commande devient visible une fois focalisée (pour les utilisateurs de clavier voyants). Attention, par rapport aux classes équivalentes .sr-only et .sr-only-focusable dans les versions précédentes, Bootstrap 5’s .visually- hidden-focusable est une classe autonome et ne doit pas être utilisée en combinaison avec la classe .visually-hidden.

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

Mouvement réduit

Bootstrap inclut la prise en charge des médias prefers-reduced-motion fonctionnalité. 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 spinners) seront ralentis.

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

Ressources additionnelles

• Règles pour l'accessibilité des contenus Web (WCAG) 2.1
• Le projet A11Y
• Documentation sur l'accessibilité MDN
• Vérificateur d'accessibilité Tenon.io
• Analyseur de contraste de couleur (CCA)
• “HTML Codesniffer&rdquo ; bookmarklet pour identifier les problèmes d'accessibilité
• Microsoft Accessibility Insights
• Outils de test Deque Axe
• Introduction à l'accessibilité Web