Un test simple en dit long sur l'accessibilité d'un site Web. Débranchez la souris, ou tenez la main loin du pavé tactile, et essayez d'envoyer un message au moyen du formulaire de contact en utilisant uniquement les touches Tab et Entrée. Voit-on clairement quel champ est actif? Le bouton d'envoi est-il seulement accessible?
De nombreux sites de petites entreprises échouent à ce test, ainsi qu'à plusieurs autres : du texte gris pâle sur fond blanc, choisi parce qu'il paraissait élégant dans la maquette; un numéro de téléphone qui fait en réalité partie d'une image de bannière; un formulaire où la seule indication du contenu attendu dans chaque champ est un texte indicatif qui disparaît dès que le visiteur clique.
Rien de cela n'est intentionnel. Personne n'a jamais signalé aux propriétaires ni à leurs designers que ces choix excluent des personnes. L'accessibilité est souvent perçue comme une préoccupation de gouvernements et de banques, et non de centres de plongée, de restaurants ou de plombiers du quartier. Cette perception est erronée, et la plupart des correctifs se réalisent en un après-midi.
Qu'est-ce que la norme WCAG 2.0?
Les WCAG 2.0, ou Règles pour l'accessibilité des contenus Web, constituent la norme de référence en accessibilité Web. Le W3C les a publiées en décembre 2008. Plus de sept ans plus tard, elles demeurent largement inconnues de la plupart des petites entreprises. Le W3C propose un résumé en langage clair sur la page de présentation des WCAG, qui mérite d'être lu même sans consulter le document technique complet, qui est volumineux.
Au Canada, les exigences s'appliquent pour l'instant surtout aux gouvernements et aux grandes organisations. Les sites du gouvernement fédéral suivent leur propre norme d'accessibilité Web fondée sur les WCAG 2.0. Le Québec dispose aussi de standards pour ses organismes publics. En Ontario, la LAPHO oblige déjà les grandes organisations à respecter les WCAG 2.0 sur leurs nouveaux sites. Les petites entreprises ne sont encore visées par aucune de ces règles. La tendance va toutefois vers des exigences plus larges, et bien construire un site dès le départ coûte beaucoup moins cher que de le corriger plus tard pour se conformer à une loi.
Quels correctifs d'accessibilité un petit site peut-il apporter en un après-midi?
Quatre correctifs règlent les problèmes les plus fréquents : l'ordre des titres, le contraste et la taille du texte, le texte alternatif et les étiquettes de formulaire.
Pourquoi l'ordre des titres est-il important?
Les utilisateurs de lecteurs d'écran passent souvent d'un titre à l'autre pour comprendre la structure d'une page, de la même façon que les autres visiteurs la survolent. Si une page comporte trois titres H1, passe d'un H2 à un H5 parce que le designer préférait la taille de la police, ou utilise des paragraphes en gras au lieu de titres, cette navigation ne fonctionne plus.
La règle est simple : un seul H1 pour le titre de la page, des H2 pour les grandes sections et des H3 en dessous au besoin. Google lit la même structure pour déterminer le sujet de la page; un seul correctif produit donc deux avantages.
Quels contraste et taille de texte sont requis?
Pour le texte courant, les WCAG exigent un rapport de contraste d'au moins 4,5 pour 1 avec l'arrière-plan. Le gris pâle sur fond blanc ne satisfait généralement pas à cette exigence, pas plus que le texte blanc posé sur une photo chargée.
Cette exigence ne concerne pas uniquement les personnes ayant une basse vision. Elle aide aussi la personne qui consulte un menu sur son téléphone à l'extérieur, en plein soleil, ou toute personne de plus de cinquante ans qui a oublié ses lunettes de lecture dans la voiture. Un texte plus grand et un meilleur contraste profitent à tous ces visiteurs. Un site facile à lire n'a jamais suscité de plaintes.
Comment rédiger le texte alternatif?
Comme si l'on décrivait la photo à quelqu'un au téléphone. Le texte alternatif est la courte description qu'un lecteur d'écran lit à voix haute à la place d'une image. Sur un site de plongée, « IMG_4471 » n'apprend rien à un visiteur aveugle. « Tortue verte au repos sur un massif de corail, vers 12 mètres » lui indique à quoi ressemble la plongée. Les images purement décoratives, comme une ligne de séparation ou une texture de fond, peuvent avoir un texte alternatif vide afin d'être ignorées.
Il ne faut jamais placer de texte dans une image. Si un numéro de téléphone ou des heures d'ouverture n'existent que sous forme de pixels dans une bannière, un lecteur d'écran ne peut pas les lire, Google non plus, et un client ne peut pas les copier dans son téléphone.
Pourquoi chaque champ de formulaire a-t-il besoin d'une étiquette?
Parce que le texte indicatif n'est pas une étiquette. Il disparaît dès que le visiteur commence à taper, son contraste est généralement faible, et certains lecteurs d'écran l'ignorent. Chaque champ a besoin d'une véritable étiquette qui lui est associée dans le code. Les messages d'erreur doivent expliquer en mots ce qui ne va pas, plutôt que de simplement colorer le champ en rouge.
Le formulaire de contact est l'endroit où un visiteur devient un client. C'est aussi là que nous relevons le plus de problèmes d'accessibilité, une combinaison qui mérite une attention particulière.
L'accessibilité aide-t-elle aussi le référencement?
Oui, et cet argument est souvent le plus convaincant pour les propriétaires de petites entreprises. Le mot « accessibilité » retient peu leur attention, alors que « Google lit votre site un peu comme un lecteur d'écran » la retient.
La comparaison est une simplification, mais elle est juste. Les moteurs de recherche ne voient pas le design. Ils lisent les titres, le texte des liens, les textes alternatifs et les mots contenus dans le HTML. Une page conçue pour qu'un lecteur d'écran puisse l'interpréter est presque toujours une page que Google peut interpréter aussi.
Les avantages dépassent la recherche. Les sous-titres d'une vidéo aident les visiteurs sourds, et ils aident aussi les personnes qui regardent dans l'autobus sans le son, une situation de plus en plus fréquente depuis que les vidéos jouent sans le son par défaut sur Facebook. Un texte de lien clair (« voir le prix de nos cours » plutôt que « cliquez ici ») aide les utilisateurs de lecteurs d'écran et tous ceux qui survolent la page. C'est le principe de la bordure de trottoir abaissée : concevoir pour des besoins particuliers profite à tout le monde.
L'argument du référencement ne doit toutefois pas occulter la raison première. Une partie de la clientèle voit mal, ne peut pas utiliser de souris ou a de la difficulté avec un texte dense. Cette raison justifie à elle seule le travail. Comme elle ne suffit pas toujours à convaincre les propriétaires, l'avantage pour le référencement constitue un complément utile.
Comment une entreprise peut-elle tester l'accessibilité de son site?
Avec des outils automatisés gratuits, puis quelques tests manuels simples. Pour une vérification rapide, analysez la page d'accueil et la page de contact avec WAVE, l'outil gratuit de WebAIM. Chrome propose aussi l'extension Accessibility Developer Tools, qui ajoute un audit applicable à n'importe quelle page. Ces outils signalent des problèmes comme les textes alternatifs manquants, les liens vides et un contraste insuffisant.
Les tests manuels sont souvent plus révélateurs :
- Remplir le formulaire de contact uniquement au clavier.
- Activer VoiceOver sur un iPhone, ou TalkBack sur Android, et écouter la page d'accueil pendant une minute. L'exercice est très instructif.
- Agrandir la page à 200 % dans le navigateur et noter ce qui ne s'affiche plus correctement.
- Consulter le site sur un téléphone, à l'extérieur, à la lumière du jour.
La plupart des problèmes relevés seront mineurs : une étiquette manquante, un titre hors séquence, une image de texte qui devrait être du vrai texte. Pour un nouveau site, l'accessibilité doit être demandée dès le départ; elle ne coûte presque rien lorsqu'elle est prise en compte tôt. Pour un site existant, elle s'intègre naturellement à un audit de référencement, tant les deux se recoupent. Lorsque vous comparez des sites Web pour petites entreprises ou des thèmes, nous recommandons de faire le test du clavier sur la démonstration avant l'achat.
La perfection n'est pas l'objectif. L'objectif est que les heures, le numéro de téléphone et le formulaire de contact fonctionnent pour toutes les personnes qui souhaitent joindre l'entreprise.