Typographie et accessibilité
Marie Guillaumet, Access42
MiXiT, Lyon — 20 avril 2018
Slides
Introduction
Marie Guillaumet
- Web designer, intégratrice et consultante accessibilité numérique
- Email : mguillaumet@access42.net
- Twitter : @kreestal
Access42
- Coopérative spécialisée en accessibilité numérique
- 9 personnes
- Audit, accompagnement/stratégie, conseil et formation
- Rédacteur du RGAA 3
- Pour mieux nous connaître : a42.fr/liberee
Typographie et accessibilité
- La lecture sur écran est en moyenne 25 % plus lente que la lecture sur papier (dixit Jakob Nielsen – a42.fr/nielsen).
- Les personnes handicapées ont des besoins importants en matière de lisibilité, de clarté et de personnalisation de l’apparence du texte sur le web.
- Il faut placer les lectrices et les lecteurs au cœur de la réflexion pour faire des choix typographiques éclairés.
Qu’est-ce que l’accessibilité du Web ?
« L’accessibilité du Web signifie que les personnes handicapées peuvent utiliser le Web. Plus précisément, qu'elles peuvent percevoir, comprendre, naviguer et interagir avec le Web, et qu'elles peuvent contribuer sur le Web.
L’accessibilité du Web bénéficie aussi à d’autres, notamment les personnes âgées dont les capacités changent avec l’âge. »
WAI (Web Accessibility Initiative)
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.
Handicap : la définition légale
« Constitue un handicap, au sens de la présente loi, toute limitation d’activité ou restriction de participation à la vie en société subie dans son environnement par une personne en raison d’une altération substantielle, durable ou définitive d’une ou plusieurs fonctions physiques, sensorielles, mentales, cognitives ou psychiques, d’un polyhandicap ou d’un trouble de santé invalidant. »
Article L114 – loi n°2005-102
Lire aussi :
« Chez nous, l’accessibilité c’est avant tout pour les personnes handicapées » — a42.fr/pour-ph
12 à 15 millions de personnes en situation de handicap en France
21,5 % de la population
Différents types de handicaps
- Handicaps physiques et sensoriels :
- visuels,
- auditifs,
- moteurs.
- Handicaps mentaux :
- handicaps intellectuels,
- handicaps cognitifs (troubles DYS),
- handicaps psychiques.
- Polyhandicap : un handicap moteur ou sensoriel + mental ;
- Troubles de santé invalidants : cancer, douleurs chroniques, allergies…
Chaque personne est différente.
Pour mettre en œuvre l’accessibilité numérique, deux textes de référence
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.0, publiée en 2008
- En cours : WCAG 2.1, 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
- Dernière mise à jour : 2017
- Héritier d’AccessiWeb
- 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.
Les critères concernant les aides typographiques sont souvent de niveau AAA.
En savoir plus sur les obligations légales en matière d’accessibilité numérique : a42.fr/loi
Au-delà de l’obligation légale, l’accessibilité est aussi une question morale.
La typographie accessible au service de handicaps invisibles
Handicaps visuels
Les déficiences visuelles sont très diverses, et liées à de nombreuses pathologies de la vision.
- Difficulté de perception des couleurs
- Difficulté de perception des contrastes
- Acuité visuelle réduite
- Perte de la vision périphérique
- Perte de la vision centrale
- Etc.
Troubles DYS
Troubles neurologiques durables qui affectent certaines fonctions cognitives.
- Dyslexie
- Dysorthographie
- Trouble déficitaire d’attention avec ou sans hyperactivité
- Dyspraxie de type dyspraxie visuo-spatiale
- Dysphasie dans le cadre de troubles associés
- Dyscalculie
Au programme
- Caractères – microtypo
- Composition – macrotypo
- Effets décoratifs
- Écriture inclusive
1. Caractères – microtypo
- Taille des caractères
- Largeur des blocs de texte
- Caractères typographiques
a. Taille des caractères
CSS : déclarer les tailles de texte avec des unités relatives
- Unités relatives :
em
,rem
,%
, etc. - Ne pas utiliser d’unités absolues (comme
px
) dans les déclarationsfont-size
. - Facultatif : utiliser des unités sans valeur pour l’interlignage, afin qu’il s’adapte à la taille du texte en toute circonstance.
Exemple :body{font-size:100%;line-height:1.5}
.
Ainsi :
- les utilisatrices et utilisateurs peuvent ajuster leur confort de lecture en zoomant ou dézoomant si besoin ;
- les navigateurs peuvent adapter la taille du texte aux réglages faits par l’utilisateur ou l’utilisatrice dès le chargement de la page.
Attention : ajouter des boutons de type « A+ »/« A- » sur l’interface n’est pas suffisant.
- Références RGAA :
- 10.4 [AA], 10.10 [AAA]
Merci aux préprocesseurs CSS ! 💛
Grâce à eux, utiliser des unités relatives est devenu plus simple. Plus d’excuse pour continuer à utiliser des pixels !
En savoir plus :
- Lâchez prise sans perdre le contrôle grâce à l’unité CSS
em
a42.fr/unite-em - Du responsive tout en
em
a42.fr/responsive-em
HTML : soigner la meta viewport
Pour ne pas empêcher l’utilisatrice ou l’utilisateur de zoomer.
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" />
maximum-scale=1.0
et user-scalable=no
ne sont pas nos amis !
Ceci n’est pas une recommandation officielle de WCAG ou de RGAA.
Vive le travail d’équipe ! 🎉
Échangez, parlez-vous, osez vous poser des questions, et posez-en à vos collègues !
Il n’y a pas de question bête.
b. Largeur des blocs de texte
Limiter la longueur des lignes : 80 caractères max.
Le RGAA considère qu’une largeur de 80 caractères est la limite au-delà de laquelle les difficultés de lecture deviennent trop importantes.
Néanmoins, ce critère est facultatif.
En effet, des lignes plus courtes facilitent la lecture des personnes qui ne sont pas à l’aise avec le déchiffrage d’un texte, notamment :
- les personnes déficientes visuelles utilisant des loupes d’écran ;
- les personnes ne disposant pas de vision centrale ou périphérique.
- Référence RGAA :
- 10.11 [AAA]
Une solution : max-width:80ch
Adapter la valeur à la taille du texte et au caractère typographique choisis.
Une autre solution : avoir un site responsive !
S’il est possible de réduire la largeur des blocs de texte à 80 caractères en réduisant la largeur de la fenêtre d'affichage, le critère est valide.
- Référence RGAA :
- 10.11 [AAA]
Wikipédia, ou les lignes les plus longues du web 😰
Heureusement qu’on peut redimensionner ! 😀
c. Caractères typographiques
Utilisez les polices que vous voulez
Mais, pour le corps de texte, préférez des caractères faciles à identifier, par exemple :
Verdana
1iIlL0oO
Arial
1iIlL0oO
Tahoma
1iIlL0oO
Trebuchet
1iIlL0oO
Astuce : tester une police avec « 1iIlL0oO » permet d’identifier les glyphes les plus susceptibles de se ressembler.
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 de changer la police
Caractères et dyslexie : on récapitule !
Caractères et dyslexie : on récapitule !
- Privilégier les polices sans empattement sur le corps de texte.
- Attention à l’italique et aux capitales.
- Éviter de multiplier les polices différentes.
- Si possible, laisser les personnes dyslexiques personnaliser l’interface avec une police adaptée.
Attention : les polices adaptées à la dyslexie n’aident qu’une partie des personnes dyslexiques.
Pause !
Cette page contient une photo de mon chat en arrière-plan, sur laquelle est superposée une bulle « Pense à boire ! ».
2. Composition – macrotypo
- Interlignage et espacements
- Alignement des textes
- Couleurs et contrastes
a. Interlignage et espacements
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]
Sélecteur de styles : interlignage par défaut
Billet de blog sur le site d’Access42 composé avec un interlignage par défaut.
- Référence RGAA :
- 10.12 [AAA]
Sélecteur de styles : interlignage adapté
Billet de blog sur le site d’Access42 composé avec un interlignage adapté.
- Référence RGAA :
- 10.12 [AAA]
b. Alignement des textes
Donner la possibilité aux utilisateur·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é !
- Référence RGAA :
- 10.9 [AAA]
c. Couleurs et contrastes
Respecter les rapports de contraste du RGAA
Éléments devant être suffisamment contrastés :
- les textes HTML ;
- les textes présents dans les images ;
- les textes incrustés dans les vidéos ;
- Et bientôt, dans WCAG 2.1, les composants d’interface !
a42.fr/wcag21-contrastes
Les rapports de contraste attendus entre la couleur du texte et la couleur de son arrière-plan varient en fonction de la taille de texte, de sa graisse et du niveau d’accessibilité visé.
En savoir plus : a42.fr/contrastes
Un réflexe à acquérir : Colour Contrast Analyser
Problème : contrastes insuffisants dans la charte
Solution : une option pour renforcer les contrastes
Couleurs et contrastes : autres points de vigilance ⚠️
Textes HTML superposés sur des images
Prévoir une couche de couleur entre le texte et l’image d’arrière-plan, pour que le contraste soit suffisant quelle que soit la couleur dominante de l’image.
Maquette idéale ≠ site contribué.
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.
Solutions :
- contraste suffisant entre la couleur du lien et du texte ;
- signaler le lien par un soulignement ou une icône par exemple.
Rendu des polices @font-face
Bien tester le rendu dans différents navigateurs et OS, car un mauvais rendu typographique peut entraîner des contrastes insuffisants et donc des problèmes de lisibilité (surtout avec les polices « thin »).
L’outil idéal :
Web Font Specimen – a42.fr/wfs
3. Effets décoratifs
- Alternative à la forme, à la taille et à la position
- Texte dans les images
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.
b. Texte dans les images
Deux cas de figure :
Police non reproductible
Si l’image contient une police non reproductible (par exemple un texte manuscrit que vous scannez, ou bien un logo), alors le critère n’est pas applicable.
Police reproductible en CSS
Par contre, si l’image contient un texte simple composé avec une police disponible, alors il faut reproduire l’image en HTML/CSS, ou fournir un mécanisme de remplacement de l’image par du texte.
4. Écriture inclusive
Écriture inclusive et accessibilité font-elles bon ménage ?
Sylvie Duchateau fait un tour d’horizon des différentes possibilités et de leur restitution par les lecteurs d’écran.
Conclusion
À retenir
- Il est tout à fait possible de concilier design et accessibilité. 🤘
- Le RGAA, la référence en matière d’accessibilité :
a42.fr/rgaa - Ressources et tutos pour tous les profils :
a42.fr/ress-rgaa
Mieux connaître les besoins des personnes handicapées sur le web
- Guide des impacts utilisateurs des défauts d’accessibilité :
a42.fr/impacts - Guide des troubles DYS :
a42.fr/dys - Guide sur le handicap mental et psychique :
a42.fr/handicap-mental
Pour aller plus loin
- Guide du design accessible :
a42.fr/design-accessible - Plein d’exemples et d’outils :
a42.fr/design-access - Formez-vous ! 🎓
a42.fr/formationuxui