WCAG 2.1 AA : le guide pratique pour les développeurs
Les Web Content Accessibility Guidelines (WCAG) 2.1sont le standard international pour l'accessibilité web. Le niveau AAest celui exigé par l'EAA et la plupart des législations.
Ce guide couvre les critères les plus importants avec des exemples de code concrets.
👁 Perceivable (Perceptible)
1.1.1 Contenu non textuel
Toute image, icône ou graphique doit avoir une alternative textuelle.
<img src="photo.jpg" alt="Description du contenu">
1.3.1 Information et relations
La structure du contenu (titres, listes, tableaux) doit être transmise par le balisage HTML.
<h1>Titre principal</h1> <h2>Sous-section</h2> <ul> <li>Élément de liste</li> </ul>
1.4.3 Contraste minimum
Ratio de contraste ≥ 4.5:1 pour le texte normal, ≥ 3:1 pour le texte large (18px+ bold ou 24px+).
/* ✅ Bon */ color: #1a1a2e; /* sur fond blanc = ratio 16:1 */ /* ❌ Mauvais */ color: #aaa; /* sur fond blanc = ratio 2.3:1 */
1.4.11 Contraste des éléments UI
Les bordures de champs, boutons et indicateurs de focus doivent avoir un ratio ≥ 3:1.
input:focus {
outline: 2px solid #4338ca;
outline-offset: 2px;
}⌨️ Operable (Utilisable)
2.1.1 Clavier
Toute fonctionnalité doit être utilisable au clavier seul (Tab, Enter, Espace, flèches).
<button onClick={handleClick}>
Cliquer ici
</button>
<!-- ❌ Pas ça -->
<div onClick={handleClick}>Cliquer ici</div>2.4.1 Contourner les blocs
Un lien 'Skip to content' permet aux utilisateurs clavier de passer la navigation.
<a href="#main" class="skip-link"> Aller au contenu principal </a>
2.4.7 Visibilité du focus
L'indicateur de focus doit être visible sur tous les éléments interactifs.
:focus-visible {
outline: 2px solid #4338ca;
outline-offset: 2px;
}🧠 Understandable (Compréhensible)
3.1.1 Langue de la page
L'attribut lang doit être défini sur la balise html.
<html lang="fr">
3.3.1 Identification des erreurs
Quand un champ est invalide, l'erreur doit être décrite en texte (pas juste une bordure rouge).
<input aria-invalid="true" aria-describedby="err-email"> <p id="err-email" role="alert"> Veuillez entrer un email valide. </p>
3.3.2 Étiquettes et instructions
Chaque champ de formulaire doit avoir un label visible associé.
<label for="email">Email</label> <input id="email" type="email">
🔧 Robust (Robuste)
4.1.1 Parsing
Le HTML doit être valide : pas d'IDs dupliqués, balises fermées, attributs uniques.
<!-- ✅ Valide --> <div id="unique-1">...</div> <!-- ❌ IDs dupliqués --> <div id="same">...</div> <div id="same">...</div>
4.1.2 Nom, rôle, valeur
Les composants UI custom doivent exposer leur rôle et état via ARIA.
<button aria-expanded="false" aria-controls="menu-content" > Menu </button>
Votre site respecte-t-il ces critères ?
Vérifier maintenant