Votre site est-il accessible ? Faites le test

Tester son site internet est une bonne solution pour entamer sa réflexion sur l’accessibilité numérique et la qualité de son site web. Mais devant le nombre de paramètres à évaluer, de pages à tester et de points à contrôler, l’exercice peut s’avérer complexe à démarrer.

Bonne nouvelle : nous vous guidons pour commencer et nous vous proposons dans cet article une démarche pas à pas.

Vous trouverez ci-dessous :

• Quelques tests manuels sur vos pages les plus importantes,
• Puis des outils automatiques gratuits
• Et enfin une procédure d’audit structuré ou un audit professionnel si votre situation l’exige.

Tests d’accessibilité de votre site web à faire vous-même

Commencez par choisir vos pages

Votre site n’est pas une collection de pages uniques : c’est une poignée de modèles répétés. Sur un site e-commerce, toutes vos fiches produits sortent du même gabarit, et auront donc le même niveau d’accessibilité.

Sélectionnez 3 à 5 pages représentatives :

• La page d’accueil,
• Une page de contenu éditorial,
• Un modèle de page produit ou service,
• Une page contenant un formulaire (contact, devis),
• Une étape de tunnel si vous vendez en ligne (panier, création de compte).

Ce sont ces pages que vous allez passer aux six tests qui suivent. Comptez un peu moins d’une heure pour le tout.

Votre tableau de bord

Pour faciliter la démarche, nous vous proposons ce tableau que vous pouvez également télécharger via lien en Excel avec quelques conseils.

Test 1 : votre site tient-il sur un écran étroit ?

« Mon site est responsive », dites-vous. Peut-être. Mais au sens de l’accessibilité, être responsive signifie deux choses précises : aucune information ne disparaît quand l’écran rétrécit, et aucune barre de défilement horizontale n’apparaît.

Le défilement horizontal rend la lecture pénible pour tout le monde, et impossible pour une personne qui navigue en zoom fort ou avec une loupe d’écran.

Comment faire : ouvrez la page à tester dans votre navigateur, puis les outils de développement.

• Firefox : Ctrl + Maj + M ouvre directement le mode adaptatif.
• Chrome : Ctrl + Maj + I ouvre les outils, puis Ctrl + Maj + M bascule en mode appareil mobile.

Réglez la largeur sur 320 px et parcourez la page.

Voici l’affichage que vous devez retrouver. N’ayez pas peur de l’affichage du code en bas ou à droite de votre page : il ne contient aucune information utile pour ce test.

Ce que vous devez voir : tout le contenu de votre page doit être lisible en descendant simplement la page. Pas de texte coupé, pas de bouton hors écran, pas de barre de navigation horizontale.

Critère de référence : RGAA 10.11.

Test 2 : vos textes restent-ils lisibles quand on les agrandit ?

Beaucoup d’internautes agrandissent l’affichage. Votre site doit le supporter jusqu’à 200 % sans casser la lecture des contenus textes.

Comment faire : Ctrl et + pour agrandir, Ctrl et – pour réduire. Vous pouvez aussi utiliser les options de votre navigateur. Le niveau de zoom s’affiche dans la barre d’adresse. Montez à 200 % et parcourez vos pages.

En zoom x200, la page Atouts Numériques du site web du Campus Région du numérique reste complètement lisible.

Ce que vous devez voir : du texte qui s’agrandit sans se superposer, sans sortir de son bloc, sans disparaître derrière un autre élément. Les menus et les boutons doivent rester utilisables.

Critère de référence : RGAA 10.4.

Test 3 : vos contrastes sont-ils suffisants

Le gris clair sur fond blanc, c’est élégant sur la maquette du graphiste, et illisible pour une partie de vos visiteurs. C’est pourquoi des seuils ont été définis pour garantir des contrastes suffisants.

Comment faire : de nombreuses extensions sous le nom de « contrast checker » existent et peuvent vous aider. Pour ce test, j’ai utilisé Color Contrast Checker via Google Chrome.

L’extension ouvre une fenêtre présente sur la capture ci-dessus. Il faut ensuite avec l’outil pipette sélectionner :

• Dans « Foreground » le texte,
• Dans « Background » la couleur de fond.

Le critère de succès doit correspondre à « Contrast (Minimum) (AA) » à minima.

On observe dans la capture que le contraste entre le bleu du texte et celui du fond est suffisant pour garantir une bonne lisibilité.

Critères de référence : RGAA 3.2 et 3.3.

Votre site se navigue-t-il au clavier ?

C’est le test le plus révélateur, et il ne demande aucun outil.

Deux touches suffisent : Tab pour passer d’un élément interactif au suivant, Entrée pour l’activer, Maj + Tab revient en arrière.

Ce que vous devez voir :

• Un encadré, un halo ou un surlignage visible sur l’élément en cours, à chaque tabulation, sans exception,
• Un ordre de parcours logique, qui suit la lecture de la page,
• Aucun piège : vous devez toujours pouvoir ressortir d’un menu, d’un carrousel ou d’une fenêtre au clavier.

Sur cette capture, vous pouvez observer que le troisième replay est entouré d’un rectangle noir et le lien vers lequel il amène est affiché en bas à gauche du navigateur.

Faites le test sur vos 5 pages, puis, si vous vendez en ligne, sur un parcours d’achat complet : produit, ajout au panier, panier, coordonnées, paiement.

Critères de référence : RGAA 10.7 pour la visibilité du focus, 12.8 pour l’ordre de tabulation, 12.9 pour les pièges au clavier.

Vos balises sont-elles accessibles ?

Trois balises structurent la lecture d’une page par une technologie d’assistance. Elles sont faciles à vérifier.

Le titre de la page

C’est le texte affiché dans l’onglet du navigateur, et la première chose annoncée par un lecteur d’écran à l’ouverture. Il doit décrire la page en cours, puis le nom du site. « Accueil » ne suffit pas, « Demander un devis, Entreprise Dupont » fonctionne.

Sur la page Atouts Numériques du site web du Campus Région du numérique, on retrouve bien les informations associées à cette page. Vous pouvez passer votre souris sur l’onglet pour lire le titre complet dans une infobulle.

Critères : RGAA 8.5 et 8.6.

La hiérarchie des titres

Ce sont les balises Hn, bien connues du référencement naturel : un seul H1, des H2 pour les grandes sections, des H3 à l’intérieur, etc. Pas de saut de niveau, et des informations structurées et cohérentes.

L’extension gratuite HeadingsMap (Chrome, Firefox, Edge) affiche le plan de la page dans un panneau latéral et signale en rouge les erreurs de structure. Un sommaire mal construit se voit en une seconde.

Ici sur la page du Campus Région du numérique, l’arborescence de titre visibles via l’extension est structurée et cohérente.

Critère : RGAA 9.1.

Les alternatives d’images

L’attribut alt est souvent traité comme un champ à remplir pour le référencement. Sa fonction première est ailleurs : décrire l’image à qui ne la voit pas. La règle tient en deux cas :

• Image porteuse d’information (photo produit, schéma, infographie, bouton image) : une alternative qui transmet la même information, dans le contexte de la page,
• Image purement décorative : un attribut alt vide. Elle sera ainsi correctement ignorée par les lecteurs d’écran, au lieu de polluer la lecture.

Des extensions telles que Image Alt Text Viewer, utilisée pour ce test avec Google Chrome, vous permettent d’afficher ces balises sur vos pages.

Dans cet article, les captures d’écran du logiciel disposent de balises qui renseignent l’information transmise au lecteur.

Critères : RGAA 1.1, 1.2 et 1.3.

Vos formulaires sont-ils utilisables ?

Le formulaire est le point de contact essentiel de votre site. Prenez votre formulaire de contact ou de demande de devis, et vérifiez quatre choses, clavier compris.

• Chaque champ a une étiquette visible, et cette étiquette est accolée au champ : au-dessus ou à gauche pour les champs de saisie et les listes déroulantes, en dessous ou à droite pour les cases à cocher.
• Les champs obligatoires sont signalés, et signalés avant la validation. Soit la mention « obligatoire » dans l’étiquette, soit un astérisque accompagné d’une légende.
• Les contraintes de saisie sont annoncées à l’avance. Format de date attendu, longueur minimale d’un mot de passe, etc.
• Les messages d’erreur désignent le champ concerné et disent quoi corriger.

Critères : RGAA 11.1, 11.2, 11.4 et 11.10.

Félicitations : vous avez réalisé vos premiers tests qui vous permettront d’améliorer l’accessibilité de votre site web.

Si vous souhaitez aller plus loin, vous trouverez ci-dessous des actions complémentaires.

Les tests automatiques : un bon filtre technique

Les outils qui analysent une page en un clic sont nombreux, souvent gratuits, et utiles. Faut-il encore comprendre ce qu’ils mesurent.

Le plus simple : Lighthouse

Lighthouse est intégré à Google Chrome. Le plus rapide est de passer par PageSpeed Insights : vous collez une URL, vous obtenez un score « Accessibilité » sur 100 et la liste des points en échec.

Dans cet exemple de résultat, deux types de retour :

• Certains directement actionnables : les contrastes et les liens sont modifiables par l’administrateur. En ouvrant les menus déroulant, les détails des éléments concernés s’affichent.
• Certains demandent un échange avec votre prestataire: les notions associées au développement web (« [rôle] », « repère principal ».) ne sont pas interprétables sans compétences techniques.

Attention, Google l’écrit noir sur blanc dans son propre rapport : la détection automatique ne couvre qu’une partie des problèmes et ne garantit pas l’accessibilité de votre site. Seule une partie des critères, ceux testables automatiquement, sont analysés par ce test.

Quelques alternatives à Google :

• WAVE, en ligne ou en extension, superpose des icônes directement sur votre page : rouge pour les erreurs, jaune pour les alertes. En anglais et plus technique.
• Tanaguru webext, technique également mais en français, analyse une partie des critères du RGAA directement dans le navigateur.

Mener un véritable audit RGAA avec Ara, la plateforme de l’État

La direction interministérielle du numérique met à disposition Ara, un service en ligne gratuit pour conduire un audit d’accessibilité au regard du RGAA.

Ara n’audite pas automatiquement votre site. Ce n’est pas un scanner. C’est un outil de conduite d’audit : il vous présente les critères un par un, vous explique comment les tester, enregistre vos réponses, puis génère le rapport d’audit et la déclaration d’accessibilité.

Trois formats sont proposés :

• Un état des lieux sur 25 ou 50 critères,
• Un audit complet de conformité sur les 106 critères du RGAA 4.1.2, le seul qui permet d’afficher un taux de conformité.

La plateforme est Ara demande une bonne connaissance de la méthode du RGAA. Un chargé de marketing ou un responsable web à l’aise sur le sujet peut s’en emparer, en particulier sur le format 25 critères. Pour un audit de conformité complet, faites-vous accompagner : le travail est méthodique et l’interprétation des critères ne s’improvise pas.

Les ressources associées, modèle de rapport, grille d’audit, modèle de déclaration, sont réunies dans le kit d’audit officiel.

Les solutions à envisager avec prudence

Les plugins d’accessibilité : pas toujours une bonne idée

Une recherche « accessibilité » dans la bibliothèque d’extensions de votre gestionnaire de site (CMS) remonte des dizaines de résultats, souvent accompagnés d’une promesse de conformité en un clic.

Pour de bons résultats, il faut répondre à cette question : où l’outil agit-il ?

• Dans le navigateur du visiteur : ce sont les surcouches, ou « overlays », et les pastilles flottantes qui proposent d’agrandir le texte ou d’inverser les contrastes. Elles se superposent à votre site sans rien corriger dans votre code. À éviter.
• Dans votre site : ce sont les outils qui analysent vos pages et vous guident pour corriger le code et les contenus à la source. Ceux-là ont leur place dans votre plan d’action.

Quelques repères par plateforme :

• WordPress : WP Accessibility et Accessibility Checker travaillent côté site, gratuitement. Le plugin Ally d’Elementor mélange les deux approches, son assistant de correction est utile, sa pastille visiteur beaucoup moins. Les extensions de type OneTap sont des surcouches pures.
• Wix : l’Accessibility Wizard est intégré à l’éditeur et vous guide correction par correction. C’est la bonne porte d’entrée.
• Shopify : pas de widget natif. Shopify publie ses propres rapports de conformité et renvoie au travail sur le thème. Les applications « conformité en un clic » de l’App Store sont des surcouches.

Tester son accessibilité avec ChatGPT : la fausse bonne idée

L’idée est tentante : coller l’adresse de son site dans une IA générative et lui demander un diagnostic d’accessibilité. Le résultat sera fluide, structuré, convaincant… et certainement approximatif, voire faux.

Un modèle de langage ne peut pas exécuter les tests que nous venons de décrire. Il ne réduit pas votre page à 320 pixels pour voir si une barre de défilement apparaît. Il n’appuie pas sur Tab pour vérifier que le focus est visible et que l’ordre est logique. Il ne mesure pas un rapport de contraste sur le rendu réel de votre page. L’accessibilité se constate dans l’usage, et l’IA n’analyse que le code.

Ce que l’IA produit, ce sont des affirmations plausibles construites à partir de l’analyse du code de votre page web.

Pour autant, les assistants IA peuvent s’avérer utiles dans votre démarche. Ils peuvent vous aider à mieux comprendre un critère et sa formulation ou à interpréter un rapport d’analyse automatique et définir comment corriger un problème détecté.

Crédits photos :

Magnific