UX et accessibilité Best friends forever !

Marie Guillaumet, Access42

UX Incognita – 30 janvier 2018

Transcription et slides

a42.fr/uxincognita

15 millions de personnes en situation de handicap en France

21,5 % de la population

Connaître les impacts utilisateurs des défauts d’accessibilité

a42.fr/impacts

1. Lisibilité

Laisser l’utilisateur personnaliser l’interface

Que faire en cas de contraste insuffisant ?

Colour Contrast Analyzer
Colour Contrast Analyzer, une petit appli gratuite pour Mac et PC, permet de vérifier que le ratio de contraste entre la couleur #FD7923 et la couleur blanche est insuffisant.

a42.fr/cca

Une solution : un style switcher avec des réglages d’accessibilité

Exemple 1 : SNCF

Couleurs par défaut du site.
Couleurs par défaut. Le rapport de contraste entre le bleu clair et le blanc est insuffisant.

a42.fr/new-sncf

Exemple 1 : SNCF

Contrastes renforcés.
Contrastes renforcés : le bleu est plus foncé, et les textes disposés sur l’arrière-plan photo ont également un arrière-plan uni blanc, pour renforcer la lisibilité des textes.

a42.fr/new-sncf

Exemple 2 : Access42

Contrastes par défaut.
Contrastes par défaut.

access42.net

Exemple 2 : Access42

Contrastes inversés.
Contrastes inversés : textes jaunes sur fond bleu. Le principe est de superposer deux couleurs très lumineuses, pour lutter contre la fatigue visuelle.

access42.net

Exemple 3 : OUI.sncf

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

a42.fr/oui-sncf

Exemple 3 : OUI.sncf

Contrastes par défaut.
Contrastes par défaut.

a42.fr/oui-sncf

Exemple 3 : OUI.sncf

Contrastes renforcés.
Contrastes renforcés.

a42.fr/oui-sncf

Exemple 4 : Accor Hotels Group

Le sélecteur de styles du site Accor Hotels Group.
Le sélecteur de styles du site Accor Hotels Group propose plusieurs réglages d’accessibilité.

a42.fr/accorhotels

Exemple 4 : Accor Hotels Group

Police par défaut
Police par défaut.
Police adaptée à la dyslexie
Police adaptée à la dyslexie.

a42.fr/accorhotels

2. Formulaires

Guider l’utilisateur

Si un champ requiert un format de saisie particulier :

  1. indiquer le format attendu dans l’étiquette ;
  2. donner un exemple de saisie réelle dans le message d’erreur.

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

Pour aller plus loin

Merci de votre attention !

Suivez-nous sur Twitter : @access42net@kreestal