Écrire du HTML pour les lecteurs d'écran : guide sémantique
En Bref : L'essentiel à retenir
- Le HTML sémantique est la base de l'accessibilité : les balises header, nav, main et footer créent des régions navigables par les lecteurs d'écran.
- La hiérarchie des titres (h1 à h6) doit être logique et sans saut de niveau pour permettre une navigation efficace du contenu.
- La première règle ARIA : n'utilisez jamais ARIA quand un élément HTML natif peut remplir le même rôle sémantique.
- Les listes structurées (ul, ol, dl) permettent aux utilisateurs de connaître le nombre d'éléments et de naviguer entre eux.
Un lecteur d'écran ne "voit" pas votre design. Il interprète votre code HTML pour construire une représentation du contenu. Un HTML bien structuré peut transformer une page confuse en expérience fluide. Voici comment écrire du code optimisé pour les technologies d'assistance.
Comment fonctionne un lecteur d'écran
Les lecteurs d'écran comme NVDA, JAWS ou VoiceOver construisent un arbre d'accessibilité à partir du DOM. Cet arbre expose :
- Le rôle de chaque élément (bouton, lien, titre...)
- Son nom accessible (le texte lu)
- Son état (coché, développé, sélectionné...)
- Sa valeur pour les éléments de formulaire
Un <div> avec du CSS ressemblant à un bouton reste un élément générique sans rôle. Un lecteur d'écran ne peut pas deviner son comportement.
[!NOTE] Selon le RGAA, critère 1.1 à 8.1, une grande partie de l'accessibilité repose sur un HTML sémantique correct avant même de parler d'ARIA.
Les régions de page : structure globale
Les éléments HTML5 sectionnants créent des landmarks (repères) que les utilisateurs de lecteurs d'écran peuvent utiliser pour naviguer rapidement.
<body>
<header>
<nav aria-label="Menu principal">...</nav>
</header>
<main>
<article>...</article>
<aside>Contenu connexe</aside>
</main>
<footer>...</footer>
</body>
Correspondance HTML/ARIA
| Élément HTML | Rôle ARIA implicite | Annonce lecteur d'écran |
|---|---|---|
<header> | banner | "Bannière" |
<nav> | navigation | "Navigation" |
<main> | main | "Contenu principal" |
<aside> | complementary | "Complémentaire" |
<footer> | contentinfo | "Informations de contenu" |
Avec NVDA, appuyez sur D pour sauter au prochain landmark. Cette navigation est impossible sans HTML sémantique.
La hiérarchie des titres
Les titres (<h1> à <h6>) créent un plan du document navigable. Les utilisateurs peuvent lister tous les titres et sauter directement à une section.
Règles essentielles
- Un seul
<h1>par page (sauf si plusieurs<article>indépendants) - Pas de saut de niveau : ne passez pas de
<h2>à<h4> - Titres descriptifs : "Nos services" plutôt que "Section 3"
<!-- Structure correcte -->
<h1>Guide de l'accessibilité</h1>
<h2>Les bases</h2>
<h3>Le HTML sémantique</h3>
<h3>Les contrastes</h3>
<h2>Techniques avancées</h2>
<h3>ARIA</h3>
[!TIP] Vérifiez votre hiérarchie de titres avec notre outil d'analyse de structure. Un plan cohérent améliore aussi votre SEO.
Les listes : structurer les énumérations
Les balises <ul>, <ol> et <dl> transmettent des informations précieuses :
<nav>
<ul>
<li><a href="/">Accueil</a></li>
<li><a href="/services">Services</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
Le lecteur d'écran annonce : "Liste de 3 éléments". L'utilisateur sait combien de choix sont disponibles et peut naviguer avec les flèches.
Liste de définitions
Pour les glossaires ou paires clé-valeur :
<dl>
<dt>RGAA</dt>
<dd>Référentiel Général d'Amélioration de l'Accessibilité</dd>
<dt>WCAG</dt>
<dd>Web Content Accessibility Guidelines</dd>
</dl>
Les tableaux de données
Un tableau correctement balisé permet de comprendre les relations entre cellules :
<table>
<caption>Tarifs par formule</caption>
<thead>
<tr>
<th scope="col">Formule</th>
<th scope="col">Prix mensuel</th>
<th scope="col">Audits inclus</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Starter</th>
<td>29 €</td>
<td>5</td>
</tr>
</tbody>
</table>
L'attribut scope indique si l'en-tête s'applique à une colonne (col) ou une ligne (row). Sans lui, le lecteur d'écran lit les cellules sans contexte.
Consultez le guide RGAA sur les tableaux pour les cas complexes.
Les formulaires accessibles
Chaque champ doit avoir un label associé programmatiquement :
<!-- Association explicite avec for/id -->
<label for="email">Adresse email</label>
<input type="email" id="email" name="email">
<!-- Association implicite par imbrication -->
<label>
Nom complet
<input type="text" name="fullname">
</label>
Messages d'erreur
Utilisez aria-describedby pour lier les messages aux champs :
<label for="password">Mot de passe</label>
<input type="password" id="password"
aria-describedby="password-hint password-error"
aria-invalid="true">
<p id="password-hint">Minimum 8 caractères</p>
<p id="password-error" role="alert">Le mot de passe est trop court</p>
La première règle ARIA
"Pas d'ARIA est meilleur que mauvais ARIA"
Avant d'ajouter des attributs ARIA, vérifiez si un élément HTML natif fait le travail :
<!-- Mauvais : div avec ARIA -->
<div role="button" tabindex="0" onclick="submit()">
Envoyer
</div>
<!-- Bon : bouton natif -->
<button type="submit">Envoyer</button>
Le <button> natif offre gratuitement :
- Le rôle "button"
- La navigation clavier (Tab)
- L'activation avec Entrée et Espace
- L'état désactivé avec
disabled
Éléments interactifs natifs à privilégier
| Besoin | Élément HTML | Évitez |
|---|---|---|
| Bouton d'action | <button> | <div role="button"> |
| Lien de navigation | <a href="..."> | <span onclick> |
| Case à cocher | <input type="checkbox"> | <div role="checkbox"> |
| Liste déroulante | <select> | <div role="listbox"> |
| Champ texte | <input> / <textarea> | <div contenteditable> |
Contenu dynamique et live régions
Quand le contenu change sans rechargement de page, les lecteurs d'écran doivent être notifiés :
<!-- Annonce immédiate -->
<div role="alert">Votre panier a été mis à jour</div>
<!-- Annonce polie (attend la fin de la lecture en cours) -->
<div aria-live="polite">3 résultats trouvés</div>
Utilisez role="alert" avec parcimonie : il interrompt la lecture en cours.
Checklist HTML pour lecteurs d'écran
- Structure avec
header,nav,main,footer - Hiérarchie de titres logique sans sauts
- Listes pour les énumérations
- Tableaux avec
captionetscope - Labels associés aux champs de formulaire
- Pas de
div/spanpour les éléments interactifs - ARIA uniquement quand HTML ne suffit pas
Tester votre HTML
- Extension aXe : audit automatisé des erreurs courantes
- Lecteur d'écran : NVDA (gratuit sur Windows), VoiceOver (macOS/iOS)
- Navigation clavier seule : tout est-il accessible ?
Notre guide de test avec lecteurs d'écran détaille les procédures.
Conclusion
Un HTML sémantique bien structuré représente 80% du travail d'accessibilité. Avant de chercher des solutions ARIA complexes, assurez-vous que vos bases HTML sont solides. Les lecteurs d'écran modernes interprètent parfaitement les éléments natifs.
Analysez la sémantique de vos pages avec RGAA Checker : notre outil vérifie automatiquement la structure, les titres et les régions de page.
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.
L'intitulé de chaque lien doit être explicite et permettre de comprendre la destination ou la fonction du lien, même hors contexte.
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.