12.1 — Accessibilité

⏱️ TL;DR — Bootstrap fournit une base accessible : rôles et attributs ARIA sur ses composants, gestion du focus (modale, offcanvas), classe visually-hidden, palette 5.3 pensée pour le contraste. Mais l’accessibilité finale dépend de vous : alt sur les images, labels sur les champs, aria-label sur les boutons-icônes, hiérarchie correcte des titres, respect du prefers-reduced-motion.

🎯 Objectifs

• Connaître ce que Bootstrap gère automatiquement.
• Ajouter ce qui manque (labels, alt, aria).
• Utiliser les utilitaires d’accessibilité.

Ce que Bootstrap fait pour vous

• Focus management : modale et offcanvas piègent le focus et le restituent à la fermeture.
• ARIA de base : les composants portent des rôles (role="alert", role="tablist"…) dans les exemples officiels.
• visually-hidden : masquer visuellement un texte tout en le laissant aux lecteurs d’écran.
• prefers-reduced-motion : Bootstrap réduit ses animations si l’utilisateur le demande.
• Palette 5.3 : les couleurs -emphasis et les combinaisons text-bg-* visent un contraste correct.

Ce que VOUS devez ajouter

<!-- Images : alt descriptif (ou vide si décoratif) -->
<img src="graphique.png" alt="Ventes en hausse de 20 % au T1">
 
<!-- Champs : toujours un label lié -->
<label for="q" class="form-label">Recherche</label>
<input id="q" class="form-control">
 
<!-- Boutons-icônes : un aria-label -->
<button class="btn btn-primary" aria-label="Fermer">
  <span aria-hidden="true">&times;</span>
</button>
 
<!-- Texte alternatif pour un composant visuel -->
<div class="spinner-border" role="status">
  <span class="visually-hidden">Chargement…</span>
</div>

Hiérarchie des titres

Gardez une structure logique h1 > h2 > h3 dans le DOM ; ajustez seulement l’apparence avec les classes (<h2 class="h4">). Ne sautez pas de niveau.

Focus visible

Ne supprimez jamais l’outline de focus sans le remplacer. Bootstrap fournit des styles :focus-visible ; personnalisez-les plutôt que de les enlever.

visually-hidden vs d-none

Lien d’évitement (skip link)

<a href="#contenu" class="visually-hidden-focusable">Aller au contenu</a>

⚠️ Piège — Un bouton qui ne contient qu’une icône (<button><i class="bi-trash"></i></button>) est muet pour un lecteur d’écran. Ajoutez un aria-label="Supprimer". C’est l’oubli d’accessibilité le plus fréquent.

💡 Pour un dev React — react-bootstrap gère le focus trap et les attributs ARIA des composants interactifs, mais pas vos alt/aria-label. Un lint d’accessibilité (eslint-plugin-jsx-a11y) attrape la plupart de ces oublis à la compilation.

✏️ Exercices

1. Rendre accessible un bouton qui n’affiche qu’une croix de fermeture.

2. Afficher un lien « Aller au contenu » visible seulement au focus clavier.

🧠 Quiz de révision

Chapitre suivant : 12.2 — RTL (droite à gauche)