Trois défauts courants, déguisés en monstres pour Halloween 2026. Le code tient en dix lignes au plus.
Monstre 1 · Le fantôme
Une image sans texte alternatif
Le problème
Quand une image n'a pas de texte alternatif, le lecteur d'écran d'une personne aveugle annonce « image », parfois le nom du fichier, et rien d'autre. Si l'image porte une information, comme un plat, un prix ou des horaires, cette information est perdue.
Sur le million de pages d'accueil analysées par WebAIM en février 2026, 53,1 % avaient au moins une image sans texte alternatif. Source : WebAIM Million 2026.
Le correctif, en HTML
<!-- Avant : le lecteur d'écran dit « image » ou le nom du fichier -->
<img src="tarte.jpg">
<!-- Après : une phrase courte, écrite par vous -->
<img src="tarte.jpg"
alt="Tarte aux abricots sur une planche en bois">
<!-- Image décorative : alt vide, elle est ignorée -->
<img src="vague.svg" alt="">
Vérifier vous-même
- Faites un clic droit sur l'image, puis « Inspecter » (Chrome, Edge, Firefox ; « Examiner l'élément » dans d'anciennes versions de Firefox).
- Dans la balise
img qui s'affiche, cherchez alt="…" : l'attribut doit exister et contenir une phrase utile, ou rien du tout si l'image est décorative. - Pour toute la page d'un coup : dans l'onglet « Console » de ces mêmes outils, collez
document.querySelectorAll('img:not([alt])').length puis appuyez sur Entrée. Le résultat doit être 0. Si le navigateur bloque le collage, tapez la phrase qu'il demande, puis recollez.
Pour qui c'est important
Les personnes aveugles ou très malvoyantes qui utilisent un lecteur d'écran. Mais aussi tous vos visiteurs quand l'image ne se charge pas, et les moteurs de recherche, qui s'appuient sur ce texte pour comprendre vos images.
Repères
Monstre 2 · La momie
Un texte trop pâle
Le problème
Un texte gris pâle sur fond blanc fatigue les yeux : on plisse, puis on abandonne. Le repère des WCAG est un contraste d'au moins 4,5:1 entre le texte et son fond, et de 3:1 pour le grand texte.
Sur le million de pages d'accueil analysées par WebAIM en février 2026, 83,9 % avaient du texte trop peu contrasté. Source : WebAIM Million 2026.
Le correctif, en CSS
/* Avant : gris pâle sur blanc, contraste 2,32:1 */
p { color: #AAAAAA; background-color: #FFFFFF; }
/* Après : gris foncé sur blanc, contraste 7:1 */
p { color: #595959; background-color: #FFFFFF; }
/* Seuil : 4,5:1 pour le texte courant, 3:1 pour le
grand texte (24 px, ou environ 18,5 px en gras).
Tout juste au seuil : #767676 sur blanc = 4,54:1 */
Vérifier vous-même
- Faites un clic droit sur le texte, puis « Inspecter ». Dans l'onglet « Styles » (« Règles » dans Firefox), notez la valeur de
color et celle du fond (background-color, parfois sur un élément parent). - Entrez les deux couleurs dans le vérificateur gratuit de WebAIM : WebAIM Contrast Checker.
- Le rapport doit atteindre 4,5:1 pour le texte courant. Dans Chrome et Edge, l'inspecteur l'affiche aussi quand vous cliquez sur la petite pastille de couleur.
Pour qui c'est important
Les personnes malvoyantes, beaucoup de personnes âgées, les personnes qui distinguent mal certaines couleurs, et tout le monde sur un téléphone en plein soleil.
Repères
Monstre 3 · La sorcière perdue
Un focus clavier invisible
Le problème
Quand on navigue au clavier avec la touche Tab, un cadre doit montrer où l'on se trouve. Beaucoup de sites suppriment ce cadre pour des raisons esthétiques : on tape Tab, Tab, Tab… et on ne sait plus où l'on est.
Le correctif, en CSS
/* Avant : le cadre de focus a été supprimé
a:focus, button:focus { outline: none; }
→ cherchez cette ligne et retirez-la */
/* Après : un cadre net autour de l'élément actif */
:focus-visible {
outline: 3px solid #1B2B4B; /* visez 3:1 au moins avec le fond */
outline-offset: 2px; /* un peu d'air autour */
}
:focus-visible affiche le cadre pendant la navigation au clavier, sans le montrer à la plupart des clics de souris. Choisissez une couleur qui ressort sur tous vos fonds.
Vérifier vous-même
- Cliquez dans la barre d'adresse du navigateur, puis appuyez sur Tab, encore et encore.
- À chaque pression, vous devez voir sans chercher quel lien, bouton ou champ est actif.
- Maj + Tab revient en arrière, Entrée active un lien. Si, à un moment, vous ne voyez plus où vous êtes, le cadre manque à cet endroit.
Pour qui c'est important
Les personnes qui ne peuvent pas utiliser de souris : tremblements, paralysie, douleurs à la main. Mais aussi celles qui préfèrent le clavier pour aller vite, ou dont le pavé tactile est en panne.
Repères
