Accessibilité web : 9 vérifications concrètes pour rendre un site plus facile à utiliser

Un site peut être techniquement fonctionnel tout en restant difficile à utiliser pour une partie de ses visiteurs. Texte trop peu contrasté, menu impossible à ouvrir au clavier, formulaire sans indication claire ou image porteuse d’information sans alternative : ces problèmes ne sont pas toujours visibles lors d’une navigation classique à la souris.

Une première vérification d’accessibilité ne nécessite pas forcément un audit complexe. En parcourant vos pages avec quelques méthodes simples, vous pouvez déjà repérer des obstacles importants et prioriser les corrections qui améliorent l’expérience de nombreux utilisateurs, y compris sur mobile, avec une connexion lente ou dans un environnement bruyant.

Objectif de cette checklist : examiner une page comme le ferait une personne qui navigue au clavier, agrandit le texte, utilise un lecteur d’écran ou a besoin d’instructions particulièrement explicites.

1. Parcourir toute la page avec le clavier

Commencez par désactiver la souris et utilisez la touche Tab pour avancer d’un élément interactif à l’autre. La combinaison Maj + Tab permet de revenir en arrière. Vérifiez que vous pouvez atteindre les liens, les boutons, le menu, les champs du formulaire et les éléments de fermeture d’une fenêtre.

Le point de contrôle le plus visible est le focus clavier : un contour ou un autre indicateur doit montrer clairement l’élément actuellement sélectionné. Si le focus disparaît sur un fond similaire, l’utilisateur ne sait plus où il se trouve. Évitez donc de supprimer systématiquement la propriété CSS outline sans la remplacer par un indicateur suffisamment contrasté.

Testez aussi les composants qui s’ouvrent et se ferment, comme un menu mobile, une liste déroulante ou une fenêtre modale. Il doit être possible de les utiliser sans souris et de comprendre comment revenir au contenu principal. Un piège fréquent consiste à ouvrir une fenêtre au clavier sans permettre ensuite d’en sortir facilement.

2. Vérifier l’ordre de navigation et le lien d’évitement

La touche Tab doit suivre un ordre logique, généralement de haut en bas : logo, navigation, contenu principal, barre latérale éventuelle, puis pied de page. Un ordre incohérent apparaît souvent après l’utilisation de positions CSS, de colonnes visuelles ou d’un code HTML qui ne correspond pas à l’ordre affiché.

Sur une page longue, un lien d’accès direct au contenu peut éviter de faire parcourir toute la navigation à chaque visite. Il est souvent placé au début du document et devient visible lorsqu’il reçoit le focus. Ce lien est particulièrement utile pour les personnes qui naviguent exclusivement au clavier.

3. Examiner la structure des titres

Les titres ne servent pas uniquement à agrandir du texte. Ils organisent la page et permettent de repérer rapidement une section avec un lecteur d’écran. Le titre principal de la page doit présenter le sujet, les grandes parties doivent utiliser des titres de niveau inférieur et les sous-parties doivent respecter cette hiérarchie.

Une structure comme h1, puis h2, puis h3 est généralement plus compréhensible qu’une succession de titres choisis uniquement pour leur apparence. Évitez de sauter un niveau sans raison et ne transformez pas un simple texte décoratif en titre s’il ne lance aucune section.

Pour contrôler ce point, désactivez temporairement les styles avec les outils du navigateur ou utilisez une extension qui affiche la hiérarchie des headings. Le résultat doit rester compréhensible même lorsque la mise en page n’est plus visible.

4. Contrôler les contrastes sans se fier à son écran

Un texte lisible sur votre écran peut devenir difficile à distinguer sur un autre appareil, avec une luminosité faible ou pour une personne ayant une perception différente des couleurs. Le contraste doit être vérifié entre le texte et son arrière-plan, mais aussi pour les éléments indispensables : bordures de champs, icônes, boutons et états de focus.

Ne vous reposez pas uniquement sur la couleur pour transmettre une information. Un message d’erreur rouge doit aussi comporter un texte explicite ou un symbole accompagné d’une indication compréhensible. De la même manière, un lien dans un paragraphe ne devrait pas être identifiable par la couleur seule si aucun autre indice ne le distingue.

Les outils de développement et les vérificateurs de contraste peuvent aider à repérer les cas limites. Ils ne remplacent toutefois pas un contrôle visuel des états réels : survol, focus, désactivation, erreur et validation.

5. Tester la page avec un zoom de 200 %

Agrandissez la page avec la fonction de zoom du navigateur, puis vérifiez que le contenu reste accessible sans défilement horizontal permanent. Les textes ne doivent pas se chevaucher et les boutons doivent rester utilisables. Une mise en page responsive bien conçue doit réorganiser les blocs plutôt que simplement les réduire.

Cette vérification révèle souvent des problèmes cachés : en-tête qui recouvre le contenu, fenêtres modales trop grandes, tableaux impossibles à parcourir ou boutons dont le libellé est tronqué. Contrôlez aussi la taille des zones cliquables sur mobile, en particulier dans les menus et les formulaires.

6. Donner une alternative utile aux images

Chaque image doit être examinée selon son rôle. Une photographie décorative peut avoir une alternative vide afin d’être ignorée par les technologies d’assistance. Une image qui transmet une information doit, au contraire, être décrite avec un texte alternatif qui restitue cette information.

Le bon texte alternatif ne consiste pas à empiler des mots-clés. Pour une photo montrant un écran affichant un tableau de bord, une description comme « tableau de bord présentant les visites d’un site par source » est plus utile que « image SEO marketing digital outil analytics ».

Les images contenant du texte demandent une vigilance particulière : si le texte est indispensable, il doit aussi être présent dans le contenu HTML ou dans une alternative réellement complète. Les graphiques doivent également fournir les données ou les tendances importantes sous une forme lisible.

7. Rendre les formulaires explicites

Un formulaire accessible indique clairement ce qui est attendu avant la saisie. Chaque champ doit avoir un libellé associé, et ce libellé ne devrait pas disparaître dès que l’utilisateur commence à écrire. Un texte d’exemple placé dans le champ ne remplace pas une véritable étiquette.

Les champs obligatoires, les formats attendus et les limites doivent être annoncés avant la validation. Si une erreur survient, elle doit préciser quel champ doit être corrigé et pourquoi. « Champ invalide » n’aide pas autant que « Adresse e-mail : utilisez une adresse au format nom@exemple.fr ».

Après l’envoi, assurez-vous que le message de confirmation ou d’erreur est identifiable au clavier et, lorsque nécessaire, annoncé aux technologies d’assistance. Ne supprimez pas automatiquement toutes les données saisies sans expliquer ce qui s’est passé.

8. Vérifier les liens, boutons et contenus en mouvement

Un lien doit annoncer sa destination. Des libellés comme « cliquez ici » ou « en savoir plus » deviennent ambigus lorsque plusieurs liens similaires apparaissent sur la même page. Reformulez-les pour préciser l’action ou le contenu visé.

Les boutons doivent également décrire une action : « Télécharger le guide » est plus précis que « Envoyer » lorsque le contexte ne suffit pas. Vérifiez que leur état désactivé ne devient pas illisible et que leur apparence ne repose pas uniquement sur une différence de couleur.

Les carrousels, vidéos en lecture automatique et animations peuvent gêner la lecture ou provoquer une distraction. Prévoyez des commandes visibles pour mettre en pause les contenus qui défilent. Pour les animations non indispensables, respectez aussi la préférence système indiquant que l’utilisateur souhaite réduire les mouvements.

9. Lire la page dans son ordre réel

Une page peut sembler claire visuellement tout en devenant incompréhensible lorsque son contenu est lu dans l’ordre du code HTML. Utilisez le mode de lecture du navigateur ou un lecteur d’écran pour écouter les premières sections. Cette expérience permet de repérer les menus annoncés trop tard, les informations répétées et les blocs dont le contexte manque.

Il n’est pas nécessaire de devenir spécialiste d’un lecteur d’écran pour réaliser ce premier test. Écoutez simplement si chaque élément est identifié : titre, lien, bouton, champ, état d’ouverture ou message d’erreur. Quand un composant visuel ne fournit aucune information à la lecture, son nom ou son état devra probablement être amélioré dans le HTML.

Comment prioriser les corrections trouvées

Toutes les anomalies ne présentent pas le même risque. Commencez par les obstacles qui empêchent une action essentielle : impossible de valider un formulaire, d’ouvrir le menu au clavier, de comprendre une erreur ou d’accéder au contenu principal.

1. Bloquant : une fonctionnalité ou une information importante est inaccessible.
2. Gênant : l’action reste possible, mais demande un effort important ou crée une confusion.
3. À améliorer : le contenu fonctionne, mais sa clarté ou son confort peut progresser.

Notez pour chaque problème l’URL, le contexte, le comportement observé, le résultat attendu et la correction envisagée. Cette méthode évite les retouches dispersées et permet de vérifier que les changements n’ont pas dégradé l’expérience sur un autre appareil.

Les outils automatiques sont utiles pour repérer certains contrastes, attributs manquants ou problèmes de structure. Ils ne peuvent pas juger seuls la pertinence d’un texte alternatif, la logique d’un parcours ou la clarté d’un message. Une vérification manuelle reste donc indispensable.

Pour un site professionnel, répétez cette checklist sur les modèles de pages les plus importants : accueil, article, page de service, recherche, connexion et formulaire de contact. L’accessibilité progresse rarement grâce à une correction isolée ; elle s’améliore lorsque ces contrôles deviennent une étape régulière de conception et de maintenance.