Tout le monde ne navigue pas avec un clavier et une souris
Certaines personnes utilisent l’un ou l’autre, voire ni l’un ni l’autre.
De plus, il existe des technologies d’assistance, telles que :
- Plage braille
- Clavier monomanuel
- Head-Stick
- Eye Tracker
- Clavier visuel
- Lecteur d’écran
- Contacteur au souffle
- Trackball
- Contrôle par la pensée
- etc.
Au-delà de l’obligation légale, l’accessibilité est aussi une question morale.
Tweet de Billy Gregory (en anglais)
When UX doesn't consider ALL users, shouldn't it be known as "SOME User Experience" or... SUX? #a11y
En savoir plus :
« Typo & web » de Aurélien Foutoyet
« Un bon caractère est un caractère qui ne se remarque pas. (…) Le caractère doit remplir sa fonction première : être lisible, pour un maximum d’utilisateurs. »
Un cas particulier : la dyslexie
Pour reconnaître les objets et les lettres, différentes zones du cerveau sont sollicitées.
Exemple extrait de la présentation « Dyslexie, des solutions numériques pour rendre le web plus lisible ! » de Nathalie Pican et Séverine Malin.
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.
Des pleins plus prononcés sur la partie inférieure des glyphes les rend plus faciles à distinguer.
Permettre aux personnes dyslexiques qui en ont besoin de changer la police
Attention : les polices adaptées à la dyslexie n’aident qu’une partie des personnes dyslexiques.
Sélecteur de styles offrant plusieurs options d’accessibilité sur le site AccorHotels Group
Polices par défaut du site AccorHotels Group, qui peut poser des problèmes de lisibilité aux personnes dyslexiques.
Police adaptée à la dyslexie sur le site Accor Hotel Group.
Choisir un espace suffisant entre les lignes et les paragraphes
Des blocs de texte trop massifs constituent un obstacle pour les personnes DYS :
« Dyspraxie : la lecture, problème de stratégie du regard » – a42.fr/dyspraxie
- L’interligne devrait être équivalent à au moins 1,5 fois la taille du texte.
- L’espace entre les paragraphes devrait être équivalent à au moins 1,5 fois la taille de l’interligne.
Mais ces réglages dépendent beaucoup du caractère typographique et de la taille de texte utilisés.
C’est pourquoi il est possible de proposer d’augmenter ces espacements via un sélecteur de styles (style switcher).
- Référence RGAA :
- 10.12 [AAA]
Billet de blog sur le site d’Access42 composé avec un interlignage par défaut.
- Référence RGAA :
- 10.12 [AAA]
Billet de blog sur le site d’Access42 composé avec un interlignage adapté.
- Référence RGAA :
- 10.12 [AAA]
Donner la possibilité aux utilisateurs·rices de contrôler 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.
Contrairement aux idées reçues, la justification n’est pas interdite en accessibilité !
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
- Référence RGAA :
- 10.9 [AAA]
Un réflexe à acquérir : Colour Contrast Analyser
Colour Contrast Analyser est une petite appli gratuite pour MacOS et Windows, qui permet de vérifier que le rapport de contraste entre deux couleurs est conforme.
Couleur des liens dans des blocs de texte
Les liens signalés uniquement par la couleur peuvent être confondus avec le texte qui les entoure, en particulier par les personnes percevant mal les couleurs.
Couleur des liens dans des blocs de texte
Il vaut mieux signaler le lien par un soulignement ou une icône par exemple, ou renforcer le rapport de contraste entre la couleur du lien et le teste si possible.
Rendu des polices @font-face
Bien tester le rendu dans différents navigateurs et OS, surtout avec les polices « thin », pour s’assurer que les contrastes sont suffisants.
Vérifiez le rendu de vos polices avec Web Font Specimen – a42.fr/wfs
a. Alternative à la forme, à la taille et à la position
Prévoir une alternative aux informations données par la forme, la taille ou la position.
- Indication donnée par la forme : par exemple, mise en avant-plan pour indiquer un onglet actif ;
- Indication donnée par la taille : modification de la taille de police dans un nuage de tags ;
- Indication donnée par la position : par exemple, la présence d'un marqueur visuel, pour indiquer la page active dans un menu de navigation.
Nuage de tags où chaque tag est indiqué par une taille de texte différente. En outre, il est demandé à l’utilisateur de recopier dans un champ de formulaire un tag mis en valeur grâce à une couleur, sans qu’une alternative ne soit prévue a priori.
Merci de votre attention !
Suivez-nous sur Twitter : @access42net, @kreestal
Slides : a42.fr/devfest