Bonnes pratiques accessibilité web : Checklist complète 2026
En Bref : L'essentiel à retenir
- Le HTML sémantique reste la base de l'accessibilité en 2026, offrant structure et signification natives aux technologies d'assistance.
- La navigation au clavier doit permettre d'atteindre et d'utiliser tous les éléments interactifs avec un focus visible.
- Les tests automatisés détectent environ 30% des problèmes. Les tests manuels et avec technologies d'assistance sont indispensables.
- L'accessibilité bénéficie à tous : meilleur SEO, UX améliorée, conformité légale et audience élargie.
L'accessibilité web n'est plus une option en 2026. Entre les obligations légales renforcées et les attentes des utilisateurs, maîtriser les bonnes pratiques est devenu essentiel pour tout professionnel du web. Ce guide compile les recommandations les plus importantes pour créer des sites accessibles.
Les fondamentaux : HTML sémantique
Le HTML sémantique reste la pierre angulaire de l'accessibilité. Les éléments natifs portent une signification comprise par les navigateurs et les technologies d'assistance.
Structure de page
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Titre de page unique et descriptif</title>
</head>
<body>
<header>
<nav aria-label="Navigation principale">
<!-- Menu -->
</nav>
</header>
<main>
<h1>Titre principal unique</h1>
<!-- Contenu -->
</main>
<aside aria-label="Informations complémentaires">
<!-- Contenu secondaire -->
</aside>
<footer>
<!-- Pied de page -->
</footer>
</body>
</html>
Hiérarchie des titres
Respectez une hiérarchie logique sans sauter de niveaux :
<h1>Titre de la page</h1>
<h2>Section principale</h2>
<h3>Sous-section</h3>
<h3>Autre sous-section</h3>
<h2>Autre section principale</h2>
[!NOTE] Une page ne doit avoir qu'un seul
<h1>. Les lecteurs d'écran utilisent les titres pour naviguer rapidement dans le contenu.
Éléments sémantiques à utiliser
| Élément | Usage |
|---|---|
<nav> | Blocs de navigation |
<main> | Contenu principal (unique) |
<article> | Contenu autonome |
<section> | Section thématique |
<aside> | Contenu complémentaire |
<figure> / <figcaption> | Images avec légendes |
<blockquote> | Citations |
<time> | Dates et heures |
Navigation et clavier
Focus visible
Tout élément interactif doit avoir un indicateur de focus visible :
/* Ne faites JAMAIS ceci */
*:focus {
outline: none; /* INTERDIT */
}
/* Faites plutôt ceci */
:focus {
outline: 2px solid #0066cc;
outline-offset: 2px;
}
/* Ou avec :focus-visible pour les navigateurs modernes */
:focus-visible {
outline: 2px solid #0066cc;
outline-offset: 2px;
}
Ordre de tabulation
L'ordre de navigation au clavier doit suivre l'ordre visuel logique. Évitez de modifier le tabindex sauf cas spécifiques :
tabindex="0": inclut l'élément dans le flux de tabulationtabindex="-1": focusable par JavaScript mais pas par Tabtabindex > 0: À éviter - perturbe l'ordre naturel
Skip links
Permettez aux utilisateurs de sauter directement au contenu principal :
<body>
<a href="#main-content" class="skip-link">
Aller au contenu principal
</a>
<header>...</header>
<main id="main-content">...</main>
</body>
.skip-link {
position: absolute;
left: -9999px;
}
.skip-link:focus {
left: 0;
top: 0;
z-index: 1000;
background: #000;
color: #fff;
padding: 1rem;
}
Consultez notre guide complet sur les skip links pour plus de détails.
Images et médias
Alternatives textuelles
Chaque image doit avoir un attribut alt approprié :
<!-- Image informative -->
<img src="graphique.png"
alt="Graphique montrant une hausse de 25% des ventes en 2025">
<!-- Image décorative -->
<img src="bordure.png" alt="">
<!-- Image lien -->
<a href="/">
<img src="logo.png" alt="Retour à l'accueil - RGAA Checker">
</a>
<!-- Image complexe -->
<figure>
<img src="infographie.png"
alt="Infographie sur le processus d'audit"
aria-describedby="desc-infographie">
<figcaption id="desc-infographie">
Description détaillée de l'infographie...
</figcaption>
</figure>
Vidéos
- Sous-titres synchronisés obligatoires
- Transcription textuelle recommandée
- Audiodescription si informations visuelles non décrites
- Pas de lecture automatique
Voir notre article conformité vidéo et accessibilité.
Formulaires accessibles
Labels explicites
Chaque champ doit avoir un label associé :
<label for="email">Adresse email</label>
<input type="email" id="email" name="email"
aria-describedby="email-help">
<p id="email-help">Nous ne partagerons jamais votre email.</p>
Groupement de champs
Utilisez <fieldset> et <legend> pour les groupes de champs connexes :
<fieldset>
<legend>Adresse de livraison</legend>
<label for="rue">Rue</label>
<input type="text" id="rue" name="rue">
<!-- Autres champs -->
</fieldset>
Messages d'erreur
Les erreurs doivent être :
- Clairement identifiées
- Associées au champ concerné
- Descriptives (pas juste "erreur")
<label for="telephone">Téléphone</label>
<input type="tel" id="telephone" name="telephone"
aria-invalid="true"
aria-describedby="tel-error">
<p id="tel-error" class="error">
Le numéro de téléphone doit contenir 10 chiffres
</p>
Consultez notre guide des formulaires accessibles.
Couleurs et contrastes
Ratios minimaux WCAG
| Type de contenu | Ratio minimum |
|---|---|
| Texte normal | 4.5:1 |
| Texte large (>18pt ou >14pt bold) | 3:1 |
| Éléments graphiques | 3:1 |
| Focus | 3:1 |
Ne pas transmettre l'information par la couleur seule
<!-- MAUVAIS : seule la couleur indique le statut -->
<span style="color: red">Erreur</span>
<!-- BON : texte + icône + couleur -->
<span style="color: red">
<svg aria-hidden="true"><!-- icône erreur --></svg>
Erreur : champ obligatoire
</span>
Utilisez notre outil de vérification des contrastes.
Tableaux de données
Les tableaux doivent avoir des en-têtes correctement balisés :
<table>
<caption>Ventes par région en 2025</caption>
<thead>
<tr>
<th scope="col">Région</th>
<th scope="col">T1</th>
<th scope="col">T2</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Nord</th>
<td>150</td>
<td>180</td>
</tr>
</tbody>
</table>
Contenu dynamique
Annonces aux lecteurs d'écran
Utilisez les live régions ARIA pour les mises à jour dynamiques :
<!-- Zone de statut (polie) -->
<div aria-live="polite" aria-atomic="true">
3 résultats trouvés
</div>
<!-- Alerte urgente -->
<div role="alert">
Erreur de connexion. Veuillez réessayer.
</div>
[!TIP]
aria-live="polite"attend la fin de la lecture en cours.aria-live="assertive"interrompt immédiatement. Utilisez assertive avec parcimonie.
Modales accessibles
Les modales doivent :
- Capturer le focus à l'ouverture
- Confiner le focus pendant l'affichage
- Se fermer avec Echap
- Restaurer le focus après fermeture
Performance et accessibilité
Moins de JavaScript
Réduire le JavaScript bénéficie à l'accessibilité :
- Chargement plus rapide
- Moins de complexité pour les technologies d'assistance
- Dégradation gracieuse
Progressive enhancement
Partez d'une base fonctionnelle sans JavaScript, puis enrichissez :
<!-- Fonctionne sans JS -->
<details>
<summary>Voir plus</summary>
<p>Contenu supplémentaire</p>
</details>
Tests d'accessibilité
Outils automatisés
Utilisez des outils pour détecter les erreurs évidentes :
- RGAA Checker pour un audit rapide
- axe DevTools dans le navigateur
- Lighthouse dans Chrome DevTools
Tests manuels obligatoires
L'automatisation ne détecte qu'environ 30% des problèmes. Testez manuellement :
- Navigation clavier : Tab, Shift+Tab, Entrée, Espace, Echap
- Zoom 200% : le contenu reste-t-il lisible ?
- Lecteur d'écran : NVDA (Windows), VoiceOver (Mac/iOS)
- Mode contraste élevé : le contenu reste-t-il visible ?
Tests utilisateurs
Rien ne remplace les tests avec de vraies personnes en situation de handicap. Consultez notre article sur les tests utilisateurs et accessibilité.
Checklist rapide
Avant mise en production :
- Langue de la page déclarée (
<html lang="fr">) - Titre de page unique et descriptif
- Hiérarchie de titres logique (h1 > h2 > h3)
- Liens de saut vers le contenu
- Tous les champs de formulaire ont des labels
- Toutes les images ont des alternatives
- Contrastes suffisants (4.5:1 / 3:1)
- Navigation complète au clavier
- Focus visible sur tous les éléments interactifs
- Pas de pièges au clavier
- Vidéos avec sous-titres
- Pas de clignotement (plus de 3 fois/seconde)
Conclusion
L'accessibilité n'est pas une contrainte mais une opportunité d'améliorer l'expérience de tous vos utilisateurs. En intégrant ces bonnes pratiques dès le début de vos projets, vous créez des sites plus robustes, mieux référencés et conformes aux obligations légales.
Commencez par un audit RGAA automatisé pour évaluer votre situation actuelle, puis consultez notre guide complet du RGAA pour approfondir chaque critère.
Guides RGAA associés
Pour aller plus loin sur les sujets abordés dans cet article, consultez nos fiches techniques :
Chaque champ de formulaire doit avoir une étiquette (label) qui lui est liée explicitement.
Chaque image porteuse d'information doit avoir une alternative textuelle pertinente via l'attribut alt. Les images décoratives doivent avoir un attribut alt vide.
Le contraste entre la couleur du texte et la couleur de son arrière-plan doit être suffisamment élevé (4.5:1 pour le texte normal, 3:1 pour le grand texte).
Articles similaires
Votre site est-il conforme ?
Ne prenez pas de risques avec l'accessibilité. Lancez un audit complet de votre site en quelques minutes et obtenez un rapport détaillé des corrections à apporter.