♿ Le cours : une page pour tout le monde
Une page accessible est une page plus simple pour tout le monde : sous-titres utiles dans un train, contrastes bienvenus en plein soleil, navigation au clavier appréciée de qui se fatigue du trackpad. C'est aussi une obligation légale pour de nombreux services publics et grandes entreprises (en France, le référentiel RGAA). Les bonnes pratiques de cette fiche sont, pour la plupart, des conséquences d'un HTML bien écrit.
Pour qui ? Et que faut-il prévoir ?
| Situation | Besoin | Ce que tu fais |
|---|
| vision (cécité, basse vision) | lecteur d'écran, zoom, contrastes | alt, titres, label, contrastes suffisants, mise en page qui supporte un zoom de 200 % |
| audition | alternative au son | sous-titres et transcriptions des vidéos |
| motricité | clavier seul, grandes zones cliquables | tout atteignable avec Tab, boutons assez grands |
| compréhension, fatigue | textes clairs, pas de surcharge | phrases courtes, titres, pas d'animation envahissante |
| situation (soleil, réseau lent) | lisibilité, légèreté | bons contrastes, images compressées |
Des images avec le bon alt
Le texte alternatif dépend du rôle de l'image : on ne décrit pas toujours son apparence, on dit ce qu'elle apporte.
| Image | alt à écrire |
|---|
| informative (graphique, photo qui illustre) | ce qu'elle montre ou démontre : alt="Courbe du sinus entre −1 et 1" |
| décorative (filet, ornement) | vide : alt="", le lecteur d'écran l'ignore |
| dans un lien ou un bouton | la destination ou l'action : alt="Fiche Python" |
| texte dans l'image (logo) | le texte lu : alt="Algorism" |
<img src="sinus.png" alt="Courbe du sinus : elle oscille entre -1 et 1">
<img src="separateur.png" alt="">
<a href="python.html"><img src="python.png" alt="Fiche Python"></a>
Naviguer au clavier
- L'ordre de tabulation suit l'ordre des éléments dans le code : écris le HTML dans l'ordre logique de lecture.
- Les liens, boutons et champs sont focusables automatiquement ; une
<div onclick> ne l'est pas. Utilise l'élément natif adapté (<button>, <a href>).
- Garde un focus visible : un contour net autour de l'élément actif. Le supprimer rend la navigation impossible à suivre.
- Un lien d'évitement en tête de page (« Aller au contenu ») permet de sauter le menu : il peut rester caché tant qu'il n'a pas le focus.
.evitement {
position: absolute;
left: -999px;
}
.evitement:focus {
left: 1rem;
top: 1rem;
padding: 0.5rem 1rem;
background: #ffffff;
}
:focus-visible {
outline: 3px solid #2563eb;
outline-offset: 2px;
}
Contrastes et couleurs
Le texte doit se détacher du fond : le rapport de contraste minimal (norme WCAG) est de 4,5:1 pour un texte courant et 3:1 pour un grand texte. Un gris clair sur fond blanc échoue souvent. Ne transmets jamais une information par la couleur seule (« les champs en rouge sont erronés ») : ajoute un texte ou une icône. Des outils en ligne calculent le contraste de deux couleurs.
ARIA : en dernier recours
Les attributs aria-* complètent le HTML quand aucun élément natif ne convient. Première règle d'ARIA : si une balise native fait le travail, utilise-la (<button> plutôt que <div role="button">). Les plus utiles :
| Attribut | Usage |
|---|
aria-label="…" | donne un nom à un élément sans texte visible (bouton-icône, <nav> supplémentaire) |
aria-labelledby="id" | prend comme nom le texte d'un autre élément |
aria-hidden="true" | retire un élément décoratif de ce que lit le lecteur d'écran |
aria-live="polite" / role="status" | annonce un message qui apparaît sans rechargement (résultat, erreur) |
aria-expanded="true|false" | indique si un volet ou un menu est déplié |
<p id="statut" role="status" aria-live="polite"></p>
Tester son travail
- Au clavier : débranche la souris et parcours la page avec
Tab ; vois-tu toujours où tu es ? Peux-tu tout activer ?
- Au zoom : passe à 200 % : rien ne doit se chevaucher ni être coupé.
- Aux lecteurs d'écran : essaie NVDA (gratuit, Windows) ou VoiceOver (macOS, iPhone) sur une page.
- Aux outils : la panneau Lighthouse du navigateur, les extensions WAVE ou axe, et le validateur HTML du W3C repèrent beaucoup de fautes.
Et le référencement ?
Les mêmes bonnes pratiques aident les moteurs de recherche : un <title> unique et précis par page, une <meta name="description"> d'une phrase, des titres hiérarchisés, des liens explicites, des adresses lisibles, des pages légères et adaptées au téléphone (<meta name="viewport">).
