Typographie et accessibilité

Marie Guillaumet, Access42

MiXiT, Lyon — 20 avril 2018

Slides

a42.fr/mixit

Introduction

Marie Guillaumet

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.
plage braille, LSF, sous-titrage, licorne, clavier virtuel

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.

Tweet de Billy Gregory

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

😍
  1. Caractères – microtypo
  2. Composition – macrotypo
  3. Effets décoratifs
  4. Écriture inclusive

1. Caractères – microtypo

  1. Taille des caractères
  2. Largeur des blocs de texte
  3. 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éclarations font-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.

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 :

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.

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.

Wikipédia, ou les lignes les plus longues du web 😰

Les lignes de texte sont beaucoup trop longues sur Wikipédia

fr.wikipedia.org/wiki/Frida_Kahlo

Heureusement qu’on peut redimensionner ! 😀

Redesign léger de Wikipédia en limitant la largeur des lignes de texte

fr.wikipedia.org/wiki/Frida_Kahlo

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.

Silhouette de chaise à l’endroit Silhouette de chaise à l’endroit et silhouette de chaise à l’envers
b minuscule à l’endroit, composé en Arial Regular b minuscule à l’endroit et b minuscule à l’envers, composés en Arial Regular

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.
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.

Permettre aux personnes dyslexiques de changer la police

Sélecteur de styles
Police par défaut
⬇️
Police adaptée

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

  1. Interlignage et espacements
  2. Alignement des textes
  3. 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 :

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’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).

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é.

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é !

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

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

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.

a42.fr/cca

Problème : contrastes insuffisants dans la charte

Contrastes par défaut
Contrastes par défaut

a42.fr/oui-sncf

Solution : une option pour renforcer les contrastes

Contrastes renforcés
Contrastes renforcés

a42.fr/oui-sncf

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

  1. Alternative à la forme, à la taille et à la position
  2. 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.
Nuage de tags

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.

a42.fr/ecriture-inclusive

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

Pour aller plus loin

Merci de votre attention !

Access42

Suivez-nous sur Twitter : @access42net@kreestal

Slides : a42.fr/mixit