L’accessibilité numérique et le design inclusif

Margaux Membré 15 mai 2024

1. Qu'est-ce que le handicap ?

Le dictionnaire Larousse le définit comme suit :

Handicap - nom masculin.
Limitation d’activité ou restriction de participation à la vie en société due à une altération des capacités sensorielles, physiques, mentales, cognitives ou psychiques.

De son côté, monparcourshandicap.gouv.fr le définit ainsi :

Constitue un Handicap, toute limitation d’activité ou restriction de participation à la vie en société subie dans son environnement par une personne en raison d’une altération substantielle, durable ou définitive, d’une ou plusieurs fonctions physiques, sensorielles, mentales, cognitives ou psychiques, d’un polyhandicap ou d’un trouble de santé invalidant.

On parle donc de situation de handicap lorsqu’une personne ayant une altération se trouve empêchée de faire quelque chose, du fait de l’inadaptation de son environnement à ses capacités.

Il faut également savoir qu’une personne en situation de handicap permanent rencontre les mêmes besoins que des personnes qui font face à un handicap ponctuel, temporaire ou évolutif.

handicap01
21 millions de personnes sont concernées par l'usage d'une main aux USA - The Good Design Playbook.

Il existe différentes formes de handicap :

handicap02
Schéma illustrant les handicaps, qu'ils soient permanents, temporaires, situationnels ou qu'il s'agisse du vieillisement - The Good Design Playbook.

2. Qu'est-ce que l'inclusion ?

L’inclusion, c’est prendre “en compte la diversité de chacun”, dans une société composée de personnes multiples et variées et notamment le vieillissement de la population.

Quand on parle d’inclusion, on pense très souvent à tout ce qui touche aux handicaps physiques ou encore sensoriels. La prise en compte des handicaps sociaux ou psychologiques est encore trop faible selon moi. C’est également le point de vue de Luz Delgado, qui estime que l’inclusion touche à la vulnérabilité, qu’elle définit ainsi :

Être vulnérable, c’est être davantage exposé aux dangers, ou avoir besoin d’un soutien accru. C’est être dans une situation de faiblesse physique ou psychologique.

De fait, l’inclusion doit intégrer les notions de handicaps invisibles, comme :

Les neurodivergences : troubles de l’attention avec ou sans hyperactivité, trouble anxieux, trouble dys-, trouble du spectre de l’autisme…
Les troubles de la santé mentale : l’anxiété, les addictions, la dépression…
Les discriminations sociales : la transphobie, l’homophobie, le racisme, le sexisme…
Les maladies chroniques : l’asthme, le diabète, les douleurs dues aux maladies chroniques…
Les situations de la vie quotidienne : immigration, grossesse, accident, vieillesse, précarité…

Quelques données :

En 2015, 35% de la population française faisait face à une situation de handicap permanent ou temporaire.
80% des personnes en situation de handicap ont un handicap invisible : troubles auditifs ou cognitifs par exemple.
Dans le monde, 1 personne sur 5 a aujourd’hui 65 ans. En 2040, il s’agira d’1 personne sur 4. La population est vieillissante.

Ces données sont issues du Good Design Playbook.

Les troubles du neuro-développement (TND) touchent 5% de la population, soit environ 35 000 naissances par an, selon la Haute Autorité de santé. Ce chiffre est en constante augmentation.
5% des enfants et adolescents, 2,5% des adultes ont un Trouble de l’Attention avec Hyperactivité (TDAH).
5 à 17% des enfants en âge d’être scolarisés ont un trouble dyslexique.
6% de la population générale souffre d’un trouble développemental de la coordination (anciennement appelé dyspraxie).

Ces données sont issues du site handicap.gouv.fr, et ont été mises à jour en novembre 2023.

3. L'accessibilité, une notion légale

L’accessibilité n’est pas un droit, c’est un devoir.
En effet, le fait de rendre accessible un produit ou un service à tous les utilisateurs, c’est se battre contre la discrimination.

Le Larousse définit la discrimination ainsi :

Action de séparer, de distinguer deux ou plusieurs êtres ou choses à partir de certains critères ou caractères distinctifs.

Ou encore :

Fait de distinguer et de traiter différemment (le plus souvent plus mal) quelqu'un ou un groupe par rapport au reste de la collectivité ou par rapport à une autre personne.

Il est important de noter que, selon l’article 225-2 du code pénal, la discrimination commise à l’égard d’une personne physique ou morale, “est punie de 3 ans d’emprisonnement et de 45 000 euros d’amende lorsqu’elle consiste [notamment] à refuser la fourniture d’un bien ou d’un service.”
Pour autant, cet article n’est qu’une partie du socle légal qui encadre l’obligation d’accessibilité numérique. C’est surtout la loi de 2005 et le décret d’application du 24 juillet 2019 qui fixent le cadre légal de l’accessibilité numérique en France.

De fait, mettre à part une partie de la population parce que l’on estime que nos utilisateurs ne rencontreront pas ces problématiques, c’est avoir un comportement discriminant, même pour un produit ou un service numérique : tout un chacun devrait pouvoir l’utiliser.

Les référentiels en termes d’accessibilité sont :

Le WCAG dans le monde : WCAG signifie Web Content Accessibility Guidelines (Règles pour l’accessibilité des contenus du web en français) et définit les règles à suivre du “world wide web consortium” (W3C).
Le RGAA en France : Référentiel général d’amélioration de l’accessibilité. Il est destiné à définir les modalités d'accessibilité des services en ligne pour la France.

Pour être accessible, une interface numérique doit respecter les normes WCAG (pour l’international) et RGAA (pour la France). Pour s’assurer qu’elle respecte effectivement ces normes, il est possible de réaliser un audit qui résultera en une note, affichée en pourcentage. Ce pourcentage d’accessibilité est décliné en 3 statuts :

Non conforme : taux inférieur à 50% (< 50%).
Partiellement conforme : taux supérieur à 50% (> 50%).
Totalement conforme : taux de 100% (= 100%).

Ce statut doit être affiché et visible sur la page d’accueil.
Cet audit est valable pendant 3 ans : au terme de cette période, il doit être reconduit.

Il est également nécessaire de publier un schéma pluriannuel de mise en accessibilité, décliné en un maximum de 3 plans d’action annuels, ainsi que nommer un référent accessibilité.

4. Comment concevoir des interfaces accessibles et inclusives ?

Aujourd’hui, de plus en plus de services passent par le numérique, même des services publics :

Ameli
CAF
France Travail
Impots.gouv
…

Mais également des services qui sont aujourd’hui indispensables, comme Doctolib par lequel il est difficile de ne pas passer pour avoir un rendez-vous médical.
Que les utilisateurs soient âgés ou handicapés, beaucoup de personnes sont déjà exclues par le numérique parce qu’on ne les prend pas suffisamment en compte lors de la conception.

Voyons ensemble quelques manières pour concevoir de manière plus accessible et inclusive.

Diversifier le panel

Dans le recrutement des participants pour toute la recherche utilisateur, il est important d’essayer de trouver des personnes avec et sans handicap, d’âges, de genres, de cultures et de modes de vie différents, mais également des personnes avec des handicaps invisibles.

Faire des ateliers de co-création

Piocher dans le panel diversifié qui a été constitué afin de réaliser des ateliers de co-création avec des utilisateurs en situation de handicap, mais pas que, en prenant en compte les émotions, la perception, l’ergonomie et ce qui est agréable ou non à l’usage. Enfin, toujours terminer par une phase de prototypage, à réitérer jusqu’à ce que le produit ou le service soit validé par une pluralité d’utilisateurs ayant des contextes différents.

Prévoir un lien d’évitement

Présent en haut de page, le lien d’évitement est une ancre qui permet aux utilisateurs naviguant au clavier de pouvoir aller vers le contenu principal de la page. Il doit être présent en version desktop (sur ordinateur) mais également en version mobile.

Permettre aux utilisateurs de personnaliser leur interface

Il existe des mécanismes de remplacement (style switcher) qui permettent aux personnes avec des déficiences visuelles de personnaliser leurs couleurs afin de mieux percevoir le contenu. Outre les couleurs, certains utilisateurs auront peut-être besoin de zoomer dans la page ou d’agrandir la taille de la typographie par défaut : il faut éviter que les contenus soient trop contraints et qu’ils ne finissent par se chevaucher à cause de ces modifications liées à de la personnalisation.

Faire attention au contraste

C’est l’une des règles les plus “basiques”, mais elle est néanmoins primordiale. Le contraste doit avoir un score de 3:1 minimum, et il faut essayer d’atteindre les notations AA ou AAA. La couleur seule ne suffit pas : il faut un texte ou une explication, que ce soit pour des champs avec une erreur, ou encore des graphiques qui doivent comprendre une description et des symboles.
Pour en savoir plus sur les ratios de contrastes, vous pouvez lire cette traduction du WCAG : les ratios de contrastes utilisés dans le WCAG.

Laisser le contrôle à l’utilisateur

Que ce soit pour les contenus multimédias et les animations ou même les éléments d’interface, l’utilisateur doit pouvoir contrôler son expérience. Il doit pouvoir mettre en pause les animations ou les vidéos, mais également pouvoir masquer lui-même une notification importante, d’autant plus dans un contexte mobile où il pourrait ne pas être totalement concentré sur ce qu’il est en train de faire.
Dans la même optique, le “infinite scroll” (scroll infini) est à prohiber : il est problématique puisqu’il induit une surcharge d’information qui peut perturber l’utilisateur dans sa navigation.

Permettre aux éléments cliquables d’avoir un état “focus”

L’état “focus” est visible, sur Google par exemple, par une bordure bleue qui entoure l’élément. L'état focus ne doit jamais être supprimé, et avoir un ratio de contraste de minimum 3:1.

Travailler sur le contraste des éléments textuels sur une image

S’il est vraiment nécessaire qu’un texte soit affiché sur une image, alors il est primordial de faire attention au contraste : en règle générale, on ajoute un “overlay” (une couche plus foncée en opacité au-dessus de l’image) pour avoir un contraste suffisant.

Ne pas mettre systématiquement un placeholder dans les formulaires

Le placeholder est un attribut qui permet d’afficher du texte par défaut dans des champs de formulaire. Il permet de donner des indices à l’utilisateur sur le type d’information à renseigner mais non indispensables… Pour autant, il est souvent utilisé à mauvais escient.
Il n’est pas nécessaire pour les informations “basiques” : nom, prénom… Il ne doit pas non plus être utilisé pour les formats attendus, qui doivent toujours être visibles, et il ne doit surtout pas être utilisé à la place d’un label. Enfin, il doit avoir un contraste de 4,5:1.
La mauvaise utilisation des placeholders peut gêner certaines personnes ayant des déficiences cognitives ou de la mémoire lorsque le placeholder disparaît. Ils ne sont pas restitués non plus par les couples navigateurs - lecteurs d’écran : les personnes ayant des déficiences visuelles n’auront pas l’information.
Le placeholder est donc à utiliser avec parcimonie.

Intégrer les notions d’accessibilité dans les livrables et dans les Design Systems

Documenter le design système avec les couleurs à utiliser et les contrastes (association des couleurs), prévoir les différents états (erreurs, focus,...), spécifier des informations invisibles comme des attributs à mettre dans le code (aria, title…), préciser les interactions et notamment l’ordre des tabulations s’il sort de l’ordinaire, échanger avec l’équipe technique… Toutes ces étapes doivent être un automatisme qui facilitera la mise en œuvre de l’accessibilité dans les produits et services numériques.

accessible-color-palette
Accessible Color Palette, un outil sur le web qui permet de faire des combinaisons de couleurs accessible.

L’accessibilité fait partie de l’Expérience Utilisateur (UX), et le but d’avoir une démarche orientée utilisateurs est de répondre à un besoin essentiel. Évitons les fonctionnalités superflues, et prenons le temps d’intégrer toutes ces dispositions dès le début du projet : faire de l’accessibilité dès le départ est plus facile, plus rapide et moins coûteuse.

5. Des outils qui aident les personnes en situation de handicap à naviguer sur les interfaces numériques

Pour ouvrir un peu cet article, j’aimerais vous présenter quelques dispositifs qui existent déjà pour aider des personnes avec des handicaps lourds à naviguer sur les interfaces numériques.

Le plus basique est sans aucun doute la navigation au clavier : elle doit être accessible pour tous les sites web desktop. La navigation à la souris doit également être possible : elle est beaucoup plus “habituelle” et souvent prévue.
Il ne faut pas oublier la navigation avec lecteur d’écran ainsi que la navigation vocale.

Il existe d’autres outils, plus inhabituels :

"Voir avec la langue"

Il s'agit d'un dispositif qui permet de "voir avec la langue", c'est-à-dire "ressentir" grâce à sa langue une image, un visuel. Les images sont d'abord pixelisées pour ensuite être traduites en signaux électriques et envoyées sur une matrice d'électrodes.
Vidéo YouTube - Voir avec la langue.

Dans cette vidéo de 2010, on nous apprend que le prototype de ce dispositif coûte 7000€.

voir-avec-la-langue
Une femme avec le dispositif dans la bouche, un casque avec des caméras sur la tête, des visuels devant elle et un écran sur la droite qui retranscrit ce que la femme "voit".

Le headstick

Ce dispositif consiste en un "bâton" accroché sur la tête et qui permet, grâce aux mouvements de la tête, d'appuyer sur les touches d'un clavier par exemple.
Il existe également un dispositif "mouth stick" qui fonctionne de la même manière, mais qui doit être "tenu" grâce à la bouche.

headstick-1
Photo d'un homme avec un headstick attaché sur sa casquette, en train de taper au clavier grâce au bâton.

La plage braille

Connectée en Bluetooth ou sur un port USB, elle permet d'afficher en braille le texte présenté à l'écran grâce à un logiciel. Elle se connecte à un ordinateur et même à des tablettes tactiles ou des smartphones.
Vidéo YouTube - Usage de plage braille et synthèse vocale par personne non voyante.

plage-braille
Visuel d'une plage braille ajoutée à un clavier d'ordinateur.

Le clavier visuel

Permet aux personnes en situation de handicap de naviguer via le mouvement de leurs yeux, comme l’eye-tracking : Vidéo YouTube - Un homme en situation de handicap joue à World of Warcraft en utilisant seulement ses yeux (EN).

naviguer-clavier-yeux
Un homme utilise le clavier virtuel grâce au mouvement de ses yeux pour écrire le nom de son personnage sur le jeu World of Warcraft.

L'adaptative controller - XBOX

Il existe des manettes spéciales pour jouer sur l’ordinateur ou les consoles, comme l’adaptative controller de XBOX : Xbox Adaptive Controller.

xbox-adaptative-controller
Visuel de la XBOX Adaptative Controller, une manette adaptée pour XBOX.

Un pas vers l'accès au numérique pour tous

De plus en plus d’outils sont créés pour permettre à tous de bénéficier de la même expérience sur les plateformes numériques. Pour autant, ces outils ont un coût supplémentaire : il faut compter 90€ pour l’Adaptative Controller par exemple.
De cette perspective, peut-on vraiment dire que nous avons les mêmes droits ?

Outre ces outils “physiques”, il existe de plus en plus de jeux vidéo qui permettent de personnaliser son expérience de jeu.
God of War Ragnarök, sur PlayStation 5, en est un bon exemple. Une page du site détaille toutes les options disponibles pour l'accessibilité : Page du site web PlayStation qui démontre les options d'accessibilité du jeu God of War Ragnarök.

god-of-war_accessibility
Options de personnalisation pour l'accessibilité du jeu God of War sur PlayStation 5.

god-of-war-ragnarok-accessibility-high-contrast-p1-en-01nov22-1
Préréglage de contraste élevé afin de saturer les couleurs des personnages et des objets pour les rendre plus visibles. Les personnages ont des couleurs : bleu pour Kratos, le "héros", et rouge pour les ennemis.

Il existe même des jeux conçus pour des personnes en situation de handicap, comme le jeu “A blind legend” où il n’y a pas d’images mais où l’utilisateur doit se repérer grâce au bruit.

a-blind-legend
Image de présentation du jeu A Blind Legend, avec le titre écrit en blanc en haut et deux personnes, dont une fille sur un cheval et un homme avec une épée.

L’univers sonore a été recréé en trois dimensions dans lequel le joueur pourra évoluer, se repérer et se diriger uniquement grâce aux sons restitués par la technologie innovante du son binaural. Elle va donner la possibilité à l’auditeur de situer et de localiser chaque élément sonore dans l’espace tridimensionnel et rend possible la sensation d’immersion presque parfaite dans un paysage sonore en trois dimensions.

Si les jeux vidéo nous permettent autant de flexibilité et de “contrôle” sur notre expérience, pourquoi est-ce si compliqué à faire du côté interfaces numériques sur le web… ? Au fond, la personnalisation répond au principe ergonomique de “laisser le contrôle aux utilisateurs”. C'est donc de notre devoir, en tant qu'UX Designers, de suivre les principes de l'accessibilité dans nos conceptions.

En conclusion

L’accessibilité nous concerne toutes et tous.
Un handicap temporaire peut arriver à tout moment de notre vie, et si nous sommes aujourd’hui complètement valides, rien ne nous garantit que ce sera toujours le cas demain avec un handicap lié à la vieillesse ou dû à une maladie, et qui devienne permanent.
C’est pourquoi il me paraît important de sensibiliser un maximum de personnes à l’accessibilité et à l’inclusion.

L’inclusion me paraît encore davantage primordiale puisque j’ai été en phobie scolaire durant 5 ans, et que je ne trouvais pas d’autres solutions pour finaliser mon baccalauréat que de parvenir à m’en sortir et de retourner dans un lycée classique.
Mon cas n’avait pas été envisagé, et les informations pour m’aider à y voir plus clair n’étaient pas suffisamment “accessibles”, alors même que le CNED existait déjà.

En prenant en compte une pluralité de scénarios, une diversité d’utilisateurs avec des problématiques multiples, on maximise les chances de pouvoir aider un maximum de gens.
Parce qu’après tout, c’est aussi ça le métier de designer : aider les utilisateurs à réaliser leurs objectifs en ayant un minimum de frictions.

Quelques définitions importantes

L’ergonomie

Une interface est dite “ergonomique” lorsqu’elle est agréable et pratique à utiliser.

L’affordance

En design numérique, l’affordance est un terme utilisé pour désigner un composant qui a un design qui donne une indication sur le fait qu’il est actionnable. Par exemple, les boutons ont souvent les mêmes formes, et avec leur style particulier (rectangle de couleur), on sait qu’ils sont cliquables.
Plus le composant sera affordant, moins il aura besoin d’explications pour être compris, et plus la marge d’erreurs sera réduite. C’est également pour cette raison que l’on préconise que les liens soient soulignés.

L’expérience utilisateur

L’expérience utilisateur s’étend bien au-delà de l’utilisation de l’interface : elle commence avant l’utilisation de l’interface, continue pendant son utilisation et se termine après l’utilisation de l’interface.
Il s’agit de l’”expérience” vécue par un utilisateur tout au long de son parcours, notamment en termes de perception, de ressentis…
C’est pour cette raison que travailler la totalité du parcours est aussi important, et notamment pour les sites e-commerce : la qualité du service client est un facteur de satisfaction et de recommandation.

Ateliers de co-création

Il s’agit de moments entre des professionnels (designers, ergothérapeutes…) et des utilisateurs (personnes en situation de handicap ou non) pendant la phase d’idéation afin de générer un maximum d’idées et de solutions avec l’aide de l’intelligence collective.
Ces ateliers évitent aux concepteurs de rester bloqués dans leurs idées préconçues et stéréotypées et permettent de véritablement prendre en compte les utilisateurs, puisqu’ils sont présents physiquement.

Inclusif

Le design Inclusif, c’est inclure la diversité des personnes présentes dans la société (au sens large) pour concevoir et utiliser des objets ou interfaces numériques. On prend en compte toute la population, sans jamais exclure des personnes par rapport à leur handicap, leur âge, leur culture, leur genre, leur mode de vie…

Utilisabilité

L’utilisabilité numérique a été définie par Jakob Nielsen, et elle désigne l’aptitude d’une interface à être utilisée facilement par une personne. Elle repose sur 5 critères :

L’efficience : l’utilisateur parvient à atteindre son objectif.
La satisfaction : ce que ressent l’utilisateur en utilisant l’interface.
La facilité d’apprentissage : rejoint la notion d’affordance. L’utilisateur ne doit pas faire de gros efforts pour pouvoir utiliser l’interface.
La facilité d’appropriation : l’utilisateur retient la manière dont l’interface fonctionne.
La fiabilité : l’utilisateur fait peu d’erreurs dans son utilisation.