Votre site web est-il accessible ?

Cette vérification rapide ne vous permettra pas de savoir si votre site est entièrement accessible, mais une erreur à l’un de ces tests suffit à démontrer des lacunes en matière d’accessibilité. Et si tout est validé, cela signifiera que vous êtes prêts pour un audit complet !

Voici les questions que nous vous proposons de vous poser :

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

Nul besoin de connaissances techniques ou de logiciels payants pour y arriver. Il vous suffit de suivre les instructions pas à pas.

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

Dans le cas d’un handicap moteur ou visuel par exemple, l’internaute ne peut pas utiliser de souris. Il est donc fondamental que tous les éléments cliquables à la souris (menus, liens, liens-images, bulles d’aide, etc.) soient également activables au clavier.

Pour faire le test, placez-vous avec la souris sur la barre d’adresse, puis laissez votre souris de côté. 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 votre site de cette manière ? Si oui, bravo ! Vous pouvez passer à l’étape suivante. Sinon, pas de panique : c’est l’opportunité d’améliorer votre site.

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

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 ».

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

La force du Web réside dans la facilité de navigation de lien en lien, de page en page. 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). Le lien s’intitulera par exemple : « Nom du document (PDF, 135ko) ».

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, un mécanisme pour l’arrêter et le relancer doit être prévu. Un simple bouton lecture/pause fait très bien l’affaire ! Mais, évidemment, ce mécanisme doit être accessible au clavier.

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

Afin d’être accessible aux personnes sourdes et malentendantes, chaque média audio doit avoir une version texte et toute vidéo doit être sous-titrée.

Il doit être possible d’activer et désactiver les sous-titres depuis le lecteur vidéo. Si votre lecteur ne propose pas cette fonctionnalité, vous pouvez proposer deux vidéos : l’une avec les sous-titres et l’autre sans.

Vous pouvez trouver un exemple de vidéo sous-titrée sur le site de la Direction de l’Accessibilité SNCF.

Le site est-il structuré de manière logique (avec des titres, sous-titres, etc.) ?

Cette dernière étape est cruciale. Visuellement, votre page comporte des titres, mis en valeur et reconnaissables grâce à une mise en forme différente du reste du texte : en gras, dans une taille de police plus grande…

Or, les personnes aveugles ne voient pas ces 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 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 et ainsi de suite.

Pour vérifier ce point sans savoir lire le code, il vous faut 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.