Ravis de vous revoir ! 👋 Accédez à votre compte ici :
Copilote IA
Se connecter à notre plateforme de création de formations avec IA.
Se connecter à edtake.ai
Nos autres plateformes :
L'accessibilité numérique est souvent négligée dans le développement d'applications. Elle représente pourtant un enjeu majeur d'inclusion. Dans cet article, nous allons partager comment edtake a mis en place des fonctionnalités d'accessibilité pour les personnes daltoniennes, dyslexiques, seniors et malvoyantes dans la vue apprenant.
Vous retrouverez un exemple d’implémentation en fin d’article.
La dyslexie cristallise des difficultés de lecture, d’écriture mais aussi d’expression. Sa prévalence est d’environ 10 % de la population française (Source : France Dyslexia). Les personnes présentant des troubles de dyslexie peuvent rencontrer un certain nombre de difficultés de lecture de contenus numériques, comme :
- La confusion entre des lettres proches (p/q, b/d)
- La difficulté à suivre les lignes de lecture
- La perception des lettres « qui flottent » ou qui se déplacent dans la page
Pour répondre à cette problématique, nous avons intégré la police OpenDyslexic. Cette police présente un certain nombre de particularités qui la rendent plus lisible par les personnes dyslexiques :
➡️ Les lettres ont une base plus épaisse qui crée un « effet de pesanteur »
➡️ Des formes fiables pour écarter les confusions entre polices proches
➡️ L'espacement entre les lettres est optimisé
Le daltonisme touche environ 8% de la population masculine et 0,5% de la population féminine (Source : SNOF). Il est défini par des difficultés de perception des couleurs.
Les différents types de daltonisme sont :
- Protanopie : absence de récepteurs de la couleur rouge
- Deutéranopie : absence de récepteurs de la couleur verte
- Tritanopie : absence de récepteurs de la couleur bleue
- Achromatopsie : vision complètement en noir et blanc.
Les différents types de daltonisme induisent des perceptions chromatiques différentes qui risquent de rendre très difficile l’utilisation de certaines interfaces utilisateurs.
Pour permettre aux utilisateurs daltoniens de percevoir correctement l’interface, nous avons mis en oeuvre des filtres SVG qui simulent la vision normale pour chaque type de daltonisme. Ces filtres permettent de transformer les couleurs de façon à ce qu’elles soient perçues selon le type de daltonisme de l’utilisateur.
💡Cette approche repose sur les matrices de transformation recommandées par Ashley Sheridan dans son article sur les filtres SVG pour tester les effets du daltonisme.
Compréhension des besoins spécifiques :
Avec l’âge, la capacité visuelle ainsi que les capacités cognitives peuvent s’amoindrir, rendant alors difficile l’usage de certaines interfaces numériques.
- Acuité visuelle diminuée
- Sensibilité aux contrastes altérée
- Difficulté à naviguer dans une interface complexe
Pour optimiser le confort de lecture, nous avons utilisé la police Atkinson Hyperlegible (Institut Braille). Cette police présente plusieurs caractéristiques favorisant la lisibilité :
➡️ Différenciation des caractères communs
➡️ Formes de lettres spécifiques
➡️ Hauteur des lettres minuscules plus grande
➡️ La largeur de l’interlignage et la progression des caractères
Deux niveaux d’adaptation sont également pris en compte :
• Malvoyance modérée / seniors : augmentation de la taille du texte (minimum 18 px)
• Malvoyance forte : augmentation de la taille du texte (minimum 20 px)
En plus des solutions techniques présentées, voici quelques bonnes pratiques pour améliorer l'accessibilité de votre solution :
Adoptez une structure HTML sémantique avec les balises dédiées (heading, nav, main, section…) qui facilitera les repères. Ceci aura un impact tout particulier pour les utilisateurs de lecteurs d’écran.
Complétez votre HTML avec les attributs ARIA à bon escient lorsque c’est nécessaire pour améliorer l’accessibilité.
Vérifiez que toutes vos combinaisons de couleurs respectent les ratios de contraste recommandés par les WCAG (Web Content Accessibility Guidelines):
➡️ 4.5:1 minimum pour le texte normal
➡️ 3:1 minimum pour les grands textes (18 pt ou 14 pt en gras)
Assurez la compatibilité vis-à-vis des lecteurs d’écran en ayant recours aux attributs ARIA qui s’imposent et tester sa solution avec NVDA.
S’assurer que la totalité des fonctions de sa solution est accessible par le clavier.
La mise en place des fonctionnalités d’accessibilité n'est pas une simple formalité : c'est la clé pour former tous les apprenants. Les solutions ici présentées sont une première étape à l’accessibilité de votre application mais n’entendent pas être exhaustives.