Le design au service de l’accessibilité

Patrick AGBEMADOKPONOU

03/03/22

6 mins read

Tendances

En octobre 2018 aux Etats Unis, éclate l’affaire Domino’s. Guillermo Robles, malvoyant, porte plainte et poursuit Domino’s pizzas en justice. Il s’est retrouvé dans l’incapacité de commander, aussi bien sur leur site web que sur leur application mobile, en raison du lecteur vocal qui n’était pas en mesure de lire les données inscrites dessus.

La Cour d’appel va se saisir de l’affaire et annoncera que les sites internet et les applications doivent être accessibles aux personnes handicapées, sinon elles subiront, à leur tour, des poursuites judiciaires. Cette affaire incarne un tournant important dans l’ADA* car le Congrès va dorénavant prendre en compte le numérique dans la loi.

Aujourd’hui, l'accessibilité est devenue un sujet primordial et principalement dans le numérique avec la démocratisation des outils digitaux.

Qu’est-ce que l’accessibilité numérique ?

L'accessibilité numérique consiste à rendre les services en ligne accessibles aux personnes en situation de handicap (définition numerique.gouv.fr ). Ces services en ligne doivent être garantis quels que soient le type d'appareil utilisé, les navigateurs à disposition, la qualité du réseau.

Son champ d'application concerne tout produit lié au digital : les sites web, logiciels, plateformes vocales.

En France, 1,7 million de personnes sont atteintes d’un trouble de la vision.

On compte entre autres, 207 000 aveugles et 932 000 malvoyants moyens.
Au-delà des troubles de la vision, il existe aussi :

des troubles moteurs,
des handicaps auditifs,
des personnes avec des difficultés cognitives (degré d’alphabétisation, décalage culturel),
celles qui ont des freins technologiques (système opérateur, version du navigateur, écran)
et des personnes qui surfent dans des conditions difficiles (luminosité, bruit, secousses, etc.)

Le référentiel de l’accessibilité

Pour ce faire, on applique aux interfaces digitales des normes d’accessibilité émises par le W3C* et pensées par des ergonomes pour chaque type de handicap, comme le WCAG*, le référentiel international.

Si vous avez un service qui est voué à être utilisé dans le monde entier, c’est celui qui est conseillé.

En France, le taux d'accessibilité d'un site est calculé en l'auditant au regard des critères du RGAA, norme française issu du WCAG. Pour être à 100% accessible, le site du RGAA liste tous les critères importants à intégrer dans un site ou une application.

Ces référentiels se basent sur 3 critères de conformité : WAI-A, WAI-AA, WAI-AAA. Ceux-ci permettent de mesurer le niveau d’accessibilité à l’information, l’utilisabilité de l’interface.

La réglementation de l’accessibilité est de plus en plus forte grâce à un cadre juridique solide. En 2022, les sites web du privé ainsi que les applis mobiles ont désormais aussi l’obligation d’être conformes, avec sanctions à la clé.

Les bénéfices de l’accessibilité

L’accessibilité devient cruciale pour la bonne image de l’entreprise. Elle permet d’attirer de nouveaux utilisateurs et peut être bénéfique pour la santé économique d’une entreprise. Un site accessible offre plusieurs avantages ou bénéfices.

L’accessibilité permet :

Le développement de l’entreprise : nous comptons 12 millions de personnes handicapées en France. Les entreprises peuvent s’offrir une augmentation de leur audience et un accroissement de leurs revenus.

Une meilleure qualité du site : un site accessible respecte les standards du web, il est mieux référencé et réduit les coûts de maintenance et d’exploitation. D’autres sites, à titre d’exemple, sont obligés d’avoir plusieurs sites en fonction des navigateurs ou matériels utilisés.

Une meilleure communication et visibilité : avoir un site accessible valorise l’image citoyenne auprès du grand public, et améliore le référencement sur les moteurs de recherche.

Les règles à respecter

Pour mettre en œuvre les règles d'accessibilité, les sites doivent respecter un ensemble de critères.

La hiérarchisation des titres : Le respect de l'ordre des niveaux de titre (H1, H2…,Hn) permet aux utilisateurs de visualiser le titre principal de la page et les sous-parties. Ces éléments permettent de se situer rapidement dans une page et de s’assurer qu'on est au bon endroit. Il faut également privilégier les listes et les phrases courtes plutôt que gros blocs de textes qui sont intimidants et fastidieux à lire.

Le contraste : Il est important de s’assurer d’un contraste suffisant entre les textes et l’arrière-plan. Un contenu pas suffisamment contrasté est difficile à voir par une personne présentant des déficiences visuelles.

Les éléments d’interfaces deviennent plus facilement identifiables comme : les boutons, les champs de formulaire, les icônes. Les contrastes entre un texte et son arrière-plan doivent être d’au moins 4,5:1. Pour les textes de grande taille (plus de 24 px) ou en gras, le contraste peut être de 3:1. De nombreux outils permettent de mesurer ce ratio de contraste comme Color Contrast Analyzer dans un navigateur.

Pour les Designers, il existe des plugins Figma dont : A11y - Color contrast checker, Stark, Able, Color blind, Color Contrast Grid.

La typographie : il faut bien choisir sa typographie et l’utiliser de la manière la plus accessible possible. Il faut choisir la bonne taille (14 à 20 px en desktop, 12 à 16px pour les mobiles). L’interlignage du texte est aussi très important et rend beaucoup plus fluide la lecture.

Les animations : les animations peuvent nuire à la concentration. Les contenus qui clignotent, défilent ou s’animent doivent s’arrêter après 5 secondes et pouvoir être stoppés par l’utilisateur.

Les gestes complexes : les gestes effectués sur un écran tactile doivent être aussi faciles que possible : faisable avec un seul doigt ou suivre une trajectoire courte et simple.
Pour ceux qui ont des troubles moteurs et qui ne peuvent pas faire certaines actions complexes avec leur doigt comme le Swipe, il faut prévoir une possibilité de le désactiver pour naviguer plus simplement.

Les formulaires : les formulaires ont un fort impact sur l’accessibilité. Un formulaire mal conçu est bloquant et exclue les usagers d’utiliser un produit ou service. Il faut prévoir des intitulés explicite pour chaque champ de formulaire, permettre à l'utilisateur de vérifier ses informations (données personnelles, paiement en ligne) avant de les soumettre.

La navigation : il faut penser à faciliter l’usabilité au sein du site pour tous les usagers. Il faut améliorer également l'accès aux contenus cachés et proposer plusieurs moyens de navigation comme les menus ou le plan du site.

Il existe également d’autres fonctionnalités qui sont utilisées sur mobile et que vous pouvez intégrer dans des applications également.

Le Voice control sur l’Iphone (Voice Access sur Android) permet de commander les actions de navigation et les interactions sur votre appareil à l’aide de votre voix, comme toucher, balayer, saisir, etc. C’est une bonne alternative aux gestes complexes pour des personnes avec des troubles moteurs.
Le lecteur JAWS est pratique pour les malvoyants également. C’est un lecteur d'écran vocal avec support braille permettant de rendre accessible un PC ou mobile en le vocalisant. Pour mettre en œuvre les règles d'accessibilité, ce n’est pas juste une question de designer. Les développeurs et les PPO sont aussi concernés.
Au-delà d'intégrer les maquettes des designers, les développeurs doivent dans le code HTML veiller à ce que :

Chaque page ait un titre unique et utile qui indique le but de la page.

Un texte alternatif soit prévu pour les images. Pour optimiser l'accessibilité du contenu, le contenu alternatif doit être pensé pour faciliter la lecture des images pour les personnes malvoyantes qui utilisent des lecteurs d’écran pour lire le contenu.
Étiqueter les éléments : le type d’objet (case à cocher, bouton, liste déroulante), préciser quand c’est un label par exemple.

L’Opquast dispose d’une checklist de référence qui permet à chaque acteur de l’entreprise de connaître les règles de qualité d’un site web.

Une autre meilleure manière de savoir si son texte est équipé pour l’accessibilité c’est de le faire tester.

Les tests utilisateurs

Il faudra envisager l’acquisition d’outils spécialisés basés sur le sensoriel :

SEI (Sensual Evaluation Instrument) : permet de retranscrire l’émotion lors des tests avec le toucher des formes qui varient du doux au ardu ;

TactUX (Tactile User Experience Assessment Board) : petites tablettes avec des textures différentes que vous pouvez toucher après un test.

Exemple de SEI

Pour effectuer les tests, constituer une équipe sur le long terme facilite pour tous les projets de l'entreprise. Ainsi il faut des utilisateurs de lecteur d’écran, des utilisateurs exclusifs au clavier, des utilisateurs malentendants et d’autres groupes, selon vos besoins.
Il est primordial de développer des liens avec les associations tels que : BrailleNet, la Fédération des Aveugles de France, le Conseil National Handicap et préserver le lien avec les personnes déjà rencontrées.

Chez PALO IT, les sujets de design éthique et notamment l’accessibilité nous tiennent vraiment à cœur. Nos projets sont conçus de manière à respecter les bonnes pratiques qui régissent les normes du RGAA. Nous proposons des audits UX et analysons les sites non-accessibles de nos clients. Nous incluons également dans notre méthodologie de conception les règles d’accessibilité pour leur permettre d’avoir un site de qualité et qui offre une meilleure expérience utilisateur.

L’accessibilité en résumé pour 2022

La principale raison de passer à l’accessibilité est d'offrir la meilleure expérience pour le plus grand nombre d'utilisateurs possibles, en situation de handicap ou non.

En 2022 :