Mon site web est-il accessible ?

Vous ne connaissez pas l’accessibilité ou en avez juste entendu vaguement parler ? Avant de vous lancer dans une expertise complète, vous vous demandez s’il ne serait pas possible de vérifier vous-même, vite fait, le niveau d’accessibilité de votre site ? C’est ce que nous vous proposons en 5 minutes !

Nul besoin de connaissance technique pour y arriver. Il vous suffit de suivre les instructions pas à pas. Il n’est pas non plus nécessaire de disposer de logiciels spécifiques (à part pour l’étape 7). Les outils automatiques sont proposés en accès direct en ligne.

Évidemment, cela ne vous permettra pas de savoir si votre site est accessible, mais plutôt de vérifier s’il ne l’est pas. Une erreur à l’un de ces tests suffira à démontrer des lacunes en matière d’accessibilité. Et si tout est validé, cela signifiera que vous êtes prêts pour un vrai audit !

Voici les 7 questions que nous vous proposons de vous poser :

  1. Mon code est-il conforme aux standards du Web ?
  2. Puis-je utiliser le clavier pour accéder à tous les éléments cliquables de la page ?
  3. Le contraste entre la couleur des textes et celle de l’arrière-plan est-il suffisant ?
  4. Les liens pointant vers des documents en téléchargement sont-ils bien indiqués ?
  5. Tous les éléments en mouvement peuvent-ils être arrêtés et relancés ?
  6. Peut-on comprendre une vidéo ou un média audio sans le son ?
  7. Le site est-il structuré de manière logique avec des titres, sous-titres... ?

Étape 1 : Mon code est-il conforme aux standards du Web ?

À cette étape, il s’agit de vérifier qu’il n’y a pas de fautes dans la construction technique de votre site. Le Web repose sur des langages ayant une sémantique et une grammaire propres. On peut tout à fait créer des sites sans en tenir compte, mais cela faussera l’interprétation que pourront en avoir les technologies utilisées pour "naviguer autrement", comme les technologies d’assistance qu’utilisent les personnes handicapées.

Entrez l’adresse de votre page web dans le validateur automatique du W3C, consortium international qui édicte les standards du Web.

Il existe actuellement deux validateurs officiels pour tester le HTML, langage de structuration par balisage du Web :

Vous pouvez utiliser l’un ou l’autre, au choix. Le résultat vous indiquera clairement s’il y a ou non des erreurs.

Étape 2 : Puis-je utiliser le clavier pour accéder à tous les éléments cliquables de la page ?

Dans certaines situations, qu’il s’agisse d’un handicap moteur, visuel ou d’une contrainte professionnelle, il n’est pas possible d’utiliser la souris. Il est donc fondamental que tous les éléments cliquables à la souris soient également activables au clavier : menus, sous-menus, liens, images-liens, bulles d’aide...

Pour faire le test, placez-vous avec la souris sur la barre d’adresse, puis posez votre souris. Vous allez maintenant tabuler (touche tab) pour vous déplacer d’élément en élément. Pour revenir en arrière, appuyez simultanément sur les touches shift + tab. Pour actionner un lien, tapez Entrer. Pour modifier un choix dans un formulaire (un bouton radio par exemple) utilisez les flèches gauche et droite de votre clavier.

Arrivez-vous à aller partout sur le site, comme avec la souris ? Si oui, bravo ! Vous pouvez passer à l’étape suivante. Sinon, pas de panique. C’est pour vous l’opportunité d’améliorer votre site.

Étape 3 : Le contraste entre la couleur des textes et celle de l’arrière-plan est-il suffisant ?

Il existe des outils pour le vérifier, mais le bon sens devrait pouvoir déjà vous aiguiller. Un menu gris clair sur fond blanc n’est jamais assez contrasté, même quand on n’a pas de handicap visuel ! Et pourtant, il y en a souvent.

Si vous voulez utiliser une méthode moins empirique et plus "objective", vous pouvez installer l’extension WCAG Contrast Checker pour le navigateur Firefox. Une fois installé, il vous suffit de vous rendre sur la page à tester depuis Firefox, et de cliquer sur la roue de couleur qui actionne WCAG Contrast Checker. Allez dans l’onglet "Document" et cliquez sur "Test WCAG 2".

Étape 4 : Les liens pointant vers des documents en téléchargement sont-ils bien indiqués ?

La force du Web, c’est sa facilité de navigation de lien en lien, de page en page. Or, sur une page web, on trouve deux types de liens : ceux qui conduisent vers une autre page, et ceux qui produisent une action, comme télécharger un document.

Il est important, pour ne pas perturber l’internaute et lui laisser le choix de ses actions, de lui indiquer le format et le poids du document dans le lien en question (en général c’est indiqué entre parenthèses ou entre crochets). Par exemple : nom du document (PDF, 135ko).

Étape 5 : Tous les éléments en mouvement peuvent-ils être arrêtés et relancés ?

Une vidéo qui se lance toute seule, une galerie d’images qui tourne sur elle-même, un texte qui défile, une animation... Autant d’éléments qui peuvent perturber l’attention de l’internaute et le gêner dans sa navigation.

Pour chaque élément en mouvement, il doit être prévu un mécanisme pour l’arrêter et le relancer, comme un bouton lecture/pause. Et évidemment, ce mécanisme doit être accessible au clavier...

Étape 6 : Peut-on comprendre une vidéo ou un média audio sans le son ?

Chaque média doit avoir une version texte, et toute vidéo doit être sous-titrée. C’est bien entendu nécessaire pour les personnes sourdes et malentendantes, mais cela bénéficiera également aux internautes ne pouvant pas mettre le son (dans un open space sur leur lieu de travail par exemple). Et, cerise sur le gâteau, une version texte sera également accessible aux moteurs de recherche, contrairement aux contenus multimédias, ce qui permettra leur référencement !

Étape 7 : Le site est-il structuré de manière logique avec des titres, sous-titres... ?

Cette étape est cruciale. Visuellement, votre page comporte des titres, mis en valeur et reconnaissables parce qu’ils sont sans doute graphiquement différents du reste du texte : en gras, dans une taille de police plus grande...

Or, les personnes aveugles ne voient pas les mises en forme graphiques. Il est donc important que cette structuration leur soit restituée autrement (vocalement ou en Braille). Grâce à une structuration correcte de la page, il sera plus facile aux personnes ne pouvant pas voir la page de se représenter sa composition, l’organisation de son contenu.

Les balises HTML h (<h1>, <h2>, <h3>...) permettent d’indiquer qu’il s’agit d’un titre. Un titre de niveau 1 (<h1>) est un titre principal, un titre de niveau 2 (<h2>) est son sous-titre, un titre de niveau 3 est le sous-titre du titre de niveau 2, etc.

Si nous abordons cette étape en dernier, c’est que pour la vérifier, à moins de savoir lire du code, il est nécessaire d’installer un logiciel. Pour vérifier la structuration de la page, vous pouvez installer l’extension Firefox Headings Map. Un h apparaîtra dans la barre des extensions de Firefox. Placez-vous sur la page à tester et cliquer sur le <h/> de Headings Map.

Aller plus loin...

Ces sept étapes ne sont évidemment qu’un début. Si elles sont toutes respectées, cela signifie que le concepteur du site a pris soin de prendre en compte l’accessibilité dans le développement. Il y a donc fort à parier qu’il ou elle connaît les règles d’accessibilité et s’attache à les respecter. Un audit plus complet, par un expert indépendant, vous permettra de voir comment améliorer encore le niveau d’accessibilité de votre site.

S’il y a des erreurs, cela signifie que vous avez sans doute besoin d’être accompagné pour faire le point et mettre en place une démarche d’amélioration progressive de l’accessibilité de vos pages web.

Access42 est le spécialiste de l’accessibilité du Web. N’hésitez pas à nous contacter pour étudier ensemble votre projet.

Pour aller plus loin, vous pouvez aussi utiliser l’outil de test automatique Tanaguru disponible gratuitement en ligne. Les tests effectués sont complémentaires, et là encore, même si ce n’est pas exhaustif, les résultats vous permettront d’avoir un aperçu des erreurs que vous pourriez corriger pour améliorer l’accessibilité de votre site.