UX et handicap, l’accessibilité est la clé

Sylvie Duchateau et Marie Guillaumet, Access42

UX Rennes, 10 novembre 2017

Transcription et support de cette conférence

Hello !

Sylvie Duchateau

@sylduch

Sylvie et Isba

Marie Guillaumet

@kreestal

Marie et Shera

Le pouvoir d’inclure ou d’exclure avec le design

UX + accessibilité =

Au programme

  1. Quels utilisateurs ?
  2. Quels standards ?
  3. Quels outils ?

1. Quels utilisateurs ?

1.2. Panorama des handicaps concernés

23 millions de personnes concernées par le handicap en France

Un guide très utile : impacts utilisateurs des défauts d’accessibilité

Des situations de handicap multiples

1.2. Démonstration d’un lecteur d’écran

Comment fonctionne un lecteur d’écran ?

Plage braille
La plage braille de Sylvie.

Place aux tests !

Test 1a : champs mal reliés à leur étiquette

Avez-vous un passeport ?

Problème : un lecteur d’écran va restituer « Oui » et « Non », mais pas la question posée à l’utilisatrice, qui est aveugle. Ceci parce que la question n’est pas reliée techniquement aux champs.

Test 1b : formulaire à choix multiple accessible
Avez-vous un passeport ?

Solution : réunir les champs visuellement et techniquement à l’aide des éléments fieldset et legend pour que la question soit bien restituée par les lecteurs d’écran.

Test 2a : champs aux étiquettes similaires

Passager nº1

Passager nº2

Problème : une utilisatrice aveugle n’a pas le contexte qui lui permet de savoir quel champ « Prénom » correspond à quel passager.

Test 2b : regrouper les champs aux étiquettes similaires
Passager nº1

Passager nº2

Solution : réunir les champs visuellement et techniquement à l’aide des éléments fieldset et legend pour que la question soit bien restituée par les lecteurs d’écran.

Test 3a : erreurs de saisies signalées uniquement par la couleur

* champs obligatoires

Passager nº1

Problème : l’erreur de saisie présente dans le champ « Email » n’est pas restituée par le lecteur d’écran. Découragement voire abandon de l’utilisatrice aveugle qui ne comprend pas où se situe l’erreur ni comment elle peut la corriger.

Test 3b : erreurs de saisies signalées
Passager nº1

Erreur dans l’adresse email. Exemple d’email valide : audrey@gmail.fr

Solution : indiquer, si nécessaire, le format attendu directement dans l’étiquette du champ, et donner un exemple de saisie réelle pour aider l’utilisateur à comprendre son erreur.

Pour en savoir plus : guide sur les lecteurs d’écran

1.3. Responsabilité des designers

Design universel, vraiment ?

L’exemple des rampes escaliers.

Rampe escalier
Rampe escalier. Crédit photo : Vladimir Zlokazov.

a42.fr/rampes-escaliers

« Nous devons davantage craindre les conséquences de notre travail qu’aimer l’intelligence de nos idées. »

Mike Monteiro, Design Ethics

2. Quels standards ?

2.1. Socle normatif :
WCAG et RGAA

Trois niveaux de priorité

  1. Niveau simple A
    (A)
  2. Niveau double A *
    (AA)
  3. Niveau triple A
    (AAA)

* Le niveau AA est le niveau légal requis.

Un exemple de critère RGAA

Critère 11.4 [A] Dans chaque formulaire, chaque étiquette de champ et son champ associé sont-ils accolés ?

a42.fr/rgaa-11-4

À retenir

Pour concevoir des interfaces accessibles,
il est essentiel de respecter WCAG.

2.2. Obligation légale

  • Obligation d’accessibilité pour les sites publics depuis 2005…
  • …et bientôt étendue aux entreprises privées délégataires d’une mission de service public.
  • Concerne aussi les applis mobiles et le mobilier urbain numérique.
  • En attente d’un décret d’application et de la directive européenne (septembre 2018).

3. Quels outils ?

3.1. Méthodologie UX

  • Process
  • Personas
  • Tests d’utilisabilité

Exemple : a42.fr/ux-personas1

3.2. Auto-formation

Apprendre les fondamentaux : a42.fr/design-accessible

Perdu·e·s ?

Rassurez-vous, personne ne vous demande de tout rendre accessible d’un coup !

Think positive

Merci pour votre attention !

Email : bonjour@access42.net

Twitter : @access42net