Une page peut sembler parfaitement correcte à l’écran et devenir difficile à utiliser dès que l’on retire la souris, que l’on agrandit le texte ou que l’on essaie de remplir un formulaire. Avant la mise en ligne, quelques tests simples permettent de repérer les obstacles les plus visibles.

Ouvrez la page publiée, et non seulement l’éditeur WordPress. Notez chaque problème avec son emplacement et son niveau de priorité. L’objectif n’est pas de réaliser un audit complet, mais d’éviter les blocages évidents.

1. Parcourez la page au clavier

Posez la souris et utilisez la touche Tab pour avancer d’un élément interactif à l’autre. Vérifiez que vous pouvez atteindre les liens, les boutons, le menu, les champs et les éventuelles fenêtres de dialogue.

À chaque étape, un indicateur de focus doit rester visible : contour, changement de fond ou autre repère clairement identifiable. Si vous ne savez plus quel élément est sélectionné, la navigation devient rapidement pénible.

Ouvrez aussi le menu au clavier. Vous devez pouvoir parcourir ses entrées, le fermer et poursuivre votre navigation sans rester bloqué. Faites le même test avec une fenêtre, une bannière ou tout autre élément qui apparaît par-dessus la page.

Résultat attendu : tous les éléments utilisables à la souris sont accessibles au clavier, dans un ordre compréhensible, sans piège ni blocage.

2. Vérifiez la lisibilité et le zoom

Agrandissez le contenu avec le zoom du navigateur. Observez si le texte reste lisible, si les lignes ne se chevauchent pas et si les boutons conservent un intitulé visible. Une page qui oblige à faire défiler horizontalement chaque phrase mérite une correction.

Regardez également la hiérarchie visuelle : un titre principal clairement identifiable, des sous-titres dans un ordre logique et des paragraphes suffisamment espacés. La taille ou la couleur ne doit pas être le seul moyen de comprendre qu’un élément est important.

Par exemple, un message indiquant qu’un champ est obligatoire ne devrait pas reposer uniquement sur un texte rouge. L’information doit aussi apparaître dans le libellé ou dans une indication compréhensible.

Résultat attendu : le contenu reste compréhensible lorsque le texte est agrandi et ne dépend pas uniquement de la mise en page ou de la couleur.

3. Contrôlez les contrastes

Examinez le texte courant, les titres, les liens, les boutons et leur arrière-plan. Soyez particulièrement attentif aux textes gris clair, aux boutons peu marqués et aux liens qui se fondent dans un paragraphe.

Un outil de vérification des contrastes peut aider à repérer les cas douteux. Utilisez-le comme un signal, pas comme une validation finale : il ne juge pas toute la structure de la page, ni la facilité réelle de navigation.

Testez aussi les différents états d’un élément : repos, survol, focus et erreur. Un bouton peut être lisible au repos et devenir presque invisible lorsqu’il reçoit le focus.

Résultat attendu : le texte et les commandes restent suffisamment distincts de leur arrière-plan dans les situations normales et lors de l’utilisation au clavier.

4. Inspectez les images, les liens et les titres

Les images

Pour chaque image, demandez-vous si elle apporte une information. Si oui, son texte alternatif doit décrire cette information de façon utile. Une photo illustrant un service, un graphique ou une capture d’écran ne devrait pas avoir une alternative vide.

À l’inverse, une image purement décorative ne doit pas ajouter une description inutile. Son alternative peut rester vide afin de ne pas interrompre la lecture.

Les liens et les boutons

Lisez les liens hors contexte. « Télécharger le formulaire d’inscription » permet de comprendre l’action ; « cliquez ici » ne donne aucune indication. Si plusieurs liens se suivent, leurs intitulés doivent permettre de les distinguer.

Vérifiez aussi la différence entre un lien qui mène vers une autre page et un bouton qui déclenche une action. Cette distinction aide à comprendre ce qui va se passer avant d’activer l’élément.

La structure

La page doit avoir un titre principal cohérent, puis des sous-titres organisés dans un ordre logique. Ne choisissez pas un niveau de titre uniquement parce que sa taille vous plaît : la hiérarchie sert à structurer le contenu.

Résultat attendu : chaque image a une alternative adaptée à son rôle, chaque lien décrit sa destination et la structure reste compréhensible sans dépendre de l’apparence graphique.

5. Remplissez le formulaire comme un visiteur

Commencez par naviguer entre les champs au clavier. Chaque champ doit avoir un libellé clairement associé : « Adresse e-mail » est plus utile qu’une indication placée uniquement dans un texte grisé à l’intérieur de la case.

Repérez les champs obligatoires avant de commencer. Envoyez ensuite le formulaire avec une information manquante ou incorrecte. Le message d’erreur doit expliquer le problème et indiquer comment le corriger.

Vérifiez enfin que les informations déjà saisies restent présentes après l’apparition d’une erreur. Devoir tout recommencer décourage particulièrement les personnes qui utilisent une navigation lente ou un outil d’assistance.

Résultat attendu : les champs sont identifiables, les obligations sont annoncées, les erreurs sont compréhensibles et les données saisies ne disparaissent pas sans raison.

La mini-checklist avant publication

• Bloquant : un élément essentiel est inaccessible au clavier, le focus disparaît, un menu piège la navigation ou le formulaire ne peut pas être corrigé.
• Gênant : un texte est difficile à lire, un lien est vague, une image informative n’a pas d’alternative utile ou un message d’erreur manque de précision.
• À améliorer : l’ordre des titres est perfectible, certains espacements nuisent au confort ou un état de bouton manque de visibilité.

Corrigez d’abord les blocages, puis refaites le parcours complet sur la page publiée. Les scanners automatiques et les vérificateurs de contraste peuvent accélérer le repérage, mais ils ne voient pas tout : ils ne remplacent ni une vérification manuelle, ni des tests avec des utilisateurs, ni un audit complet lorsque le projet l’exige.