Accessibilité web au Québec : ce qu’une PME devrait viser

Note d'archive. Cet article décrit la situation au moment de sa publication. Les règles, les outils et les fonctionnalités mentionnés ont pu changer depuis. Vérifiez l'information à jour auprès de la source officielle avant d'agir.

Accessibilité web au Québec : pour une PME, ça revient à bâtir un site qui fonctionne pour tout le monde, y compris les gens qui utilisent un lecteur d'écran, un clavier ou un vieux téléphone sur une connexion lente. Je travaille avec des entreprises d'ici sur la publicité et le référencement, et je bute toujours sur les mêmes trous : du texte alternatif manquant, un contraste trop faible, des menus qui ne répondent qu'à la souris. Voici ce que je conseille de régler d'abord aux propriétaires de Mascouche et des environs de Montréal, sans engager de spécialiste.

Accessibilité web au Québec : ce que ça veut dire pour le site d'une PME

L'accessibilité web au Québec, ça veut dire que votre site sert des visiteurs qui ne voient pas vos images, qui n'utilisent pas de souris ou qui lisent sur un petit écran. Il n'existe pour l'instant aucune loi d'accessibilité pour le secteur privé ici. Le standard SGQRI du gouvernement du Québec vise les organismes publics, pas la boulangerie du coin ni la clinique dentaire, alors on fait ce travail pour de vrais clients, puisqu'aucune loi ne l'exige.

Vos images portent alors un texte alternatif, pour qu'une personne qui utilise un lecteur d'écran sache ce qu'elles montrent. Vos couleurs offrent assez de contraste, vos boutons sont faciles à atteindre et votre texte garde son sens quand on le lit à voix haute. La plus grande partie recoupe une simple bonne expérience utilisateur, pensée pour plus de gens.

Le repère auquel la plupart des gens renvoient, c'est WCAG 2.1. Ce n'est pas une loi, mais c'est le standard autour duquel se construisent les conseils en accessibilité, alors ça vaut la peine de savoir ce qu'il demande.

WCAG 2.1 : le standard actuel et les parties qui touchent un petit site

WCAG 2.1 est la version actuelle des règles internationales pour l'accessibilité du contenu web, et une PME n'a besoin que d'une poignée de ses points. Visez le niveau AA et concentrez-vous sur les critères qui touchent un site de petite entreprise typique.

Le contraste des couleurs vient en premier. Votre texte doit ressortir clairement sur son fond, et le texte gris pâle sur blanc, que je vois sans arrêt, n'y arrive presque jamais.

L'accès au clavier vient ensuite. Un visiteur devrait pouvoir parcourir votre menu, vos formulaires et vos boutons avec la touche de tabulation, sans jamais toucher la souris.

Le troisième point, c'est l'indicateur de focus, ce petit contour qui montre où vous êtes sur la page. Ne laissez pas un thème le retirer au nom d'un rendu plus épuré.

Texte alternatif et descriptions d'images qui aident vraiment

Le texte alternatif est une courte description écrite d'une image qu'un lecteur d'écran lit à voix haute, et il donne aussi de la matière aux moteurs de recherche. Je dis aux clients de décrire ce qui compte dans la photo et de laisser tomber le reste. Pour une boulangerie, « croissant au chocolat sur une table de bois » vaut mieux que « image123.jpg » ou « produit de boulangerie ».

Évitez les entrées en matière comme « photo de », puisque le lecteur d'écran annonce déjà qu'il s'agit d'une image. Si une image est purement décorative, comme une volute en arrière-plan, laissez son texte alternatif vide pour qu'elle soit ignorée. Pour un tableau ou un graphique, mettez le point clé dans le texte alternatif ou dans le paragraphe juste à côté. Un bon texte alternatif aide de vraies personnes, et il s'ajoute vite une fois que ça devient un réflexe.

Contraste des couleurs et texte lisible d'un coup d'œil

Le contraste des couleurs passe quand votre texte est assez foncé ou assez pâle pour ressortir nettement sur son fond, et vous pouvez le vérifier gratuitement. J'entre ma couleur de texte et ma couleur de fond dans le WebAIM Contrast Checker, et il me dit tout de suite si la paire atteint le niveau AA de WCAG. Si elle échoue, je fonce le texte ou j'éclaircis le fond jusqu'à ce que les chiffres tiennent.

Vérifier le contraste sans outil payant

Des vérificateurs en ligne gratuits et les outils du navigateur vous disent si une paire de couleurs passe, alors vous n'avez jamais à acheter de logiciel. Le WebAIM Contrast Checker est celui que je recommande le plus : tapez votre couleur de texte et votre couleur de fond, et il retourne le ratio et le verdict pour le niveau AA.

Chrome affiche aussi un ratio de contraste dans ses outils de développement. Faites un clic droit sur du texte, choisissez Inspecter, et cherchez le ratio dans le sélecteur de couleur. Ça prend un moment pour repérer où regarder, après quoi vérifier une page va vite.

Navigation au clavier et focus visible sur les formulaires et les menus

La navigation au clavier doit fonctionner sur vos formulaires et vos menus, parce que certains visiteurs naviguent sans souris. Je teste chaque site que je bâtis en débranchant la souris et en appuyant sur la touche de tabulation. Si je n'arrive pas à atteindre chaque lien, bouton et champ de formulaire dans un ordre logique, c'est un problème que je règle avant la mise en ligne.

Le focus visible a autant d'importance. Les navigateurs dessinent normalement un contour autour de l'élément sélectionné, mais certains concepteurs l'enlèvent pour faire propre. Sans lui, une personne au clavier n'a aucune idée d'où elle se trouve sur la page.

Vérifiez aussi vos menus déroulants. Ils devraient s'ouvrir et se fermer avec Entrée ou Échap, pas seulement au survol de la souris.

Vérification manuelle d'accessibilité qu'un propriétaire peut faire lui-même

Une vérification manuelle d'accessibilité est un court passage pratique que vous pouvez faire vous-même, sans développeur. Installez-vous devant votre propre site avec un café et suivez ces étapes.

Quoi tester	Comment faire	Ce que vous cherchez
Clavier seulement	Débranchez la souris, utilisez Tab et Entrée	Atteignez-vous chaque lien et bouton ?
Agrandir	Appuyez sur Ctrl et + quelques fois	Le texte reste-t-il lisible, sans chevauchement ?
Images	Clic droit, afficher le code source	Chaque image a-t-elle un texte alternatif ?
Formulaires	Remplissez-en un avec Tab seulement	Les champs ont-ils des étiquettes visibles ?

Si une réponse est non, notez-la et réglez-la avant que la page passe en ligne.

Faut-il de l'aide ? Ça dépend du problème. Le texte alternatif, le contraste des couleurs et l'ordre des titres sont des choses qu'un propriétaire peut régler avec des vérificateurs gratuits. Les cas plus profonds, comme le comportement d'un lecteur d'écran sur un formulaire complexe, valent la peine d'être confiés à un spécialiste : vous économisez sur les bases et ne payez que pour les parties délicates.

Liste de vérification d'accessibilité avant la prochaine mise à jour du site

Une liste de vérification d'accessibilité avant une mise à jour vous évite de défaire les correctifs que vous venez de faire. Je garde la mienne courte exprès, parce qu'une longue liste finit ignorée.

Confirmez que chaque nouvelle image a une description écrite au lieu de son nom de fichier. Vérifiez que les titres suivent un ordre logique, avec un seul H1 par page. Parcourez la nouvelle page avec la touche de tabulation et confirmez que vous atteignez chaque lien et bouton sans souris. Vérifiez le contraste des couleurs sur tout nouveau bouton ou bandeau. Regardez chaque nouvelle vidéo et confirmez que les sous-titres sont activés. Si vous avez ajouté un formulaire, testez-le avec un lecteur d'écran, ou demandez à quelqu'un qui en utilise un de l'essayer.