Accessibilité web (WCAG) : le guide pratique
Louis Cercle
Développeur Full-Stack
15% de la population mondiale vit avec un handicap. Un site inaccessible, c'est 1 milliard de personnes exclues. Au-delà de l'obligation légale, l'accessibilité est un impératif éthique et commercial.
Les 4 principes WCAG (POUR)
Les Web Content Accessibility Guidelines reposent sur 4 principes fondamentaux :
1. Perceptible
L'information doit être présentée de manière perceptible par tous. Alternatives textuelles, sous-titres, contrastes suffisants.
2. Opérable
L'interface doit être utilisable au clavier, sans limite de temps, sans provoquer de crises.
3. Understandable (Compréhensible)
Le contenu et le fonctionnement doivent être compréhensibles. Langage clair, comportements prévisibles.
4. Robuste
Le contenu doit être interprétable par les technologies d'assistance actuelles et futures.
Checklist accessibilité essentielle
Images et médias
<!-- Bon : alt descriptif -->
<img src="graphique-ventes.png"
alt="Graphique montrant une croissance de 50% des ventes en Q4 2024">
<!-- Images décoratives : alt vide -->
<img src="decoration.svg" alt="" role="presentation">
<!-- Vidéo avec sous-titres et audiodescription -->
<video controls>
<source src="demo.mp4" type="video/mp4">
<track kind="captions" src="captions-fr.vtt" srclang="fr" label="Français">
<track kind="descriptions" src="desc-fr.vtt" srclang="fr">
</video>Structure sémantique
<!-- Hiérarchie des titres -->
<h1>Titre principal (unique par page)</h1>
<h2>Section</h2>
<h3>Sous-section</h3>
<h2>Autre section</h2>
<!-- Landmarks ARIA -->
<header role="banner">...</header>
<nav role="navigation" aria-label="Menu principal">...</nav>
<main role="main">...</main>
<aside role="complementary">...</aside>
<footer role="contentinfo">...</footer>
<!-- Skip link pour la navigation au clavier -->
<a href="#main-content" class="skip-link">
Aller au contenu principal
</a>Formulaires accessibles
<!-- Labels explicites -->
<label for="email">Adresse email *</label>
<input type="email" id="email" name="email"
required
aria-required="true"
aria-describedby="email-help email-error">
<span id="email-help" class="help-text">
Nous ne partagerons jamais votre email
</span>
<span id="email-error" class="error" role="alert">
Veuillez entrer une adresse email valide
</span>
<!-- Groupe de radio buttons -->
<fieldset>
<legend>Mode de livraison</legend>
<input type="radio" id="standard" name="shipping" value="standard">
<label for="standard">Standard (5-7 jours)</label>
<input type="radio" id="express" name="shipping" value="express">
<label for="express">Express (2-3 jours)</label>
</fieldset>Contrastes et couleurs
Ratio de contraste minimum
4.5:1 pour le texte normal, 3:1 pour le texte large (18px+ ou 14px bold). Utilisez les DevTools ou WebAIM Contrast Checker pour vérifier.
Ne transmettez jamais une information uniquement par la couleur. Ajoutez des icônes, du texte ou des motifs.
Navigation au clavier
Tous les éléments interactifs doivent être accessibles au clavier :
- Tab : naviguer vers l'élément suivant
- Shift + Tab : revenir à l'élément précédent
- Enter/Space : activer un bouton ou lien
- Flèches : naviguer dans les menus, tabs, etc.
- Escape : fermer les modales et menus
/* Focus visible obligatoire */
:focus {
outline: 2px solid #0066FF;
outline-offset: 2px;
}
/* Ne JAMAIS faire ça */
:focus {
outline: none; /* INTERDIT ! */
}
/* Alternative si vous n'aimez pas l'outline par défaut */
:focus-visible {
outline: 2px solid #0066FF;
outline-offset: 2px;
border-radius: 4px;
}Outils de test
| Outil | Type | Usage |
|---|---|---|
| axe DevTools | Extension navigateur | Audit automatique complet |
| WAVE | Extension / en ligne | Visualisation des erreurs |
| Lighthouse | Chrome DevTools | Score accessibilité |
| NVDA / VoiceOver | Lecteur d'écran | Test réel utilisateur |
| Pa11y | CLI / CI | Tests automatisés |
Niveaux de conformité WCAG
Minimum vital. Contenu accessible aux technologies d'assistance.
Standard légal dans la plupart des pays. Objectif raisonnable pour tous les sites.
Excellence. Difficile à atteindre globalement, mais certains critères sont réalisables.
Conclusion
L'accessibilité n'est pas un feature bonus, c'est une responsabilité. Intégrez-la dès le design, testez régulièrement, et n'hésitez pas à impliquer des utilisateurs en situation de handicap dans vos tests.
Un site accessible est un site meilleur pour tous : navigation mobile facilitée, SEO amélioré, expérience utilisateur optimisée. C'est gagnant-gagnant.