Un texte agrandi à 150 % pour pouvoir lire ses courriels. Un léger tremblement qui fait manquer la moitié des boutons sur un téléphone. Une chirurgie oculaire, puis une autre. Bien des personnes vivent ces situations sans jamais se considérer comme handicapées. Elles éprouvent pourtant des difficultés avec des sites Web presque tous les jours.
Ces situations sont courantes. Selon Statistique Canada, 27 % des Canadiens de 15 ans et plus vivaient avec au moins une incapacité en 2022, soit 8 millions de personnes. Dans une région dont la population vieillit, comme la nôtre, cette proportion ne diminue pas.
Il existe une norme pour concevoir des sites que ces personnes peuvent utiliser : les WCAG. Cet article présente ce qu'elle exige, et pourquoi nous la visons pour chaque site que nous concevons.
Que sont les WCAG?
WCAG signifie Web Content Accessibility Guidelines, soit les règles pour l'accessibilité des contenus Web. Elles sont publiées par le W3C, l'organisme qui gère les standards du Web. La version 2.2, publiée en octobre 2023, est la plus récente.
Les règles reposent sur quatre principes. Un site doit être :
- perceptible : le contenu peut être vu ou entendu, d'une façon ou d'une autre. Une image est accompagnée d'un texte qui la décrit, une vidéo comporte des sous-titres;
- utilisable : on peut s'en servir uniquement au clavier, avec un doigt qui tremble, sans contrainte de temps;
- compréhensible : le texte est clair, et les formulaires indiquent ce qui ne va pas;
- robuste : le site fonctionne avec les lecteurs d'écran et les autres aides techniques, et pas seulement avec Chrome sur un ordinateur récent.
Pourquoi viser le niveau AA plutôt que A ou AAA?
Parce que c'est la cible réaliste. Chaque règle correspond à un niveau. Le niveau A est le minimum : sans lui, certaines personnes sont complètement bloquées. Le niveau AA ajoute ce qui rend le site utilisable pour la plupart des gens. Le niveau AAA va plus loin, mais certaines de ses règles sont impossibles à respecter pour un site entier, et le W3C lui-même ne le recommande pas comme exigence générale.
Le niveau AA constitue donc la cible réaliste. C'est aussi celui que retiennent la plupart des lois et des politiques publiques ailleurs dans le monde.
Concrètement, qu'est-ce que cela change sur une page?
Moins d'éléments qu'on ne le pense, et des éléments qui profitent à tous.
- Le contraste. Le texte courant doit présenter un contraste d'au moins 4,5 pour 1 avec son arrière-plan. Le gris pâle sur fond blanc, souvent apprécié sur une maquette, ne respecte généralement pas ce seuil.
- Le clavier. Tout ce qui se fait à la souris doit pouvoir se faire avec les touches Tab et Entrée. L'utilisateur doit aussi toujours voir où il se trouve sur la page.
- Les cibles. Nouveauté de la version 2.2 : un bouton ou un lien doit mesurer au moins 24 pixels sur 24, ou disposer d'un espace suffisant autour de lui. Sur nos sites, nous visons 44.
- Les images. Une photo porteuse d'information a un texte de remplacement. Une photo décorative n'en a pas, afin de ne pas faire perdre de temps à une personne qui écoute la page.
- Les formulaires. Chaque champ a une étiquette, et chaque message d'erreur explique en mots ce qu'il faut corriger.
- La connexion. Autre nouveauté de la version 2.2 : on ne doit pas obliger une personne à résoudre une énigme ou à mémoriser un code pour se connecter.
- Le mouvement. Ce qui bouge automatiquement doit pouvoir être arrêté, et le site respecte le réglage « réduire les animations » de l'appareil.
Pourquoi une PME devrait-elle s'en préoccuper?
Pour sa clientèle, davantage que pour des raisons légales. Au Québec, les normes d'accessibilité Web du gouvernement (les standards SGQRI 008) visent les ministères et les organismes publics. Une entreprise privée n'est pas tenue de les suivre. L'argument légal n'est donc pas celui que nous mettons de l'avant.
L'argument principal concerne la clientèle : la dame de 78 ans qui cherche votre numéro de téléphone; l'homme qui n'a qu'une main libre parce qu'il tient sa fille de l'autre; la personne qui écoute votre site parce qu'elle ne peut pas le voir. Si votre site ne fonctionne pas pour ces personnes, elles appellent un concurrent.
De plus, un site accessible est presque toujours un meilleur site dans l'ensemble. Des titres clairs, du texte véritable plutôt que du texte intégré à des images, des boutons visibles : c'est exactement ce que lisent Google et les outils d'IA.
Comment concevons-nous nos sites?
Nous visons le niveau AA des WCAG 2.2 pour chaque site que nous réalisons : les nôtres, ceux de nos clients et nos projets. Non pas comme une option ajoutée à la fin, mais dès le départ.
- Un HTML propre et bien structuré : de véritables titres, de véritables listes, de véritables boutons. C'est la base de tout le reste.
- Le contraste des couleurs de la marque est vérifié avant l'écriture de la première ligne de code.
- Chaque page est testée au clavier, sans souris.
- Un outil automatique (axe) analyse les pages après chaque modification importante.
- Nous examinons le site en mode sombre, en contraste élevé et sur un petit téléphone.
Sur lapetitenation.ca et sur le présent site, nous avons aussi ajouté un panneau « Affichage » : agrandissement du texte, mode sombre ou contraste élevé, police plus facile à lire, guide de lecture, grand curseur et arrêt des animations. Les réglages restent sur votre appareil. La page Accessibilité présente tous les détails.
Ce panneau est un complément. Il ne remplace pas un site bien conçu. Nous recommandons la prudence à l'égard des outils qui « s'installent en une ligne » et promettent de rendre n'importe quel site conforme : ils ne corrigent pas un bouton inaccessible au clavier.
Quelles sont les limites de notre démarche?
Les outils automatiques ne détectent qu'une partie des problèmes. Le reste exige une vérification humaine, idéalement par des personnes qui utilisent réellement un lecteur d'écran au quotidien. Aucun de nos sites n'a fait l'objet d'un audit par une firme externe, et nous ne détenons aucune certification.
Lors de la rédaction de cet article, nous avons soumis de nouveau notre propre site au test. Quelques textes demeuraient trop pâles en mode clair, et une page débordait sur les très petits téléphones. Ces problèmes ont été corrigés le jour même.
Votre site passe-t-il le test?
Un essai simple : ouvrez votre site, mettez la souris de côté et naviguez uniquement avec la touche Tab. Voyez-vous où vous vous trouvez? Pouvez-vous ouvrir le menu, remplir le formulaire de contact, appeler? Si vous êtes bloqué à un endroit, votre clientèle l'est aussi.
Pour examiner votre site avec nous, écrivez-nous.