Introduction

Pour commencer, je vous informe que la transcription de cette conférence ainsi que le support de présentation sont disponibles sur le web à l’adresse http://a42.fr/uxincognita, pour vous permettre de la suivre plus facilement si besoin.

Je m’appelle Marie Guillaumet, et je suis consultante en accessibilité numérique pour la société Access42.

Le thème de cette soirée organisée par UX Incognita est « Réconcilions-nous avec l’accessibilité ». Si on a besoin de « se réconcilier », c’est qu’on s’est fâchés. En effet, l’accessibilité est soupçonnée de rendre les sites « moches », d’être « compliquée » à mettre en place, de « coûter cher »… On entend aussi souvent des phrases telles que « l’accessibilité, non merci, notre cible n’est pas handicapée »… Au-delà de ça, peut-être que vous-mêmes, vous avez déjà rencontré des difficultés pour rendre une interface accessible.

Mon objectif est de vous donner envie d’enterrer la hache de guerre, et vous montrer que l’accessibilité et l’UX font très bon ménage, et peuvent même devenir de très bonnes amies.

En matière de design UX et UI, il y a beaucoup de choses que vous pouvez faire pour rendre vos projets plus accessibles. Et la plupart d’entre elles sont relativement simples à mettre en place, contrairement aux idées reçues.

Pour clarifier un peu le sujet, l’accessibilité du web signifie que les personnes en situation de handicap peuvent accéder au web et l’utiliser comme tout le monde.

On limite souvent les bienfaits de l’accessibilité aux utilisateurs aveugles. C’est vrai que pour les aveugles, l’accessibilité est indispensable.

Mais en réalité, l’accessibilité concerne tous les handicaps qui affectent l’accès au web :

D’après une étude de l’INSEE, on compte environ 12 à 15 millions de personnes en situation de handicap en France. Cela représente environ 21 % de la population française. Rien que dans votre rue, votre bus, ou parmi vos clients, ça commence à faire du monde !

Ces chiffres prouvent que ceux qui considèrent les utilisateurs handicapés comme « des cas isolés » se trompent.

Surtout que 80 % des handicaps sont invisibles. Par exemple, être daltonien, c’est un handicap. Être dyslexique, aussi. Ça concerne peut-être quelques personnes parmi vous.

Bref, le but de l’accessibilité numérique, c’est de pallier le défaut d’inclusion des personnes handicapées dans notre société, en leur permettant d’accéder aux informations et services disponibles en ligne.

Diversité des situations individuelles

Il y a donc plusieurs grandes catégories de handicaps, mais en réalité il y a une infinité de situations individuelles.

Pour les connaître, rien ne remplace le fait d’échanger directement avec les personnes concernées pour savoir de quoi elles ont besoin et dans quelles conditions elles utilisent le net.

Il existe par exemple de nombreuses technologies d’assistance qui permettent aux personnes handicapées d’utiliser le net comme tout le monde. La plus connue est sans doute le lecteur d’écran, utilisé par les personnes aveugles et les grands malvoyants, mais aussi par les personnes ayant de grandes difficultés de lecture.

Faute de fréquenter des personnes en situation de handicap dans votre vie de tous les jours, il existe quelques ressources en ligne pour vous aider à vous familiariser avec leurs besoins et leurs attentes vis-à-vis du web.

L’un d’eux est un guide intitulé Défauts d’accessibilité : impacts sur les utilisateurs. Pour chaque défaut d’accessibilité d’une interface, ce guide explique les conséquences que cela a pour chaque catégorie d’utilisateurs en fonction de leur handicap.

Ce guide est un guide d’accompagnement à la prise en main du RGAA (Référentiel Général d'Accessibilité pour les Administrations) : c’est la référence française légale en matière d’accessibilité numérique.

Le RGAA est basé sur les normes d’accessibilité émises par le W3C.

Pas de panique ! Je sais que dès qu’on évoque les standards et les normes, ça a tendance à faire peur. Ce sont des outils précieux, mais il est vrai que quand on est lâché·e là-dedans sans guide, ça peut être un peu déstabilisant.

C’est pourquoi je vous propose de rentrer dans le vif du sujet, et vous présenter rapidement deux problématiques d’accessibilité qui concernent le design et des solutions concrètes qui existent pour y répondre.

Ces solutions sont simples à comprendre, faciles à prévoir en amont de vos projets, et amélioreront beaucoup l’expérience des personnes handicapées qui utiliseront vos futures interfaces.

Exemples concrets

Lisibilité : laisser l’utilisateur personnaliser l’interface

La première problématique concerne la lisibilité : on va voir comment on peut laisser l’utilisateur personnaliser l’interface.

Quand vous créez une interface de zéro, vous avez en général le champ libre pour faire vos propres choix de présentation, par exemple en ce qui concerne les couleurs.

Vous pouvez donc vous assurer qu’elles respectent les ratios de contrastes exigés par WCAG et le RGAA, qui dépendent de la taille de votre texte mais aussi de sa graisse (pour en savoir plus, lire la fiche Contraste dans le Guide du concepteur RGAA 3).

Il y a un petit outil pratique pour cela, c’est Colour Contrast Analyzer. Il est disponible pour Mac et PC, et il est gratuit.

En revanche, quand vous récupérez la charte graphique d’un client, que vous devez la décliner pour le web mais que les contrastes sont insuffisants, vous ne pouvez pas toujours la modifier pour la rendre accessible.

Admettons que la couleur emblématique de votre client soit le orange . Le orange, comme le jaune, c’est une couleur qui, de base, n'est pas assez contrastée lorsqu'elle est utilisée avec du blanc.

Or, à moins de créer un site entièrement sur fond noir, ce qui ne collerait pas forcément à la charte de votre client et poserait sans doute d’autres soucis, il est souvent impossible de proposer une autre nuance d’orange :

  1. d’une part parce qu’une telle couleur ne se modifie pas, même pour le web, car c’est trop stratégique en terme d’identitié de marque. Votre travail ne consiste pas à remplacer certaines couleurs d’une charte graphique par d’autres ;
  2. d’autre part parce que vous aurez beau triturer le code hexadécimal de ce fameux orange dans tous les sens, vous aurez probablement du mal à le rendre accessible. Au mieux vous obtiendrez un orange terne, voire un marron pas terrible, bref ça n’ira pas.

Alors comment rendre ce contraste accessible ?

La solution consiste à prévoir un mécanisme permettant aux utilisateurs de renforcer les contrastes, à l’aide d’un style switcher (un sélecteur de styles).

En général ça se présente sous la forme d’un petit bouton à activer, qui va permettre aux personnes qui en ont besoin, c’est-à-dire les personnes déficientes visuelles, les séniors et les personnes ayant des difficultés de lecture ou de concentration, de renforcer les contrastes du site concerné.

Un style switcher requiert quelques lignes de CSS et de JavaScript. C’est donc relativement facile à mettre en place (surtout qu’il existe des librairies open source pour ça), et ça apporte un gain utilisateur très important. La seule difficulté, c’est de ne pas l’oublier dans vos maquettes et dans vos spécifications !

Exemple 1 : SNCF

Par exemple, sur le nouveau site de la SNCF, les couleurs par défaut ne sont pas toujours assez contrastées. C’est le cas du rapport de contraste entre le bleu clair et le blanc qui est insuffisant.

C’est pourquoi leurs designers ont prévu un sélecteur de styles, accessible depuis un bouton « Accessibilité » situé au début de la page, qui permet de renforcer les contrastes. Grâce à une surcharge CSS, le bleu qui posait problème est remplacé par un bleu plus foncé.

De même, ce dispositif ajoute aussi un arrière-plan uni blanc aux textes disposés sur l’arrière-plan photo, pour renforcer la lisibilité des textes.

Exemple 2 : Access42

Il est également possible et conseillé de proposer une option permettant d’inverser les contrastes.

Par exemple, en affichant les textes en jaune sur fond bleu foncé. Cela permet d’atténuer la fatigue visuelle.

Exemple 3 : OUI.sncf

J’en reviens à la problématique de la couleur orange.

Sur le site OUI.sncf, un sélecteur de styles permet justement de remplacer la couleur orange par défaut (#E95135), utilisée à peu près partout sur le site, mais insuffisamment contrastée avec le blanc, par un orange plus foncé (#D8371C).

Contrastes par défaut.
Contraste non conforme : orange par défaut #E95135.
Contraste conforme AA.
Contraste conforme AA : orange renforcé #D8371C.

Ils ont donc mis en place un sélecteur de styles permettant aux utilisateurs déficients visuels de renforcer les contrastes.

Contrastes par défaut.
Contrastes par défaut.
Contrastes renforcés.
Contrastes renforcés.

Alors si déjà vous pensez à vérifier vos contrastes, c’est bien. S’ils ne sont pas suffisants et que vous prévoyez un mécanisme de style switcher, c’est encore mieux. Et le top du top consiste à prévoir, en plus, un cookie qui affichera directement le site avec les réglages de l’utilisateur lors de ses prochaines visites. Là, vous êtes sûr·es d’améliorer d’un coup l’expérience des utilisateurs concernés.

Exemple 4 : Accor Hotels Group

Un style switcher accessible peut également permettre à l’utilisateur d’améliorer la lisibilité du site.

Par exemple, en augmentant l’interlignage de tous les textes, et en supprimant la justification de ceux-ci pour améliorer le confort de lecture.

C’est le cas sur le site du groupe Accor Hotels (leur style switcher est accessible en activant le bouton « Accessibilité », représenté par une roue crantée).

Il est aussi possible de proposer une police d’écriture alternative.

En effet, en activant l’option « Police (dyslexie) », les textes du site sont affichés à l’aide d’une police adaptée à la dyslexie :

Police par défaut
Police par défaut du site, qui peut poser des problèmes de lisibilité aux personnes dyslexiques.
Police adaptée à la dyslexie
Police adaptée à la dyslexie, améliorant la lisibilité du site pour les personnes dyslexiques.

Voilà, l’épineuse question du texte orange sur fond blanc n’a plus de secret pour vous !

Formulaires : faciliter la saisie

La seconde problématique dont je voudrais vous parler pour terminer concerne l’accessibilité des formulaires, pour aider les utilisateurs handicapés à les remplir.

Cette problématique est particulièrement complexe : l’aborder de manière exhaustive en quelques minutes est impossible. Mais je peux quand même vous donner deux astuces pour rendre vos formulaires plus accessibles.

Pour replacer le contexte utilisateurs, les personnes présentant une déficience mentale, une déficience cognitive ou une déficience psychique peuvent avoir des difficultés à comprendre le contenu d’un formulaire.

Elles ont donc besoin de savoir quels champs sont obligatoires, ce qu’on leur demande de saisir exactement et sous quelle forme.

Aussi, prenez l'habitude d’indiquer le format attendu dans l’étiquette du champ.

Par exemple, si vous avez un champ de formulaire intitulé « Date de l’aller », il faut ajouter le format attendu après l’intitulé, comme « Date de l’aller (JJ/MM/AAAA) ».

Sans cette explication préalable, certains utilisateurs présentant un handicap mental ou cognitif pourraient être dans l’incapacité de remplir ce champ de formulaire sans se tromper.

De plus, même si vous avez prévu d’ajouter un datepicker (sélecteur de dates), prévoyez que le champ de saisie puisse être éditable, et non pas désactivé.

En effet, la plupart des datepickers ne sont pas accessibles, et pour bien des utilisateurs, notamment les personnes aveugles ayant recours à un lecteur d’écran, mais aussi les utilisateurs naviguant exclusivement au clavier, notamment certaines personnes en situation de handicap moteur, il sera plus simple de saisir la date manuellement.

Si malgré tout, l’utilisateur se trompe dans sa saisie, donnez un exemple de saisie réelle dans le message d’erreur pour l’aider à corriger sa saisie. Par exemple : « Erreur sur la date. Exemple de date : 30/01/2018 ».

Snif, c’est déjà terminé !

15 minutes c’est vraiment trop court ! Il est évident que cette présentation ne présente qu’une infime partie de ce qu’il est possible de faire en phase de conception pour rendre un site accessible.

Si tout cela vous a mis en appétit, précipitez-vous sur le Guide du concepteur RGAA 3 qui contient plein d’autres exemples de ce genre, et vous aidera à vous familiariser avec les critères d’accessibilité web et à améliorer l’UX pour les personnes en situation de handicap.

J’ai également écrit un article fleuve sur le design accessible, qui contient plein d’exemples et d’outils.

Access42 vient aussi de lancer une lettre d’information mensuelle dédiée à l’accessibilité. Vous pouvez vous abonner sur a42.fr/newsletter.

Enfin, vous pouvez aussi choisir de suivre une formation spécialisée en design accessible qui vous permettra d’acquérir les bons réflexes.

Merci de votre attention !

Remerciements

Merci à Alexandra Nemery et à toute l’équipe d’UX Incognita pour leur invitation, ainsi qu’à Stéphanie Walter pour la maquette des formulaires.

Icônes créées par mikicon, Jordan Delcros, Hadi Davodpour, Saeful Muslim, AomAm et Mr. Minuvi pour The Noun Project.