L’UX face à l’accessibilité

Mar 17, 2017
Stephane chilton
Petit constat sur l’accessibilité :
  • Les gens pensent que handicap = chaise roulante.
  • Les clients pensent que l’accessibilité va exploser les coûts.
  • Les UX / DA / DEV n’accordent que peu d’intérêts à ces problématiques.

 

1- LE HANDICAP EN FRANCE

Nous sommes 65 000 000 en France en 2016 (c’est arrondi pour simplifier). Sur ces 65 millions, 20% sont en situation de handicap au sens de la loi, ce qui fait 13 000 000 de Français (c’est toujours arrondi pour simplifier). Normalement vous devriez déjà vous dire que 13 millions ce n’est pas rien du tout, et que ne pas penser un site ou une appli pour cette population serait peu judicieux. Mais ce chiffre double si on compte les handicaps temporaires. Nous arrivons à 40% et 26 000 000 de Français !

Maintenant vous commencez à voir qu’on ne parle pas d’une poignée d’individus. Mais vous vous dites que 20 ou 40% c’est conséquent et que c’est assez étrange de ne pas vous en être rendu compte avant. Figurez vous que c’est normal puisque 80% des handicaps sont dits invisibles.

giphy 18.15.47

 

2- LES APPLICATIONS SPÉCIALISÉES

Il existe de plus en plus d’applications qui viennent aider certaines populations précises. Que ce soit pour reconnaitre des couleurs pour les déficients visuels ou pour guider de manière très différente des personnes à mobilité réduite, vous pouvez trouver pléthore d’applications très spécifiques et fort heureusement gratuites pour la majorité.

Je vous laisse regarder sur les stores en cherchant avec des mots clés comme accessibilité ou handicap vous pourrez en trouver et en essayer plusieurs.

 

3- L’ACCESSIBILITÉ NATIVE

Difficile de retrouver depuis quand Apple propose des réglages en lien avec l’accessibilité. En revanche, ce qui est certain c’est que chaque nouvelle version d’OS voit son lot de nouveautés dans cette rubrique.
Vous pouvez y accéder depuis Réglages -> Général -> Accessibilité.

Groupe 66

Comme vous pouvez le voir il existe de nombreuses fonctionnalités. Ce qui est assez drôle c’est que certaines d’entre elles sont principalement utilisées par des gens non handicapés.
Prenons l’exemple du flash. Il est possible de le faire clignoter lors de la réception d’un message, d’un appel, d’une alerte… Si à la base l’objectif était de signaler quelque chose à une personne mal entendante ou sourde, aujourd’hui beaucoup de personnes sans problème auditif activent aussi cette fonctionnalité.

Sans détailler chaque fonctionnalité de l’accessibilité, je me dois de vous parler de la principale : VoiceOver. Il s’agit de LA fonctionnalité phare de cette rubrique, sur laquelle Apple a beaucoup investi. Elle permet à votre iphone de lire à haute voix ce qui est sur votre écran. En théorie vous devriez pouvoir naviguer et consommer les applications les yeux fermés. En réalité, bon courage car peu d’applications sont VoiceOver friendly.

Pour terminer sur l’accessibilité native, je vous donne un dernier exemple qui impacte notre métier, la taille de police.
Vous faites vos wireframes, la/le DA en fait de belles maquettes et la/le DEV une belle application, mais patatrac… Robert, 67 ans ne voit pas très bien et il a réglé la police à sa plus grande taille. Votre belle page d’accueil qui tenait en un écran devient scrollable et l’ensemble des éléments est déstructuré.
Dommage, personne n’a voulu penser en amont que l’utilisateur a ce pouvoir, nativement, de jouer sur la taille et la graisse de la police. Ce qui était esthétique devient indigeste.

 

4- LES EXEMPLES

Voici le moment tant attendu. Je me devais de vous montrer du concret. Des visuels, de la critique et donc sûrement des désaccords. Bref, voici quelques exemples d’applis, bons comme mauvais. L’idée n’étant pas d’accuser, mais juste de montrer comment des éléments simples et anodins peuvent devenir contraignants et bloquants pour certaines populations.

A- ON NE VOIT PAS TOUS LES MÊMES COULEURS

Si l’appli FNAC est une référence dans bien des domaines, la page de notation n’est pas du tout pensée pour des personnes avec des déficiences visuelles.

Groupe 65A gauche l’application FNAC, et à droite l’application FNAC que voit une personne atteinte par exemple de daltonisme. Difficile d’associer une couleur à une note. Heureusement qu’il y a les chiffre associés, même s’ils sont particulièrement petits.

B- SOYEZ VISUEL

Parce qu’un graphique vaut souvent des dizaines de mots, n’hésitez pas à illustrer plutôt qu’expliquer. Les banques sont le meilleur exemple, puisque depuis quelques années les graphiques en tout genre illustrent tout type de dépenses dans les applications.

Groupe 68

A gauche, l’application Vivino qui illustre la répartition de la cave du profil sous forme de camembert. Cela me permet de voir en un coup d’oeil que trois catégories de vin rouge représentent presque la moitié de ma cave.

A droite, un exemple d’application bancaire avec Bankin qui permet aussi de voir très rapidement les principaux postes de dépenses de la période.

C- ASSOCIEZ LES ACTIONS ET LE CONTEXTE

Le concept est que l’action que l’on demande à l’utilisateur soit au maximum associée en terme de logique cognitive à l’élément en question (rassurez-vous l’exemple est plus clair que la phrase précédente). Pour illustrer cela je vais prendre une page web du site ux-republic.com affichée sur mobile (notre site est le visuel du milieu).
Voici trois visuels ou seul la partie « recherche » située au milieu diffère.

Groupe 74Le premier visuel montre un champ recherche avec un bouton qui n’est pas clairement lié, dont le wording n’est pas associé à l’action et dont la couleur prête à confusion.
Le deuxième visuel est déjà plus « accessible » puisque le bouton est plus clairement lié et le wording décrit parfaitement l’action.
Le troisième visuel privilégie une couleur liée à la validation d’un élément et au lancement d’une recherche, ce que vient confirmé le chevron.

D- CONTRASTEZ ET ESPACEZ

Que ce soit des personnes ayant des déficiences visuelles ou motrices, si des informations, boutons, actions sont trop proches et / ou trop fines, cela en devient bloquant. Voici un exemple de l’application adopte un mec sur le visuel de gauche. Cette page est animée et le rendu est vraiment bon et qualitatif.

En revanche, en termes d’accessibilité c’est nettement moins bon. Les chevrons sont avant le texte, les boutons petits et collés, et l’animation avec les étoiles qui bougent et scintillent ajoutent de la difficulté de lecture.

Groupe 75Une solution très moche mais plus accessible aurait été de séparer les boutons et de retirer ou du moins fortement diminuer leur transparence.

Encore une fois, la page de cette application est vraiment belle, mais il faut savoir placer le curseur entre esthétisme et accessibilité, en fonction de la cible que l’on cherche. Sans oublier que accessible ne veut pas dire inesthétique.

E- LES MOTS DE PASSE

Là on entre dans la faute grave. Il s’agit du niveau de sécurité des mots de passe que demande une application ou un site. Il est de plus en plus complexe de créer des mots de passe avec une majuscule, des chiffres mais différents, un symbole… et il est encore plus compliqué de savoir si le mot de passe correspond aux critères. Voici un exemple de Linkedin :

Groupe 76

Il est particulièrement difficile de comprendre que le niveau est indiqué par la taille et la couleur de cet espèce de petit menu burger qu’ils ont placé sur la ligne mot de passe. Pour rappel on ne voit pas tous les mêmes couleurs (si vous avez oublié, retournez à la partie A de cet article). Il aurait été plus simple de mettre une jauge ou un élément plus visuel qui ne nécessite pas de couleur.

F- LES CAPTCHAS

Là on entre dans la faute lourde (c’est encore au dessus de la faute grave légalement). Il faut de plus en plus prouver que l’on est pas un robot quand on s’inscrit. Et personne ne pense accessibilité à cette étape. Voilà comment « empêcher » des milliers voire des millions de personnes de s’inscrire. À cause d’un simple captcha comme ceux ci-dessous :

giphy

capt

On en regrette les captchas simples comme celui ci-dessous qui était nettement plus accessible :

giphy (1)

 

5- TAKE AWAY 

Si vous ne deviez retenir qu’une seule chose, c’est d’être souple. L’accessibilité n’est pas une science exacte définie par des règles précises. C’est avant tout une sensibilité qu’il faut avoir lors de la conception et de la réalisation d’une interface. Il faut être souple et proposer différents moyens.

Ne pas imposer une seule façon de faire. Si ce qui est développé n’est pas accessible, il suffit peut-être de simplement proposer une alternative.

C’est le cas par exemple d’Amazon. La commande via swipe n’est pas considérée comme accessible, mais la personne en situation de handicap peut ajouter au panier et finaliser sa commande par ailleurs. Deux moyens différents, deux usages et deux populations satisfaites.

Stéphane Chilton, UX-Evangelist @UX-Republic

UX-REPUBLIC est une agence spécialisée en conception centrée utilisateur. Nous sommes également centre de formation agréé. Retrouvez toutes nos formations en UX-DESIGN sur notre site training.ux-republic.com

No comments

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *