UX design pour les personnes DYS : pensez à l’accessibilité !

Marie Guillaumet

Flupa UX Days – 15 juin 2018

Slides

a42.fr/flupa2018

Introduction

Marie Guillaumet

Access42

  • Coopérative spécialisée en accessibilité numérique
  • Située à Paris
  • 9 personnes
  • Audit, accompagnement/stratégie, conseil et formation
  • Rédactrice du RGAA 3
  • Pour mieux nous connaître : a42.fr/liberee

Troubles DYS sur le web : quels problèmes ?

Les troubles DYS, c’est quoi ?

Comprendre ce que sont et ne sont pas les troubles DYS

Les troubles DYS sont :
  • des troubles neurologiques durables, qui affectent des fonctions cognitives : langage, gestes, mémoire, attention, etc. ;
  • des handicaps invisibles et des déficiences souvent mal diagnostiquées, mal connues et mal documentées.
Les troubles DYS ne sont pas :
  • des handicaps intellectuels ;
  • des handicaps psychiques.

Troubles DYS impactant la consultation
et l’utilisation du web

  • Dyslexie
  • Dysorthographie
  • Dysphasie
  • Dyscalculie
  • Dyspraxie
  • Troubles de l’attention
  • Troubles de la mémoire

Dyslexie :
trouble de la lecture

  • Troubles de la lecture et de l’écriture.
  • Difficultés à reconnaître les mots et les lettres.
  • Problèmes éventuels de champ visuel.
  • Sensibilité à la mise en page.

Dysorthographie :
trouble de l’écriture

  • Troubles de l’orthographe.
  • Difficultés à associer un phonème à un graphème.
  • Inversion de lettres, de syllabes ; confusions.
  • Nombreuses fautes d’orthographe.

Une solution :
écouter le texte plutôt que le lire

  • Recours à un lecteur d’écran, qui lit les contenus web avec une synthèse vocale.
  • Une fonctionnalité permettant d’écouter le texte est disponible sur certains sites.

En savoir plus sur la dyslexie et la dysorthographie : a42.fr/dyslexie

Bouton « Écouter »

Dysphasie : troubles du langage oral

Difficultés à s’exprimer à l’oral et à comprendre ce qui est dit

Sur le web, difficultés à comprendre :

  • le contenu des médias sonores (vidéos, fichiers son…) ;
  • les mots abstraits ;
  • les consignes longues et complexes (formulaires).

En savoir plus sur la dysphasie : a42.fr/dysphasie

Dyscalculie : troubles liés aux chiffres

Difficultés à comprendre et à utiliser les chiffres

Sur le web :

  • erreurs de lecture et d’écriture des chiffres ;
  • erreurs et lenteurs dans les calculs (notamment mentaux) ;
  • difficultés à comprendre et à utiliser les comparaisons de chiffres.

En savoir plus sur la dyscalculie : a42.fr/dyscalculie

Dyspraxie : troubles moteurs et/ou visuo-spatiaux

Troubles du développement moteur, de la coordination des gestes et de la perception visuelle

Sur le web, principales difficultés rencontrées :

  • compréhension des graphiques et des tableaux ;
  • lecture d’un plan, d’une carte ;
  • reconnaissance de la droite et de la gauche ;
  • décodage des lettres et des chiffres ;
  • réalisation d’une tâche en temps limité.

En savoir plus sur la dyspraxie : a42.fr/dyspraxie

Troubles de l’attention avec ou sans hyperactivité (TDAH)

Difficultés à maintenir son attention focalisée trop longtemps sur une tâche

Sur le web, principales difficultés rencontrées :

  • lire des textes longs ;
  • maintenir son attention devant des contenus en mouvement ;
  • rester concentré·e en cas d’ouverture de nouvelles fenêtres ;
  • répondre correctement à une consigne ;
  • gérer son temps ;
  • réaliser des actions motrices précises (pointage par exemple).

En savoir plus sur les troubles de l’attention : a42.fr/troubles-attention

Troubles de la mémoire (troubles mnésiques)

Difficulté à réaliser toute tâche demandant un effort de mémorisation

Sur le web, principales difficultés rencontrées :

  • oublier des consignes, du contexte ;
  • devoir relire plusieurs fois un même passage ;
  • difficultés pour terminer une tâche trop longue.

En savoir plus sur les troubles mnésiques : https://a42.fr/troubles-memoire

Combien de personnes sont-elles concernées par les troubles DYS ?

Handicap en France : 12 millions de personnes concernées

1 personne sur 10 se considère handicapée

Handicaps visuels Handicaps auditifs Handicaps moteurs Handicaps mentaux, cognitifs et psychiques

Sources :

Troubles DYS en France : 6 à 8 % de la population serait DYS

Source : Fédération Française des DYS
a42.fr/chiffres-dys

Le saviez-vous ?

Pour une personne dyslexique, l’anglais et le français sont plus difficiles à lire que le chinois.

En savoir plus : Dyslexia has a language barrier – a42.fr/dyslexie-langues

Pause !

Cette page contient une photo de mon chat en arrière-plan, sur laquelle est superposée une bulle « Pense à boire ! ».

Troubles DYS sur le web : quelles solutions ?

L’accessibilité est la clé !

  1. Appliquer les critères d’accessibilité
  2. Pallier le plus de déficiences possibles
  3. Répondre à des besoins extrêmement variés

Sur quelles normes d’accessibilité s’appuyer ?

Deux textes de référence pour concevoir de manière accessible

WCAG Web Content Accessibility Guidelines (Règles pour l'accessibilité des contenus Web)
  • Spécification internationale, émise par le W3C
  • Rédigée en anglais, traduite en français
  • Norme ISO
  • Version actuelle : WCAG 2.1, publiée le 5 juin 2018, et incluant basse vision, troubles cognitifs et difficultés d’apprentissage
RGAA Référentiel Général d’Accessibilité pour les Administrations
  • La référence légale française depuis 2009
  • Permet d’évaluer la conformité à WCAG
  • Héritier d’AccessiWeb
  • Dernière mise à jour : 2017
  • Nombreuses ressources : a42.fr/ress-rgaa

Trois niveaux d’accessibilité

Niveau légal à atteindre : AA

Niveau A obligatoire

Les critères de niveau A permettent aux personnes handicapées d’accéder à l’information.

Autrement dit : sans les critères de niveau A, elles n’accèdent pas du tout ou très difficilement à l’information.

Niveau AA obligatoire

Les critères de niveau AA améliorent leur confort de consultation.

Sans les critères de niveau AA, les utilisateurs accèderont à l’information, mais leur expérience utilisateur sera plus sommaire.

Niveau AAA facultatif

Les critères de niveau AAA répondent à des besoins plus spécifiques, comme le handicap mental et les handicaps cognitifs (dont les troubles DYS).

Ils sont donc très rarement mis en œuvre.

En savoir plus sur les obligations légales en matière d’accessibilité numérique : a42.fr/loi

À retenir

  • L’accessibilité est un droit fondamental et une obligation légale.
  • Les difficultés rencontrées par les personnes DYS ne sont traitées que partiellement par les WCAG et le RGAA.
  • Mettre en œuvre des critères AAA sur un projet alors que certains critères A ou AA ne sont pas respectés, c’est un coup d’épée dans l’eau.

Au-delà de l’obligation légale, l’accessibilité est aussi une question morale.

Tweet de Billy Gregory

Aider l’utilisatrice ou l’utilisateur
à se repérer dans le site

Prévoir un fil d’Ariane

Besoins utilisateurs

Mieux se repérer dans le site, en particulier en cas d’arborescence très profonde.

Donner du contexte à la page en cours de consultation.

Déficiences principalement impactées
  • Dyspraxie
  • troubles de l’attention
  • troubles de la mémoire

Indiquer la page en cours de consultation

Besoins utilisateurs

Mieux se repérer dans le site, en particulier en cas d’arborescence très profonde ou d’une collection de pages (catalogue produits par exemple).

Déficiences principalement impactées
  • Dyspraxie
  • troubles de l’attention
  • troubles de la mémoire

Faciliter la lecture des contenus du site

Permettre l’agrandissement des caractères

Besoins utilisateurs
  • Ajuster son confort de lecture.
  • Pouvoir zoomer si besoin.
  • Afficher la page en tenant compte des réglages ty­po­gra­phiques faits côté navigateur.
Solutions
  • Utiliser des unités relatives dans la CSS (em, rem, etc.).
  • Attention : des boutons de type « A+ »/« A- » ne sont pas suffisants.
Déficiences principalement impactées
  • Dyslexie
  • dysorthographie
  • dyspraxie

Ne pas empêcher l’utilisatrice ou l’utilisateur de zoomer

Attention à ne pas bloquer le zoom dans la meta viewport !

Zoom possible 👍
<meta name="viewport" content="width:device-width,initial-scale=1.0" />
Zoom impossible 👎
<meta name="viewport" content="width=device-width,initial-scale=1.0,
maximum-scale=1.0,user-scalable=no" />

Note : ceci n’est pas une recommandation officielle de WCAG ou de RGAA.

Réaliser une mise en forme suffisamment lisible

Déficiences principalement impactées
  • Dyslexie
  • dysorthographie
  • dyspraxie
1. Permettre d’annuler la justification des textes
  • Si les textes ne sont pas justifiés, c’est l’idéal !
  • Mais la justification est parfois utile (colonnage, …).
  • Si les textes sont justifiés, donnez aux utilisatrices et aux utilisateurs la possibilité d’annuler la justification via un sélecteur de styles (style switcher).

Contrairement aux idées reçues, la justification n’est pas interdite en accessibilité !

Gustave Courbet

Gustave Courbet découvrant du texte justifié sur un site prétendument ami de la typographie.

Extrait de « La justification sur le web : usages et précautions » — a42.fr/justification

2. Choisir un espace suffisant entre les lignes et les paragraphes
Sens de lecture d’une personne dyspraxique, qui saute souvent des lignes

« Dyspraxie : la lecture, problème de stratégie du regard » – a42.fr/dyspraxie

L’interlignage et l’espace entre les paragraphes devraient être équivalents à au moins 1,5 fois la taille du texte.

Mais l’interlignage idéal dépend beaucoup du caractère typographique et de la taille de texte utilisés.

C’est pourquoi il est possible de proposer d’augmenter cet espacement via un sélecteur de styles.

Sélecteur de styles : interlignage par défaut
Sélecteur de style avec interlignage par défaut

a42.fr/design-access

Billet de blog sur le site d’Access42 composé avec un interlignage par défaut.

Sélecteur de styles : interlignage adapté
Sélecteur de style avec interlignage adapté

a42.fr/design-access

Billet de blog sur le site d’Access42 composé avec un interlignage adapté.

3. Limiter la longueur des lignes : 80 caractères max.

Au-delà de 80 caractères, les difficultés de lecture deviennent trop importantes pour les personnes dyslexiques et dyspraxiques visuo-spatiales.

Une solution : max-width:80ch

Adapter la valeur à la taille du texte et au caractère typographique choisis.

Une autre solution : le responsive !

S’il est possible de restreindre la largeur des blocs de texte à 80 caractères en réduisant la largeur de la fenêtre d'affichage, c’est tout bon.

Wikipédia, ou les lignes les plus longues du web 😰
Les lignes de texte sont beaucoup trop longues sur Wikipédia

a42.fr/frida

Heureusement qu’on peut redimensionner ! 😀
Redesign léger de Wikipédia en limitant la largeur des lignes de texte

a42.fr/frida

Laisser le choix des couleurs
et de la police

Besoins utilisateurs
  • Personnaliser l’affichage pour lire plus facilement.
Solution

Prévoir un mécanisme de personnalisation (style switcher) qui permettra :

  • de personnaliser la couleur du texte et la couleur d’arrière-plan ;
  • de remplacer les polices du site par une police adaptée à la dyslexie.
Déficiences principalement impactées
  • Dyslexie
  • dysorthographie
Polices adaptées à la dyslexie : une aide supplémentaire
  • Les polices courantes sans empattement ne suffisent pas toujours car leur tracé est encore trop régulier.
  • D’où la création de polices adaptées à la dyslexie, dont Open Dyslexic.
Open Dyslexic écrit à l’endroit Open Dyslexic écrit à l’envers

Des pleins plus prononcés sur la partie inférieure des glyphes les rend plus faciles à distinguer. En savoir plus : a42.fr/dys-pw.

Attention : les polices adaptées à la dyslexie n’aident qu’une partie des personnes dyslexiques.

Permettre aux personnes dyslexiques de changer la police
Sélecteur de styles
Sélecteur de styles
Exemple AccorHotels Group
Police par défaut
⬇️
Police adaptée

Ne pas utiliser d’image texte

Besoins utilisateurs
  • Personnaliser l’affichage pour lire plus facilement.
  • Or, un texte figé dans une image ne peut pas être manipulé ni personnalisé…
Solutions
  • Éviter d’afficher du texte dans une image.
  • Astuce : si vous devez absolument le faire, et que le texte en image est porteur d’information, composez-le de préférence avec une police web safe pour faciliter son intégration en HTML/CSS.
Déficiences principalement impactées
  • Dyslexie
  • dysorthographie

Pause !

Cette page contient une photo de mon chat en arrière-plan, sur laquelle est superposée une bulle « T’as pas soif ? ».

Faciliter la compréhension
des contenus

Expliquer les abréviations

Problématique utilisateurs

Manque de clarté et problème de mémorisation des abréviations et acronymes, même courts.

Solution

Indiquer immédiatement après l’abréviation sa signification entre parenthèses, lors de sa première occurrence.

Exemple : TVA (Taxe sur la valeur ajoutée).

Déficiences principalement impactées
  • Dyslexie
  • troubles de l’attention
  • troubles de la mémoire

Définir les termes inhabituels

Besoins utilisateurs

Comprendre les textes complexes, en particulier en cas de vocabulaire spécifique à un domaine d’expertise donné.

Solutions
  • Créer un glossaire, s’il y a beaucoup de mots complexes.
  • S’il y en a peu, on peut les définir dans la page.
Déficiences principalement impactées
  • Dyslexie et dysorthographie
  • dyspraxie
  • troubles de la mémoire

Prévoir une alternative aux images complexes et aux tableaux

Besoins utilisateurs

Un univers visuel trop riche est un obstacle pour les personnes dyspraxiques visuo-spatiales.

Solutions
  • Prévoir une description détaillée pour chaque image complexe (infographie, plan…).
  • Prévoir un résumé pour chaque tableau complexe.
  • Prévoir une alternative à l’information donnée uniquement par la forme, la taille ou la position.
Déficiences principalement impactées
  • Dyspraxie
  • troubles de l’attention

En savoir plus : a42.fr/dyspraxie-vs

Exemple d’image complexe et de description détaillée

Pourcentage des lecteurs d’écran utilisés
2. Lecteur d’écran utilisé
Principal
  • JAWS : 49,2%
  • NVDA : 21,5%
  • VoiceOver : 16,8%
  • Autres : 12,5%
En complément
  • NVDA : 37,3%
  • JAWS : 27,5%
  • VoiceOver : 25%
  • Autres : 16,2%
Sur mobile
  • VoiceOver : 66,8%
  • TalkBack : 20,5%
  • Autres : 12,8%

Source : Lancement de la deuxième étude sur l’usage des lecteurs d’écran en francophonie – a42.fr/enquete2017

Donner le contrôle
à l’utilisatrice ou à l’utilisateur

Donner le contrôle sur les contenus en mouvement

Illustration de Sue Lockwood
Problématiques utilisateurs

Les contenus en mouvement (animations, carrousels, parallaxe, GIF, vidéos…) peuvent provoquer des étour­dis­sements, des vertiges et de la confusion cognitive.

Solutions
  • Permettre d’arrêter et de redémarrer le contenu en mou­ve­ment.
  • Ou permettre d’afficher tout le contenu sans le mou­ve­ment.
  • Ou permettre de masquer le contenu en mouvement et de le réafficher.
Déficiences principalement impactées
  • Troubles de l’attention
  • troubles du système vestibulaire

Laisser le temps nécessaire à l’accomplissement d’une tâche

Problématique utilisateurs

Les limites de temps sont souvent trop courtes pour que les personnes DYS puissent mener à bien une tâche.

Solutions
  • Ne pas imposer de limite de temps, sauf si elle est absolument nécessaire (enchères, jeu concours, réservation de billet de voyage, etc.).
  • Prévenir que le temps est presque écoulé et rallonger celui-ci si nécessaire.
Déficiences principalement impactées
  • Dyslexie et dysorthographie
  • dyspraxie
  • troubles de l’attention
  • troubles de la mémoire
  • dyscalculie

Formulaires : aider les utilisatrices et les utilisateurs à comprendre les consignes

Prévoir des aides à la saisie

Besoins utilisateurs
  • Problèmes de compréhension du type de saisie attendue, faute de consignes assez explicites.
  • Dyscalculie : frein pour toute saisie nécessitant des chiffres (date, téléphone, anniversaire, nº de carte bleue, etc.).
Solution

Préciser le format et/ou le type de données attendus dans un champ de formulaire.

Note : cette indication doit se trouver dans l’étiquette du champ.

Déficiences principalement impactées
  • Dyslexie et dysorthographie
  • dyspraxie
  • troubles de l’attention
  • troubles de la mémoire
  • dyscalculie
Exemple d’aides à la saisie
Aides à la saisie

Compléter les placeholders

Besoins utilisateurs

Les personnes ayant des troubles de la mémoire peuvent être gênées lorsque la valeur du placeholder disparaît lors de la prise de focus.

Le placeholder n’est ni une étiquette ni un message d’aide, et pose plusieurs problèmes d’accessibilité.

Solution

Doubler le placeholder d’une étiquette visible ou au moins accessible au clavier.

Déficiences principalement impactées
  • Troubles de la mémoire
  • troubles de l’attention
  • dyspraxie

Conclusion

À vous de jouer !

  • Faites des choix de conception qui tiennent compte de la diversité des êtres humains : le handicap concerne 1 personne sur 5.
  • Tenez compte de l’accessibilité dès le début du projet.
  • Formez-vous et emparez-vous du sujet pour pouvoir préconiser l’accessibilité à vos client·es.

Mieux connaître les besoins des personnes handicapées sur le web

Pour aller plus loin

Merci de votre attention !

Suivez-nous sur LinkedIn : Access42 – Marie Guillaumet

Slides : a42.fr/flupa2018