Accessibilité web : 9 vérifications simples avant de publier une page

Une page peut fonctionner correctement avec une souris et rester difficile, voire impossible, à utiliser pour une personne qui navigue au clavier, agrandit le texte ou utilise un lecteur d’écran. L’accessibilité web ne se résume donc pas à ajouter une option dans les paramètres : elle se vérifie dans la structure, les contenus et les interactions.

Avant de publier une page, une courte vérification manuelle permet déjà d’écarter de nombreux obstacles. Voici une méthode adaptée à un site vitrine, un blog, une boutique ou une landing page, sans nécessiter d’outil payant.

1. Parcourir toute la page au clavier

Commencez par recharger la page, puis laissez la souris de côté. Appuyez sur la touche Tabulation pour avancer d’un élément interactif à l’autre et sur Majuscule + Tabulation pour revenir en arrière. Les liens, boutons, champs de formulaire et menus doivent apparaître dans un ordre logique.

Le point de focus, c’est-à-dire l’élément actuellement sélectionné, doit rester visible. Si le contour disparaît sur un arrière-plan clair ou si la sélection saute directement du menu au pied de page, l’utilisateur ne sait plus où il se trouve.

• Le premier élément utile est-il accessible sans parcourir une longue navigation ?
• Les éléments sont-ils parcourus dans un ordre cohérent avec la lecture ?
• Un menu déroulant peut-il être ouvert et refermé au clavier ?
• Un dialogue ou une fenêtre modale restitue-t-il correctement le focus à sa fermeture ?

Un lien « Passer au contenu » peut être utile sur les pages comportant une navigation répétitive. Il permet d’éviter que les utilisateurs au clavier traversent les mêmes liens à chaque chargement.

2. Vérifier la structure des titres et des régions

Les titres ne servent pas uniquement à agrandir du texte. Ils donnent une structure à la page et permettent de repérer rapidement une section avec un lecteur d’écran. Le titre principal doit décrire le sujet de la page, puis les sous-titres doivent suivre une hiérarchie compréhensible.

Ne choisissez pas un niveau de titre en fonction de son apparence visuelle. Si un h3 est nécessaire parce qu’il s’affiche plus petit, modifiez son style CSS plutôt que de bouleverser la hiérarchie.

Une structure comme h1, puis h2 et enfin h3 est généralement plus claire qu’une succession de titres choisis uniquement pour leur taille. Les zones principales de la page — navigation, contenu principal, recherche ou pied de page — gagnent également à être identifiables lorsque le contexte le justifie.

3. Contrôler les textes des liens et des boutons

Un lien intitulé « En savoir plus » n’est pas toujours compréhensible lorsqu’il est lu hors contexte. Si plusieurs liens portent cette même formulation, l’utilisateur ne sait pas quelle destination choisir. Préférez un libellé qui indique l’action ou le contenu visé : « Lire le guide sur les sauvegardes » ou « Voir les tarifs de l’accompagnement ».

La même règle s’applique aux boutons. « Envoyer » peut convenir à un formulaire évident, mais « Demander le devis » ou « Créer mon compte » décrit plus précisément le résultat attendu.

Évitez aussi de transmettre une information uniquement par la couleur. Un lien ne devrait pas être reconnaissable seulement parce qu’il est bleu, et un message d’erreur ne devrait pas être signalé uniquement en rouge.

4. Examiner les images, icônes et contenus non textuels

Une image informative doit disposer d’un texte alternatif qui restitue son utilité dans le contexte. Il ne s’agit pas de décrire chaque détail visuel, mais de transmettre l’information nécessaire. Pour une photo montrant un tableau de bord avec une courbe en hausse, un texte comme « Tableau de bord affichant l’évolution des visites du site » est plus utile que « graphique ».

Une image purement décorative ne doit pas produire une description inutile. Son attribut alternatif peut être vide afin qu’elle soit ignorée par les technologies d’assistance. Les images contenant une information essentielle, comme une affiche ou une capture d’écran explicative, doivent quant à elles être accompagnées d’un texte équivalent dans la page lorsque le texte alternatif ne suffit pas.

Vérifiez également les icônes utilisées comme seuls boutons. Une icône de loupe ou de corbeille peut être évidente visuellement, mais le bouton doit posséder un nom accessible décrivant son action.

5. Tester les contrastes et la lisibilité

Un texte gris clair sur fond blanc peut sembler élégant sur un écran bien réglé et devenir difficile à lire dans d’autres conditions. Le contraste doit être vérifié pour le texte courant, les liens, les placeholders, les boutons et les éléments de focus.

Ne vous fiez pas uniquement à votre perception. Un vérificateur de contraste peut confirmer si une combinaison de couleurs reste lisible. Contrôlez aussi les textes placés sur une image ou un dégradé : le contraste peut varier selon la zone située derrière chaque mot.

La lisibilité dépend également de la taille des caractères, de l’espacement entre les lignes et de la longueur des paragraphes. Une page accessible doit pouvoir être agrandie sans que le contenu soit coupé, superposé ou rendu inutilisable.

6. Agrandir le texte et réduire la fenêtre

Testez la page avec un zoom du navigateur et avec une fenêtre moins large. Cette manipulation révèle souvent des problèmes qui ne sont pas visibles sur un grand écran : boutons qui débordent, lignes de texte masquées, menus impossibles à atteindre ou tableaux qui forcent un défilement horizontal excessif.

L’objectif n’est pas d’obtenir une mise en page identique à toutes les tailles, mais de conserver l’accès aux informations et aux actions. Un contenu peut se réorganiser en colonne, un menu peut changer de forme et une image peut se réduire, à condition que rien d’important ne disparaisse.

Sur mobile, vérifiez en particulier la taille des zones cliquables et l’espacement entre deux actions. Des liens trop rapprochés augmentent le risque de sélectionner le mauvais élément, notamment pour les personnes ayant des difficultés motrices.

7. Parcourir les formulaires comme un utilisateur

Les formulaires concentrent souvent plusieurs problèmes d’accessibilité. Chaque champ doit être associé à une étiquette visible et compréhensible. Un simple texte d’exemple placé dans le champ ne remplace pas une étiquette : il disparaît au moment de la saisie et ne fournit pas toujours un repère durable.

Les indications doivent préciser le format attendu lorsque celui-ci n’est pas évident. Si une date ou un numéro possède une contrainte particulière, expliquez-la avant ou à proximité du champ. Les champs obligatoires doivent être signalés autrement que par une couleur ou un symbole dont la signification ne serait pas expliquée.

Provoquez volontairement une erreur pour observer le résultat. Le message doit identifier le champ concerné, expliquer le problème et indiquer comment le corriger. Après validation, le focus doit idéalement conduire l’utilisateur vers le message ou le premier champ nécessitant une action.

8. Vérifier les contenus audio, vidéo et animés

Une vidéo importante ne devrait pas dépendre du son seul. Des sous-titres sont nécessaires lorsque des paroles ou des informations sonores portent le sens. Pour un contenu particulièrement important, une transcription peut aussi faciliter la consultation et la recherche dans le texte.

Évitez la lecture automatique avec le son activé. Elle surprend les utilisateurs, gêne la navigation avec un lecteur d’écran et peut rendre une page difficile à contrôler. Les animations doivent pouvoir être mises en pause lorsqu’elles attirent fortement l’attention ou se répètent.

Prêtez attention aux contenus clignotants ou aux changements visuels rapides. En cas de doute, remplacez l’effet par une transition plus discrète ou supprimez-le : l’animation ne doit pas être indispensable à la compréhension.

9. Utiliser les outils automatiques sans leur faire confiance aveuglément

Les extensions et services d’audit peuvent repérer des attributs manquants, des contrastes insuffisants ou des problèmes de structure. Ils sont utiles pour obtenir un premier inventaire, mais ils ne savent pas toujours déterminer si un texte alternatif est réellement pertinent ou si un lien est compréhensible dans son contexte.

Complétez donc l’audit automatique par un parcours manuel au clavier, un test sur petit écran et une lecture attentive des formulaires. Si votre site est stratégique ou soumis à des exigences particulières, faites intervenir des personnes ayant des usages et des besoins différents. Un test réel peut révéler des obstacles que le code semble pourtant corriger.

Une checklist rapide avant la mise en ligne

Cette vérification ne constitue pas à elle seule une certification ni un audit complet. Elle permet toutefois de corriger rapidement des obstacles fréquents avant qu’ils ne touchent vos visiteurs. Intégrez-la au processus de publication, plutôt que d’attendre une refonte : une structure HTML claire, des libellés précis et des interactions prévisibles coûtent généralement moins cher à mettre en place dès le départ.