Tester l’accessibilité d’un site sans compétences techniques : outils et méthodes

Dans l’article précédent, nous avons présenté les notions d’accessibilité numérique et de handicap. Dans cet article, nous parlerons de raisons supplémentaires pour améliorer l’accessibilité du web, tout en prenant le temps de présenter différents outils liés au handicap.

Pour cet article, nous utiliserons le vocabulaire suivant :

Personne handicapée : une personne ayant un handicap permanent, quelle que soit sa situation (aveugle ou malvoyante, sourde ou malentendante, particularité physique handicapante, troubles neurologiques…)
Personne en situation de handicap : une personne souvent considérée comme valide aux yeux de la société, qui, sur une période donnée, dispose d’un handicap : bras cassé, conjonctivite, tendinites, migraines, stress, vacances dans un pays sans connaître la langue…

Handicap permanent, temporaire ou situationnel : qui est concerné ?

Pour réaliser un site accessible, il est nécessaire de comprendre les problématiques que rencontrent vos usagers au quotidien. Ces contraintes ne sont pas de votre fait, mais vos développements peuvent les accroître, au point que votre contenu devient inaccessible.

Quelques exemples de situations mettant volontairement en scène des personnes considérées comme valides :

Une personne visite votre site, mais se situe dans une pièce avec une fenêtre au mauvais moment de la journée. Un rayon de lumière rend la perception difficile ;
Une personne réalise une démarche sur votre application, puis souhaite corriger le soir, en utilisant cette fois son mobile ;
Un(e) candidat(e) pour un entretien souhaite relire votre site institutionnel avant votre rendez-vous, et le visite dans un transport en commun avec une connexion instable (train, métro, …)

Ces handicaps situationnels et contextuels ne sont évidemment comptés dans aucune statistique, mais ils sont pour autant bien réels : combien de téléphones avec un écran fissuré, de claviers en fin de vie ou de connexions instables vous ont temporairement handicapé lors d’une démarche ? Combien de présentations avec un vidéoprojecteur défaillant ou des caractères trop petits pour être lus à distance ?
Si vous avez rencontré ces situations, vous reconnaîtrez que ces frustrations peuvent causer des abandons. Et ce ne serait pas un phénomène isolé : pour revenir à la navigation sur internet et selon Google, 53% des personnes abandonnent si un site visité par mobile met plus de trois secondes à charger¹. Toujours selon Google, une personne a deux fois plus de chances de quitter le site immédiatement si la page met entre 1 et 6 secondes à charger².
En mars 2018, l’institut CSA rendait une enquête sur les usages numériques des Français : 15% du grand public et 39% des 70 ans et au-delà considèrent que les outils numériques sont difficiles à utiliser³. Autre statistique de ce rapport : 23% des Français ne sont pas à l’aise avec le numérique, et cela monte à 58% pour les 70 ans et au-delà.

À cela, il faut ajouter les handicaps culturels, toujours dans une dimension situationnelle. Si vous avez déjà entrepris un voyage à l’étranger, vous avez peut-être rencontré la barrière de la langue, une différence fondamentale dans les démarches, les acronymes, les itinéraires ou tout simplement la monnaie utilisée. D’autres possibilités : une personne en salariat détaché, un parent qui souhaite livrer un cadeau à ses enfants malgré son faible niveau de compétences en informatique, ou même un contenu passionnant mais dans une langue étrangère qui resterait hors de portée.

Enfin, et de manière plus médicale, on ajoute aussi les personnes handicapées de manière permanente, qu’il s’agisse de vieillesse (à mettre en regard des statistiques présentées plus haut), de maladies impactant la motricité, la vue, l’ouïe, ou de séquelles liées à des accidents. RFI relate⁴ :

Selon les chiffres de l’Organisation mondiale de la santé, plus d’un milliard de personnes vivent avec un handicap. Plus de la moitié d’entre elles sont concernées par l’accessibilité numérique, dont près de 100 millions en Europe et 12 millions en France.

DesignGouv, l’entité liée à la Direction Interministérielle du Numérique en France (DINUM) précise la prévalence en France⁵ :

Vue : 2 millions
Daltonisme 3,3 millions
Audition : 5,4 millions
Motricité : 2,3 millions
Intellectuel / mental : 5 à 6 millions
Dyslexie : 6,6 millions

Note : le handicap intellectuel et mental réunit de nombreuses situations qui n’ont rien à voir avec les capacités cognitives, comme l’illectronnisme (incluant le matériel et la vétusté des logiciels utilisés), la barrière de la langue, la culture et beaucoup d’autres handicaps ne correspondant pas aux autres catégories.

Au total, le handicap est partout et n’est pas toujours une situation permanente, définitive et médicale. De nombreuses personnes rencontrent des handicaps contextuels, qu’il s’agisse d’une commerciale ne pouvant accéder à certaines ressources en avion, une personne en voiture ne pouvant manipuler son téléphone, ou une personne âgée attendant le mois prochain pour changer ses lunettes.

D’abord, connaître les technologies d’assistance

De nombreuses solutions existent déjà, qu’elles soient matérielles ou logicielles, pour assister les personnes ressentant un handicap (temporaire ou permanent). Il va sans dire que pour certaines solutions, tout le monde n’y a pas accès selon son niveau de handicap, et certaines solutions ne sont pas connues du grand public.

Pour les handicaps visuels

La plage braille : un équipement proche du clavier permettant d’écrire en braille (avec 8 touches pour créer des caractères braille), ainsi que de lire avec des pointes en métal se levant pour chaque caractère ;
Le lecteur d’écran : appelé aussi synthèse vocale, ou improprement TTS pour « Text-To-Speech », le lecteur d’écran récite ce qui est affiché à l’écran. Il n’utilise pas de reconnaissance de caractères mais se base sur des données fournies par les logiciels eux-mêmes, incluant les navigateurs. C’est l’équivalent des « audiobooks » pour les livres en bien plus complet ;
Les lunettes à réalité augmentée ou virtuelle : des lunettes numériques augmentant fortement les contrastes et permettant de prendre des photos, zoomer et déchiffrer les caractères avec de la reconnaissance optique ;
Des outils système comme l’outil Loupe ou le mode Fort contraste : des options d’accessibilité intégrées au système d’exploitation pour faciliter la lecture sur l’ensemble du système ;
Les lunettes ou monoculaires : une majorité de personnes ayant des problèmes de vue en utilisent !

Pour les handicaps auditifs ou de parole

Le sous-titrage (généré automatiquement ou non) des vidéos : ils sont utiles pour ce type de handicap mais également, et par exemple, pour une personne préférant les films en Version Originale (VO) sans en comprendre la langue ;
La Langue des Signes Française (LSF) : une langue à part (et d’ailleurs qui n’est pas seule dans le monde francophone) permettant de communiquer avec des gestes, que l’on retrouve souvent à droite de l’écran dans les allocutions considérées importantes ;
La transcription avec ou sans traduction des communications en temps réel : avec l’amélioration de la reconnaissance vocale, des outils de transcription permettent d’écrire automatiquement quand des personnes s’expriment. Ceux-ci peuvent aussi être traduits dans une autre langue si nécessaire ;
Les appareils auditifs, incluant les oreillettes : pour permettre de mieux entendre dans un environnement bruyant ou avec un handicap, les casques audio, écouteurs, oreillettes ou dispositifs médicaux permettent d’isoler et d’amplifier certains sons ;
La messagerie, instantanée ou non : elle permet à toute personne ayant des handicaps auditifs et de parole d’échanger sans aucune contrainte autre que l’équipement informatique.

Pour les handicaps moteurs

Les touches rémanentes : sur Windows, appuyer cinq fois sur la touche Shift les active. Elles permettent de réaliser des raccourcis une touche à la fois ;
Les souris oculaires et gyroscopiques : elles se basent sur le mouvement de la tête ou des yeux pour déplacer la souris ;
Les contacteurs : de forme et d’activation diverses, qu’il s’agisse de gros boutons, de grands joysticks ou de systèmes basés sur le souffle ou le mordillement, ils permettent d’exécuter des clics gauche, droit ou de déplacer le curseur ;
Les souris et claviers ergonomiques : ils ont traversé la barrière du grand public pour soulager les problèmes d’articulations ou la fatigue musculaire associée à l’utilisation d’une souris ou d’un clavier dit « classique ».

Pour les handicaps mentaux et intellectuels

Une mise en page simple et adaptée : les personnes ayant des difficultés à s’orienter de manière générale sur internet seront davantage à l’aise avec un site simple, avec une organisation simple. Pour ce faire, des outils permettent de retirer la mise en page de votre site, ou de changer les polices de caractère ;
Le mode de concentration : disponible dans tous les navigateurs, ce mode fait disparaître tous les effets d’animations, les polices de caractère et réduit fortement la largeur de l’écran ;
Le Facile À Lire et à Comprendre (FALC) : utilisé principalement pour les affiches de sécurité (santé, ordre, …), il associe une image simple avec un texte simple pour décrire des étapes ;
L’accompagnement dans les démarches : quand la personne n’arrive pas à utiliser l’outil, des associations ou des guichets permettent d’accéder malgré tout à l’information ou réaliser des démarches.

Ces solutions ne font pas tout

Certaines de ces solutions, si ce n’est toutes, sont imparfaites : si vous utilisez un de ces dispositifs, vous avez vraisemblablement remarqué que leur usage est palliatif, ce n’est pas une transposition parfaite de l’expérience d’une personne valide. Le ton n’est parfois pas perçu de la même manière à l’écrit et à l’oral, les lunettes se perdent parfois ! Pour finir, la reconnaissance vocale, notamment, est perfectible : nous vous conseillons la conférence d’Emmanuelle Aboaf à ce sujet⁶.

Cet état des lieux le montre : après cette liste de dispositifs et de solutions, le handicap n’est pas si simple qu’il y paraît. Des personnes considérées comme valides peuvent temporairement rencontrer des problèmes, et des personnes handicapées peuvent parfois naviguer sans encombre sur la toile.
La réponse à ce foisonnement est simple : améliorer l’accessibilité pour tout le monde, en situation de handicap ou non. On utilisera donc des polices de caractères lisibles pour une majorité de personnes, avec des contrastes de couleurs compréhensibles dans une majorité de situations, avec des démarches simples et ne nécessitant pas de gestes complexes pour un maximum de succès. Et ce n’est pas nécessairement faire moins !

Ensuite, tester l’accessibilité sans compétences techniques

Pour tester un site web ou une application, il existe plusieurs outils automatiques ou de mise en valeur pour réaliser des audits préliminaires. Attention, ces tests ne peuvent pas automatiser 100% de ce qu’il y a à faire. De plus, ils peuvent comporter de faux-positifs et nécessitent donc un regard humain pour comprendre et pondérer ces résultats.

Ci-dessous, nous vous proposons deux angles ne nécessitant aucune compétence technique. Si vous souhaitez des outils pour un niveau d’analyse plus élevé, de l’intégration dans une pipeline CI/CD (intégration ou déploiement continu) ou de l’analyse statique de code, il serait plus sage de nous contacter : ces outils nécessitent une connaissance de votre métier.

Outils de test automatique : WAVE, axe DevTools, Accessibility Insights

Un des premiers outils présentés est WAVE (Web Accessibility Evaluation Tool), disponible :

Cet outil permet d’afficher le site avec une mise en avant des erreurs et avertissements d’une page web : la totalité du site n’est pas auditée en une seule passe. Au sein de cette interface, vous retrouverez :

Un résumé des erreurs et avertissements, avec une mise en surbrillance sur la partie « visualisation du site »
Une explication du problème, pourquoi c’est un problème, et comment le problème a été détecté
Une liste des éléments ayant une signification particulière dans le site pour l’accessibilité. Attention, cela ne dit pas si la signification est correcte !

Capture de l'outil Wave — Capture d’écran du site Wave, pour le site irs.gov (source: wave.webaim.org)

D’autres outils similaires sont disponibles uniquement via une extension navigateur ou logiciel, comme axe DevTools, ou Microsoft Accessibility Insights.

axe DevTools :

Microsoft Accessibility Insights :

Rappelons que ces outils, même s’ils permettent de voir rapidement des problèmes saillants et de vous indiquer des pistes rapides de correction, ne proposent pas une analyse complète de vos sites et applications au sens du RGAA :

Ces outils vérifient selon nos estimations moins de 10% du RGAA et sont en réalité basés sur une autre norme, les WCAG, qui est similaire mais pas identique
Ces outils peuvent créer de faux-positifs
Ces outils peuvent également ne pas remonter des problèmes bien réels
Ces outils ne corrigent évidemment pas votre site : ils ne font que montrer un problème potentiel

Adrian Roselli a rédigé deux excellents articles à ce sujet, en anglais :

Simuler un handicap dans son navigateur : daltonisme, dyslexie, contraste

Il est possible d’utiliser des outils numériques pour tester l’accessibilité, avec des paramètres ou des extensions. Certains d’entre eux sont d’ailleurs utilisés par les personnes concernées.

Par exemple, OpenDyslexic est une extension remplaçant les polices de caractères de votre site web par OpenDyslexic, une police de caractères conçue pour faciliter la lecture pour certains types de dyslexie. Vous pourrez en apprendre davantage sur cet article qui lui est consacré sur Wikipedia⁷. Cette extension permet de vérifier également si la page rencontre des problèmes d’affichage si la police est changée. Elle est disponible :

L’extension Stylus, quant à elle, permet de surcharger le code CSS (Cascading Style Sheet) de n’importe quel site. Utilisée originellement comme outil de développement, cette extension a connu un succès pour les personnes en situation de handicap car elle permet, pour un site particulier, de changer tout l’affichage : agrandir les polices, changer la couleur des textes, augmenter les marges etc. Elle est disponible :

L’extension Stylus peut nécessiter des compétences en développement. Mais de nombreuses ressources existent en ligne avec du « code tout prêt ». Un exemple est disponible sur le GitHub de nos collègues de Copsaé⁸.

D’autres outils existent cette fois pour simuler un handicap. Ils servent principalement de sensibilisation et ne sont pas utilisés dans les audits RGAA.

Par exemple, il est possible avec son navigateur de simuler un daltonisme (appelé aussi dyschromatopsie) ou une perte de contraste.

Pour Firefox/LibreWolf/Zen :

Faire un clic droit n’importe où sur la page
Sélectionner « Inspecter »
Dans le panneau qui s’ouvre, cliquer sur l’onglet « Accessibilité ». S’il n’apparaît pas, il sera révélé en appuyant sur l’icône » à la suite des onglets
En haut de cet onglet, un menu déroulant « Simuler » indique « Aucun ». Choisissez une autre valeur comme Deutéranopie, Tritanopie, Protanopie, Achromatopsie, ou perte de contraste.
Pour arrêter la simulation, fermer simplement le panneau ouvert en étape 2.

Pour Chrome/Edge/autres :

Faire un clic droit n’importe où sur la page
Sélectionner « Inspecter »
Sur la ligne affichant les différents onglets (Éléments, Console, …), cliquer sur les trois points verticaux ⁝ et sélectionner « Plus d’outils », puis « Rendu »
En bas de cet outil, un menu déroulant permet de simuler différents daltonismes ou problèmes de contraste
Pour arrêter la simulation, fermer simplement le panneau ouvert en étape 2.

Il est également possible d’utiliser différentes extensions navigateur. Rendez-vous sur le magasin d’applications de votre navigateur pour faire votre choix.

Certains sites peuvent également vous permettre de simuler une perte de contraste en prenant comme matériau de base les couleurs de votre site. Par exemple, Who can use vous permet, avec une couleur de fond et une couleur de texte, de simuler la lisibilité pour différents handicaps, qu’ils soient situationnels ou permanents.

Checklists d’accessibilité : diagnostic flash et évaluation rapide

La plupart des erreurs d’accessibilité sont simples à corriger et ont un grand impact sur l’ergonomie générale, car elles sont créées par de « petites erreurs » de conception, de design ou de développement.

Si vous souhaitez avoir une sorte de *checklist* avec les actions principales à réaliser, nous vous conseillons :

Enfin, corriger : former plutôt que contourner

La remédiation, ou correction des problèmes, dépend de votre outil : les options sont différentes si vous utilisez un logiciel propriétaire pour lequel vous payez une licence, ou si vous développez votre application de A à Z.

De manière générale, la réduction des erreurs et la sensibilisation des acteurs sont de bons moyens de réduire durablement l’inaccessibilité d’une solution. Cependant, ce n’est pas suffisant et il sera souvent nécessaire :

De former la ou les personnes s’occupant des développements pour développer de manière accessible
De former la ou les personnes s’occupant des tests pour vérifier l’accessibilité de manière concrète
De former une personne (ou davantage !) pour la réalisation d’audits RGAA en interne

Ces solutions peuvent paraître coûteuses, mais il ne faut jamais perdre de vue le long terme : laisser l’accessibilité de côté peut coûter cher. Nous détaillerons cet aspect plus longuement dans le prochain article de cette série.

Ce qui est certain, c’est que nous déconseillons de trouver une solution « simple, rapide, économique » pour l’accessibilité. De nombreuses structures s’y sont déjà essayées, des entreprises se sont construites autour de cette promesse, et les résultats ne sont pas au rendez-vous, loin de là.

Nous déconseillons la création d’un portail dédié aux personnes en situation de handicap. Cette technique, appelée ségrégation, existait autrefois pour les sites web accessibles via les premiers mobiles connectés à internet via le WAP. Malheureusement, il est déjà difficile de maintenir un site internet, donc en maintenir deux est souvent une mauvaise idée. Il y a de grandes chances que le site dédié aux personnes en situation de handicap soit laissé à l’abandon, ou à minima moins fourni que le site principal.
Nous déconseillons également, sur la base des recommandations de la commission européenne et rappelées par DesignGouv⁹, l’utilisation d’outils de surcouche d’accessibilité (accessibility overlays). En effet, il est notamment écrit dans cet article :

Aucun de ces outils ne peut se substituer à la prise en compte de l’accessibilité dans la conception des sites ;

Suite de la série

Dans l’article suivant, nous détaillerons les raisons d’intégrer l’accessibilité dans les développements informatiques, avec un cadrage spécifique sur la prise de décision dans un contexte B2B (Business to Business).