L'accessibilité… un voeu pieu, un business, une nécessité, une réalité, onanisme intellectuel ?
C'est un sujet brûlant, dont beaucoup de personnes parlent depuis quelques mois. Pourquoi ? En grande partie pour vendre des solutions et des prestations en jouant sur la peur du gendarme et la réglementation à venir (28 juin 2025).
Mais au-delà des sanctions potentielles, l'accessibilité numérique est d'abord une nécessité pour beaucoup d'utilisateurs. Et pas uniquement pour les personnes atteintes d'un handicap. Ça touche tout le monde.
On en parle, oui, mais sans faire appel à une expertise, comment peut-on savoir si ce qui est produit est utilisable ?
Le mot « utilisable » a son importance : être conforme est une chose, être utilisable est tout autre chose. Imaginez-vous devoir parcourir une page uniquement au clavier…
Exemple concret, vous voulez acheter un produit sur un site de commerce en ligne.
Effectuez une recherche, attendez la fameuse liste de résutltats et essayez d'atteindre le premier produit en utilsant uniquement le clavier avec la touche Tab (tabulation). Le constat est évident : c'est un calvaire !
Après 150 appuis, vous atteindrez (peut-être) le premier produit proposé. C'est tout à fait conforme d'un point de vue légal (RGAA ou WCAG), mais parfaitement inutilisable pour votre client (qui n'en sera pas un, du coup…).
Donc, comment fait-on pour répondre aux besoins, avant de mettre en ligne un service ? Oui, parce qu'après, c'est trop tard et ça coûte beaucoup plus cher.
Qui doit faire quoi et quand ?
La réponse est simple : tout le monde et tout le temps.
- La conception : que ce soit l'UX ou l'UI, si ce sujet n'est pas pris en compte dès le départ, c'est l'échec assuré.
Pour illustrer, ce n'est pas quand on monte une toiture qu'il faut se demander si les murs pourront la supporter. C'est trop tard.
Concevoir des fondations solides dès le début coûtera beaucoup moins cher que mettre des micro pieux une fois la maison livrée. - Le développement : toutes les personnes impliquées dans la construction d'un site ou d'une application se doivent d'avoir à l'esprit les besoins des utilisateurs.
Les développeurs « back » et les développeurs « front » doivent travailler ensemble. Les petites guerres intestines ne font que nuire à la qualité qui permet d'atteindre un niveau d'accessibilité acceptable. - La chefferie de projet : gérer un projet, ce n'est pas uniquement rentrer dans un budget. Tout comme le SEO, le tracking, la performance, la qualité et l'accessibilité doivent être suivies régulièrement.
Il n'y a pas besoin d'avoir des compétences techniques, quelques outils ne nécessitant qu'un clic sont largement suffisants pour s'assurer qu'il n'y a pas de gros soucis. Ensuite, en échangeant avec les équipes, une grande partie du travail est fait.
En gros, quand les outils affichent du rouge : informer son équipe et demander des corrections. - La contribution : publier du contenu implique de s'assurer du bon respect de certaines règles. Hiérarchisation des niveaux de titres, traduction, pertinence des libellés de liens, etc.
- La « QA » (Quality Assurance) : tout est dans le libellé ! S'assurer de la qualité du livrable. Avec les mêmes outils, les testeurs peuvent remonter des anomalies plus intéressantes que le pixel qui déborde ou la taille de police à 15px au lieu de 16 sur un bouton. C'est utile également, mais d'un point de vue strictement légal beaucoup moins.
- Quand ? Tout au long de la vie du projet.
- En amont ;
- Pendant ;
- Après.
Le maître mot est et restera l'échange.
Se parler, autrement que par le biais d'outils de suivi comme Jira ou autre.
À ces fins, divers outils permettent de vérifier au fil de l'eau diverses choses. Utilisés régulièrement par l'ensemble des intervenants sur un projet, il est tout à fait possible de limiter la casse et de fournir une interface utilisable par tout le monde.
Ça commence par de la lecture : des référentiels.
Ce n'est pas exhaustif, Google est votre ami.
Référentiels
- Web Content Accessibility Guidelines (WCAG) 2.2
- How to Meet WCAG 2.2 (Quick Reference)
- Web Accessibility Initiative
- WAI-ARIA Authoring Practices 1.2
- Authoring Tool Accessibility Guidelines (ATAG)
- Référentiel général d'amélioration de l'accessibilité (RGAA)
- Opquast - assurance qualité web
- Un site également très intéressant Digital Accessibility Blog qui fourmille de contenus mis à jour régulièrement.
- Sur Web.dev Learn Accessibility
- Pour comprendre ce qu'est un
altsur une image, consulter cette page
Les vérifications de base
Pour prendre la température sur la prise en compte de l'accessibilité, quelques tests faciles à réaliser donneront vite une idée du niveau.
Cette liste est totalement arbitraire et ne couvre qu'une infime partie des attendus en accessibilité.
La revue rapide porte sur quelques critères WCAG de niveau A :
-
Chaque image porteuse d’information a-t-elle une alternative textuelle ?
Arbre de décision pour lesalt -
L’information ne doit pas être donnée uniquement par la couleur.
Par exemple, les bordures rouges sur des champs de formulaire doivent être complétées par un pictogramme. Et des messages informatifs. -
Pour chaque tableau de données (calendrier par exemple).
La technique appropriée permettant d’associer chaque cellule avec ses en-têtes est-elle utilisée ? -
Chaque lien a un intitulé et cet intitulé est explicite ?
Les liens « texte » ont un libellé explicite et pertinent. Notamment sur les liens répétés, du type « En savoir plus », une liaison est faite entre le lien et le titre qui le précède.
Les liens ne contenant qu'une image sont labellisés grâce à l'attributaltde l'image ou par un attributtitleouaria-label. -
La langue par défaut est-elle présente et le code de langue est valide ?
La page contient<html lang="fr">au minimum, ou<html lang="fr" xml:lang="fr">. -
La page a un titre (regarder l'onglet).
Chaque page a un attributtitleunique qui permet d'identfier son contenu. -
L’information est-elle structurée par l’utilisation appropriée de titres ?
Utiliser l'extension HeadingsMap pour afficher les niveaux de titres. Il ne doit pas y avoir de « coupure » dans la hiérarchie. Un titre de niveau 3 ne peut pas être précédé d'un niveau 1.
Au moins un titre de niveau 1 est présent dans la page. -
Chaque lien dont la nature n’est pas évidente est-il visible par rapport au texte environnant ?
Un lien dans le flux du texte doit être visuellement différencié (soulignement, couleur, pictogramme, etc.). -
Chaque élément recevant le focus, la prise de focus est-elle visible ?
À tester en naviguant au clavier avec la touche Tab (tabulation). Les éléments recevant le focus sont mis en surbrillance (outline, bordure, couleur de fond, etc.). -
Chaque champ de formulaire a-t-il une étiquette et cette étiquette est pertinente ?
Une étiquette est un élémenthtmlde typelabel: l'attributplaceholdern'est pas un label. -
L’intitulé de chaque bouton de formulaire est-il pertinent ?
« Ok » n'est pas considéré comme pertinent… Compléter avec unaria-labelsur le bouton par exemple. -
L’ordre de tabulation dans la page est cohérent ?
La navigation au clavier respecte l'ordre d'affichage de la page. -
La page contient au moins un lien d'évitement ?
Recharger la page puis appuyer sur Tab (tabulation). Le focus doit faire apparaitre sur un lien qui permet d'accéder au contenu principal de la page. -
Tester l'affichage en zoom texte uniquement à 200% sous Firefox
Comment ? En paramétrant Firefox comme ça :
Si l'affichage de votre contenu ressemble à quelque chose comme ça :
Il est probable que la gestion du responsive soit approximative et que la conformité en prenne un coup…
Plus complexe, mais toujours utile :
-
Chaque script est-il, si nécessaire, compatible avec les technologies d’assistance ?
-
Chaque script est-il contrôlable par le clavier et par tout dispositif de pointage ?
Si à ce stade vous avez couvert ces tests, on peut imaginer que tout n'est pas perdu.
Mais ce n'est pas totalement suffisant… Un audit et des conseils dispensés par une expertise permettra de rendre utilisable vos contenus.
Pour tester, vérifier, valider, il faut des outils…
Outils
Une liste d'outils (encore non exhaustive) à utiliser au quotidien. Ou, au moins, régulièrement.
Du bon sens
Il n'y a pas d'extension de navigateur pour ce point. Associé à l'empathie, ça peut faire des miracles.
-
Bon sens source :
Sens commun, Faculté de juger raisonnablement, où se rencontrent la plupart des hommes.
-
Empathie source :
Capacité de s’identifier à autrui, d’éprouver ce qu’il éprouve.
Les lecteurs d'écrans
Le principal outil utilsé par les personnes ayant une déficience visuelle (aveugles ou mal-voyants).
Bonne nouvelle, ce sont des technologies gratuites et déjà intégrées sur les terminaux modernes.
- Pour Windows, il y a le Narrateur que vous pouvez compléter avec NVDA ;
- Pour les terminaux Apple :
- Pour Android, TalkBack est également intégré.
Un site très utile pour vous aider : Mon lecteur d'écran.
Extensions navigateurs
À installer sur les navigateurs… et à utiliser.
Note : penser à configurer chaque extension pour qu'elle soit utilisable en navigation privée.
Il n'y a pas, ou peu d'extensions pour Safari. Il n'en reste pas moins qu'il est nécessaire de tester avec ce navigateur, en mobile et ordinateur de bureau ou portable.
-
Wave
-
axe DevTools®
-
HeadingsMap
-
Stylus
-
IBM Equal Access Accessibility Checker
-
Web Developer
-
ARC Toolkit
C'est beau ? Oui, mais c'est « faux ».
"Nous avons beau le répéter mais ce n'est pas un taux de conformité ! Comme tous les outils, le résultat n'est que partiel et ne remplacera jamais une analyse complète.
Ces extensions fournissent tout un tas d'informations, mais avec des raccourcis simples, il est possible de gagner du temps.
Raccourcis navigateurs
Faites glisser les liens correspondants dans votre barre de favoris.
Validation du code (local et tous environnements)
Ce raccourci envoie le code « réel » de la page courante.
À la différence du validateur en ligne, tout ce qui est réellement interprété par le navigateur est vérifié.
Faire glisser ce lien dans la barre de favoris.
Validation W3C
Vérifier la présence de alt et la pertinence des aria sur les images bitmap et SVG
Affiche dans la console du navigateur toutes les images img, svg:not([aria-hidden="true"]) qui n'ont pas d'attribut alt pour les bitmap, et alerte de possibles problèmes sur les SVG.
Faire glisser ce lien dans la barre de favoris.
Test ALT et SVG
Dans la console du navigateur, les résultats s'affichent de cette manière.
BOSA Accessibility Check
BOSA Accessibility Check Tool est une application Open Source fournie par le gouvernement Belge.
Voir la page de Belgian Web Accessibilty.
Faire glisser ce lien dans la barre de favoris.
BOSA Check
Affichage skiplinks
Affiche (ou pas) le premier lien d'évitement de la page.
Faire glisser ce lien dans la barre de favoris.
Afficher le skiplink
Vérifier la présence de label sur les champs de formulaires
Affiche dans la console du navigateur tous les éléments input:not([type='hidden']), select, textarea qui n'ont pas d'attribut id et/ou qui n'ont pas de libellé associé.
Faire glisser ce lien dans la barre de favoris.
Vérifier les labels
Afficher les liens dans la console
Permet d'afficher dans la console tous les liens présents dans une page et de vérifier la pertinence du contenu.
Faire glisser ce lien dans la barre de favoris.
Lister les liens
Niveau de gris
Bascule la page courante en niveaux de gris. Permet de s'assurer de la lisibilité.
Faire glisser ce lien dans la barre de favoris.
Niveau de gris
Lint images
Bonus ! Fait une revue rapide des images responsives. Ce n'est pas de l'accessibilité à proprement parler, mais ça améliore le performance.
Faire glisser ce lien dans la barre de favoris.
Lint images responsives
Application
Application Windows et MacOS pour vérifier les ratios de contraste. Colour Contrast Analyser (CCA)
Une fois ces petits outils installés, vous pourrez revendiquer de gérer un peu d'accessibilité.
That's all Folks ! Ou presque…