Chaque année, l'organisation américaine à but non lucratif WebAIM soumet à un contrôle d'accessibilité automatique les pages d'accueil du million de sites les plus visités. Les résultats sont d'une constance frappante : ce sont toujours les six mêmes problèmes qui ressortent, et à eux seuls ils représentent l'immense majorité de ce que le contrôle détecte. Aucun n'est difficile à corriger, et plusieurs naissent non pas dans le code, mais dans l'outil de gestion du site, chez les personnes qui rédigent les pages. Voici chacun d'eux, en termes simples : ce que c'est, qui en souffre, comment le repérer vous-même et quoi changer.
Ce que nous apprend un million de pages d'accueil
Dans le WebAIM Million 2026, l'analyse de février 2026, 95,9 % des pages d'accueil présentaient au moins une erreur détectable au regard des WCAG, les règles internationales pour des sites web accessibles. Dans l'édition 2025, ce chiffre était de 94,8 %. Le contrôle a relevé en moyenne 56,1 erreurs par page d'accueil, contre 51 l'année précédente.
Selon WebAIM, environ 96 % de toutes les erreurs détectées se répartissent en six catégories seulement. Voici la part des pages d'accueil concernées par chacune en 2026 :
- Texte trop peu contrasté : 83,9 %
- Images sans texte alternatif : 53,1 %
- Champs de formulaire sans étiquette : 51 %
- Liens vides : 46,3 %
- Boutons vides : 30,6 %
- Langue de la page non indiquée : 13,5 %
Un texte difficile à lire
De quoi s'agit-il. Un texte qui ne se détache pas assez de son fond. Gris clair sur blanc, blanc sur jaune pâle, caractères fins sur une photo. L'écart entre la couleur du texte et celle du fond se mesure par un _rapport de contraste_, un nombre qui va de 1:1 (aucune différence) à 21:1 (noir sur blanc). Les règles demandent au moins 4,5:1 pour un texte normal et 3:1 pour un grand texte, soit environ 24 px et plus, ou environ 19 px et plus en gras.
Qui est concerné. Les personnes malvoyantes ou daltoniennes, et beaucoup de visiteurs plus âgés, car avec l'âge on a besoin de davantage de contraste. Mais aussi toute personne qui consulte vos horaires d'ouverture sur son téléphone en terrasse, en plein soleil : un texte gris pâle y disparaît tout simplement.
Comment le repérer vous-même. Réglez la luminosité de votre écran au minimum, ou regardez votre site sur votre téléphone à la lumière du jour. Si vous devez vous rapprocher ou plisser les yeux pour lire, le contraste est trop faible. Soyez particulièrement attentif au pied de page, aux légendes et aux textes posés sur des images.
Comment le corriger. Assombrissez le texte ou éclaircissez le fond. Sur fond blanc, le gris moyen #999999 n'atteint qu'environ 2,8:1, alors que le gris un peu plus foncé #767676 atteint tout juste 4,5:1.
/* Avant : trop clair sur blanc */
.note {
color: #999999;
}
/* Après : suffisant pour un texte normal */
.note {
color: #595959;
}Dans la plupart des créateurs de sites, vous modifiez la couleur des textes dans les réglages du thème ou des styles, sans toucher au code.
Des images sans description
De quoi s'agit-il. Le _texte alternatif_ (souvent appelé « alt ») est une courte description écrite associée à une image. Les visiteurs ne le voient normalement pas, mais certains logiciels le lisent à voix haute. S'il manque, ces logiciels n'ont rien à dire de l'image.
Qui est concerné. Les personnes aveugles utilisent souvent un _lecteur d'écran_, un logiciel qui lit à voix haute le contenu de l'écran. Face à une image sans texte alternatif, il lit parfois le nom du fichier, par exemple « IMG tiret bas 4032 point jpg », ou passe l'image sous silence. Si cette image était une bannière annonçant « Fermé le lundi », le message est perdu.
Comment le repérer vous-même. Ouvrez les réglages de l'image dans votre système de gestion de contenu (CMS) et cherchez un champ intitulé « Texte alternatif », « Alt » ou « Description de l'image ». S'il est vide pour une image qui a du sens, le problème est là.
Comment le corriger. Décrivez à quoi sert l'image, pas seulement ce qu'elle montre. Restez bref, une phrase suffit en général.
- À éviter : « image », « photo1.jpg » ou « boulangerie, pain, Liège, meilleure boulangerie, pain frais »
- Bien : « Boulanger sortant des pains au levain d'un four à bois »
- Pour un logo qui renvoie vers la page d'accueil : « Boulangerie Janssens, accueil »
Les images purement décoratives, comme une texture de fond ou un séparateur, doivent avoir un texte alternatif _vide_, pour que les lecteurs d'écran les ignorent. Beaucoup de CMS proposent pour cela une option « image décorative ».
Des champs de formulaire sans étiquette
De quoi s'agit-il. Chaque champ d'un formulaire a besoin d'un nom visible, comme « Adresse e-mail », relié au champ dans le code de la page. Un raccourci fréquent consiste à placer l'indication en gris à l'intérieur du champ. Ce texte d'exemple disparaît dès que l'on commence à taper et il est souvent mal relié.
Qui est concerné. Une personne utilisant un lecteur d'écran, face à un formulaire de contact avec trois cases vides, risque d'entendre trois fois « zone de texte, vide », sans savoir laquelle sert au nom, à l'adresse e-mail ou au message. Et quelqu'un qui pilote son ordinateur à la voix ne peut pas dire « cliquer sur e-mail » si le champ n'a pas de nom.
Comment le repérer vous-même. Cliquez sur le texte de l'étiquette à côté d'un champ. Si le curseur se place dans le champ, les deux sont reliés. S'il ne se passe rien, ou s'il n'y a aucune étiquette en dehors du champ, il faut corriger.
Comment le corriger. Donnez à chaque champ une étiquette visible et reliez-la au champ. En code, cela ressemble à ceci :
<!-- Avant : seulement un texte d'exemple --> <input type="email" placeholder="E-mail" /> <!-- Après : une étiquette reliée au champ --> <label for="email">Adresse e-mail</label> <input type="email" id="email" />
Le for de l'étiquette et l'id du champ portent la même valeur, et c'est ce qui les relie. La plupart des créateurs de formulaires le font automatiquement, à condition de remplir le réglage de l'étiquette et de ne pas la masquer.
Des liens et des boutons qui ne disent rien
Dans les deux cas, ce sur quoi l'on peut cliquer n'a aucun texte que les logiciels peuvent lire à voix haute.
Les liens vides
De quoi s'agit-il. Un lien qui ne contient qu'une icône, ou une image sans texte alternatif, et qui n'a donc pas de nom. Les icônes de réseaux sociaux et les logos cliquables en sont les exemples classiques.
Qui est concerné. Les utilisateurs de lecteur d'écran peuvent afficher la liste de tous les liens d'une page pour s'orienter. Les liens vides y apparaissent comme un simple « lien », ou comme une longue adresse web lue lettre par lettre. Qui cherche votre page Instagram doit deviner.
Comment le repérer vous-même. Repérez les liens composés uniquement d'une icône ou d'une image : icônes de réseaux sociaux, logo, petite flèche. Vérifiez ensuite dans votre CMS que chacun a un texte ou un texte alternatif qui indique sa destination.
Comment le corriger. Donnez à l'icône ou à l'image un texte alternatif qui nomme la destination : « Instagram », « Facebook », « Boulangerie Janssens, accueil ».
Les boutons vides
De quoi s'agit-il. La même chose, mais pour les boutons : un bouton qui n'affiche qu'une icône, comme une loupe pour la recherche, trois traits pour le menu, une croix pour fermer une fenêtre ou des flèches sur un carrousel de photos.
Qui est concerné. Sur un téléphone, une personne utilisant un lecteur d'écran qui arrive sur le bouton du menu n'entend que « bouton ». Ouvre-t-il le menu, lance-t-il une recherche, ferme-t-il quelque chose ? Sans le savoir, elle risque de ne jamais atteindre le reste de votre site.
Comment le repérer vous-même. Chaque bouton qui n'affiche qu'une icône a besoin d'un nom.
Comment le corriger. Ajoutez un court texte que les lecteurs d'écran lisent, sans rien changer à l'apparence :
<button> <svg>...</svg> <span class="visually-hidden">Rechercher</span> </button>
La classe visually-hidden est un outil courant qui masque le texte à l'écran tout en le laissant disponible pour les lecteurs d'écran. Beaucoup de thèmes en prévoient déjà une. Dans un créateur de sites, cherchez dans les réglages du bouton un champ « étiquette » ou « nom accessible ».
Une page qui n'indique pas sa langue
De quoi s'agit-il. Chaque page doit indiquer dans son code la langue dans laquelle elle est rédigée. C'est un seul réglage, en général dans les paramètres du site ou du thème.
Qui est concerné. Un lecteur d'écran s'appuie sur ce réglage pour choisir sa voix et sa prononciation. Si une page en français est déclarée en anglais, ou pas déclarée du tout, le texte est lu avec une prononciation anglaise et devient très difficile à suivre. C'est d'autant plus important pour les sites multilingues, très courants en Belgique : chaque version linguistique doit indiquer sa propre langue.
Comment le repérer vous-même. Ouvrez votre page, affichez son code source (Ctrl+U dans la plupart des navigateurs sous Windows, Cmd+Option+U sur Mac) et regardez l'une des premières lignes. Vous devriez y voir quelque chose comme ceci :
<html lang="fr"></html>
Ici, fr signifie français. Le néerlandais est nl, l'allemand de et l'anglais en. Si la partie lang manque ou indique la mauvaise langue, modifiez la langue du site dans votre CMS ou demandez à votre développeur de la corriger.
Conseils de rédaction pour les gestionnaires de contenu
Plusieurs de ces problèmes naissent chaque jour dans le CMS, chez des personnes qui ne touchent jamais au code. Quelques bonnes habitudes suffisent à éviter la plupart d'entre eux.
- Rédigez des textes de lien compréhensibles hors contexte. « En savoir plus » et « cliquez ici » ne disent rien lorsqu'ils sont lus dans une liste de liens. Écrivez plutôt « En savoir plus sur nos horaires d'ouverture » ou « Télécharger la liste de prix 2026 (PDF, 2 Mo) ».
- Remplissez le texte alternatif de chaque image porteuse de sens, et décrivez sa fonction. Demandez-vous ce qu'un visiteur perdrait si l'image ne s'affichait pas. C'est votre texte alternatif.
- Signalez les images décoratives comme décoratives plutôt que de leur inventer une description.
- Respectez l'ordre des titres. Une page a un seul titre principal, puis des titres de niveau 2 pour les sections et de niveau 3 pour les sous-parties, sans sauter de niveau. Choisissez un titre pour son sens, pas pour sa taille ; la taille se règle dans la mise en forme. Les utilisateurs de lecteur d'écran passent d'un titre à l'autre pour parcourir une page.
- Ne comptez pas uniquement sur la couleur. « Les champs obligatoires sont en rouge » n'aide pas une personne qui ne distingue pas le rouge. Ajoutez aussi un mot ou un symbole.
Ce qu'un contrôle automatique ne peut pas juger
Les contrôles automatiques repèrent très bien ces six problèmes, parce qu'ils se mesurent : une combinaison de couleurs atteint 4,5:1 ou non.
Mais un contrôle peut seulement vous dire si une image _a_ un texte alternatif, pas si ce texte est utile. « Photo » passe le contrôle sans aider personne. De même, un contrôle voit qu'un lien contient du texte, mais pas que « cliquez ici » ne veut rien dire. Il ne peut pas non plus juger si votre page s'utilise facilement au clavier seul, ni si votre langage est clair. Les contrôles automatiques trouvent une bonne partie des problèmes courants, mais pas tous.
Après avoir corrigé ce que le contrôle signale, regardez donc aussi par vous-même. Lisez vos textes alternatifs et vos textes de lien à voix haute. Parcourez la page uniquement avec la touche Tab. Zoomez votre navigateur à 200 % et vérifiez que tout reste lisible et utilisable.
Découvrez où en est votre site
Pour savoir lesquels de ces six problèmes se trouvent sur votre propre site, vérifiez gratuitement une page. Le rapport explique en termes simples ce qui ne va pas, qui est concerné, où cela se trouve sur la page et comment le corriger, et les guides d'ibin vous accompagnent pas à pas dans les corrections. Une fois votre page d'accueil en ordre, connectez-vous avec votre adresse e-mail pour vérifier gratuitement jusqu'à 200 pages du même site.
Voyez où en est votre site
Vérifiez gratuitement une page, sans compte. Vous recevez une liste claire de ce qu’il faut corriger en premier, avec des images de l’endroit où se trouve chaque problème.
