Aller au contenu principal

Module Bootstrap.7 – Accessibilité & performance

Objectif​

Maîtriser l'accessibilité Bootstrap (A11Y) et optimiser les performances pour créer des sites Bootstrap accessibles et performants.

Théorie​

Accessibilité Bootstrap​

Bootstrap inclut :

  • ✅ Support ARIA
  • ✅ Navigation clavier
  • ✅ Contraste des couleurs
  • ✅ Focus visible
  • ✅ Screen readers

ARIA dans Bootstrap​

Bootstrap ajoute automatiquement :

<!-- Navbar -->
<nav class="navbar" role="navigation" aria-label="Navigation principale">

<!-- Modal -->
<div class="modal" role="dialog" aria-modal="true" aria-labelledby="modalTitle">

<!-- Dropdown -->
<button aria-expanded="false" aria-haspopup="true">

Bonnes pratiques :

  • Utiliser les composants Bootstrap (ARIA inclus)
  • Ajouter aria-label si nécessaire
  • Vérifier avec outils d'accessibilité

Bootstrap supporte :

  • Tab : Navigation entre éléments
  • Entrée : Activer boutons/liens
  • Espace : Activer boutons
  • Flèches : Navigation dans dropdowns/carousels
  • ESC : Fermer modals

Focus visible :

/* Bootstrap inclut des styles de focus */
.btn:focus {
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

Contraste des couleurs​

Bootstrap respecte WCAG :

  • Texte sur fond : Contraste suffisant
  • Liens : Contraste approprié
  • Boutons : Contraste vérifié

Vérifier :

  • Utiliser WAVE ou axe DevTools
  • Tester avec Color Contrast Checker
  • Vérifier tous les états (hover, active)

Performance Bootstrap​

Bundle size​

Bootstrap complet :

  • CSS : ~200KB (non minifié)
  • CSS : ~150KB (minifié)
  • JS : ~60KB (minifié)

Optimisations :

1. Imports sélectifs (SCSS) :

// Importer seulement ce dont vous avez besoin
@import "bootstrap/grid";
@import "bootstrap/buttons";
@import "bootstrap/cards";
// Pas tout Bootstrap

2. Purge CSS :

// webpack.config.js ou tailwind.config.js
purge: {
    content: ['./src/**/*.html'],
}

3. Lazy load JavaScript :

<script src="bootstrap.bundle.min.js" defer></script>

Critical CSS​

Extraire le CSS critique :

<head>
    <style>
        /* CSS critique (above-the-fold) */
        .navbar { }
        .hero { }
    </style>
    <link rel="preload" href="bootstrap.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
</head>

Optimisation des images​

Dans les composants Bootstrap :

<!-- Carousel avec images optimisées -->
<img src="image.webp" 
     srcset="image-small.webp 300w, image-large.webp 1200w"
     loading="lazy"
     alt="Description">

Bonnes pratiques A11Y​

1. Utiliser les composants Bootstrap​

✅ Bon :

<button class="btn btn-primary" type="button">Bouton</button>

❌ Mauvais :

<div class="btn btn-primary" onclick="...">Div stylé comme bouton</div>

Pourquoi : Composants Bootstrap = accessibilité incluse.

2. Labels sur les formulaires​

✅ Bon :

<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email">

❌ Mauvais :

<input type="email" class="form-control" placeholder="Email">

Pourquoi : Labels = accessibilité.

3. Navigation clavier​

Tester :

  • Navigation uniquement au clavier (Tab)
  • Tous les éléments interactifs accessibles
  • Focus visible

4. Contraste​

Vérifier :

  • Texte sur fond : Ratio 4.5:1 minimum
  • Liens : Contraste suffisant
  • Boutons : Contraste vérifié

5. ARIA approprié​

Ajouter si nécessaire :

<nav aria-label="Navigation principale">
<button aria-label="Fermer la modal">
<div role="alert">Message important</div>

Outils de test​

Accessibilité :

  • WAVE : Extension navigateur
  • axe DevTools : Extension Chrome
  • Lighthouse : Audit accessibilité
  • Screen readers : NVDA, JAWS, VoiceOver

Performance :

  • Lighthouse : Score performance
  • PageSpeed Insights : Analyse complète
  • Bundle Analyzer : Taille du bundle

Exercices guidés​

Exercice 1 : Test d'accessibilité​

Testez votre site Bootstrap :

  • WAVE (0 erreurs)
  • Navigation clavier
  • Contraste des couleurs
  • Screen reader (si possible)

Exercice 2 : Optimisation bundle​

Optimisez Bootstrap :

  • Imports sélectifs
  • Purge CSS
  • Comparez la taille avant/après

Exercice 3 : Critical CSS​

Extrayez le CSS critique :

  • Identifiez le CSS above-the-fold
  • Inline dans <head>
  • Chargez le reste en async

Exercice 4 : ARIA​

Ajoutez ARIA approprié :

  • Labels manquants
  • Roles si nécessaire
  • aria-label pour icônes

Exercice 5 : Performance​

Optimisez les performances :

  • Lazy load images
  • Defer JavaScript
  • Minification
  • Testez avec Lighthouse

❌ Erreurs fréquentes​

Erreur 1 : Ignorer l'accessibilité​

❌ Mauvais :

<div class="btn" onclick="...">Action</div>

✅ Bon :

<button class="btn btn-primary" type="button">Action</button>

Pourquoi : Utiliser les éléments sémantiques.

Erreur 2 : Bundle trop gros​

❌ Mauvais :

@import "bootstrap"; // Tout Bootstrap

✅ Bon :

// Imports sélectifs
@import "bootstrap/grid";
@import "bootstrap/buttons";

Pourquoi : Réduire la taille = meilleure performance.

Erreur 3 : Pas de labels​

❌ Mauvais :

<input type="email" class="form-control" placeholder="Email">

✅ Bon :

<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email">

Pourquoi : Accessibilité et UX.

Erreur 4 : Contraste insuffisant​

❌ Mauvais :

<button class="btn btn-light">Texte clair sur fond clair</button>

✅ Bon :

<button class="btn btn-dark">Texte clair sur fond foncé</button>

Pourquoi : WCAG exige un contraste minimum.

Erreur 5 : JavaScript bloquant​

❌ Mauvais :

<script src="bootstrap.js"></script>
<!-- Bloque le rendu -->

✅ Bon :

<script src="bootstrap.js" defer></script>
<!-- Non bloquant -->

Pourquoi : Performance (First Contentful Paint).

🚀 Mini-projet​

Mission : Optimiser un site Bootstrap pour A11Y et performance

Prenez un site Bootstrap et optimisez-le :

Accessibilité :

  • WAVE : 0 erreurs
  • Navigation clavier fonctionnelle
  • Contraste WCAG AA
  • ARIA approprié
  • Labels sur tous les formulaires

Performance :

  • Bundle optimisé (imports sélectifs)
  • Critical CSS extrait
  • Images optimisées
  • JavaScript defer
  • Lighthouse score > 90

Critères :

  • ✅ Accessibilité complète (WCAG AA)
  • ✅ Performance optimisée
  • ✅ Bundle réduit
  • ✅ Tests passés (WAVE, Lighthouse)

Objectif : Créer un site Bootstrap accessible et performant.

Validation : Vous pouvez passer au module suivant quand vous maîtrisez l'accessibilité et la performance Bootstrap et avez optimisé un site.