Maintenant que vous comprenez la manière dont les personnes atteintes de handicap interagissent avec la technologie et que vous avez conscience de certains obstacles rencontrés par ces personnes sur le Web, il est temps de commencer à concevoir de manière plus inclusive ! Dans ce chapitre, nous allons aborder les choix typographiques et les considérations en lien avec la couleur, puis nous allons nous intéresser à certaines caractéristiques des visuels accessibles.
Typographie
Avant de nous pencher sur des considérations spécifiques, examinons deux concepts essentiels pour une typographie accessible : la différentiabilité et la lisibilité.
La différentiabilité fait référence à la facilité avec laquelle nous pouvons identifier les lettres et les différencier les unes des autres. Certaines polices comportent des caractères très similaires, tels que la lettre majuscule O et le chiffre 0, ou encore les lettres minuscules g et q. Il peut être très difficile de distinguer certains caractères les uns des autres. Nous nous fions souvent au contexte d'une lettre spécifique pour obtenir des indices. Quand nous voyons le mot « gare », nous savons que le première caractère est un « g » et non un « q ». Mais les choses peuvent vraiment se corser lorsque ces caractères apparaissent dans des URL, des mots de passe et des codes, car n'importe quel caractère peut être utilisé dans ces contextes. La sélection de polices ne comportant pas de caractères ambigus est essentielle pour la différentiabilité. Les polices différentiables peuvent être particulièrement utiles pour les utilisateurs dyslexiques, mais elles facilitent la lecture et la compréhension du texte pour tous.
L'un des moyens de tester une police pour repérer les caractères ambigus consiste à utiliser le test Il1. Faites l'expérience ! Placez quelques polices que vous envisagez d'utiliser dans votre design et tapez la lettre majuscule I, la lettre minuscule l et le chiffre 1 les uns à côté des autres. Les polices différentiables sont conçues d'une manière qui permet de distinguer facilement ces caractères. Dans les polices peu différentiables, les caractères peuvent sembler quasiment identiques.
Vous pouvez aller encore plus loin et comparer les caractères suivants :
B et 8
a et o
g et q
La lisibilité fait référence à la facilité avec laquelle nous pouvons lire des blocs de texte. Si vous avez déjà essayé de lire un article qui vous intéressait, mais que vous êtes retrouvé à ralentir, à vouloir détourner le regard, voire à arrêter votre lecture, il y a de fortes chances qu'un manque de lisibilité en soit la cause. Un manque de lisibilité peut ralentir sensiblement la vitesse de lecture et augmenter les efforts nécessaires pour venir à bout du texte.
La différentiabilité et la lisibilité sont des concepts assez proches, mais elles ne vont pas toujours de pair. Un texte peut être différentiable tout en étant peu lisible. Les polices scriptes en sont un bon exemple. Chaque caractère peut être facile à identifier et à distinguer des autres, mais la lecture d'un paragraphe en écriture scripte peut être difficile. De même, un texte peut être peu différentiable, mais malgré tout agréable et facile à lire, en particulier si sa police vous est familière et que vous la trouvez esthétiquement plaisante.
Une erreur très courante consiste à croire que les polices sans empattement (sans serif) sont plus accessibles que les polices avec empattement (serif). Même si les polices sans empattement sont plus lisibles et plus différentiables dans de nombreux cas, cette simplification est abusive. Il existe de nombreux exemples d'excellentes polices avec empattement qui sont plus faciles à lire. En définitive, la prise en compte de la différentiabilité et de la lisibilité est bien plus importante que l'existence ou non d'un empattement dans une police.
Intéressons-nous de plus près à quelques éléments importants qui améliorent la différentiabilité et la lisibilité d'un texte.
Apertures et contreformes
Les apertures sont les espaces partiellement fermés à l'intérieur des lettres, tels que l'espace négatif dans la lettre C. Les contreformes, ou contrepoinçons, sont les espaces entièrement fermés à l'intérieur des lettres, tels que l'intérieur de la lettre O. Des apertures et des contreformes plus larges et plus ouvertes facilitent la lecture des lettres, améliorant ainsi la différentiabilité et la lisibilité.
Par exemple, le paragraphe à gauche utilise la police Fira Sans qui comporte des apertures et des contreformes ouvertes. Le même paragraphe sur la droite utilise la police Haettenschweiler, dont les apertures et les contreformes sont beaucoup plus étroites. Il est plus difficile à lire, vous ne trouvez pas ?
Épaisseur de trait
L'épaisseur du trait, ou graisse, à savoir l'épaisseur des lignes qui constituent les lettres, est un autre aspect typographique qui fait une grande différence en matière de lisibilité. Les polices les plus accessibles ont généralement des traits d'une épaisseur moyenne. Lorsque les traits sont trop fins, le texte est plus difficile à lire, en particulier si l'écran est de petite taille ou si le contraste est faible. Lorsque les traits sont trop épais, ils ont tendance à empiéter sur les espaces négatifs des lettres, ce qui complique l'identification et la lecture de ces dernières (si vous voulez vraiment chercher la petite bête à ce sujet, vous pouvez même calculer l'épaisseur de trait parfaite ! Elle est comprise entre 17 et 20 % de la hauteur d'x depuis le sommet de la lettre minuscule).
Les polices lisibles ont également des traits uniformes pour toute la lettre. Les polices « modernes », qui présentent un contraste élevé entre les lignes épaisses et fines, peuvent sembler très fluides. Vous les voyez souvent sur les pages de couverture des magazines tendance et dans les publicités de mode. Aussi chics qu'elles puissent être, ces polices ne sont pas conçues pour les grandes quantités de texte et ne doivent jamais être utilisées pour des paragraphes entiers. Si vous devez utiliser des polices modernes ou décoratives, faites-le avec parcimonie et limitez-les aux termes familiers et faciles à reconnaître.
Si vous plissez les yeux en regardant les images ci-dessous, vous remarquerez peut-être que les traits fins deviennent très difficiles à lire, en particulier en contraste avec les parties épaisses des lettres.
Espacement et rythme
L'interlettre correspond à l'espace horizontal entre deux lettres. Lorsque l'espace entre les lettres est trop important, il est difficile de les associer pour former des mots. Lorsqu'il est trop réduit, les mots sont presque impossibles à lire.
Un autre problème auquel vous pouvez être confronté, en cas d'interlettrage trop réduit, est le risque que les lettres proches forment de nouveaux caractères.
Par exemple, lorsqu'on réduit l'interlettrage du mot « clue », le « c » et le « l » finissent par donner l'impression de former un « d » minuscule et nous lisons alors le mot « due ».
Un interlettrage régulier et cohérent qui crée un rythme vertical uniforme facilite et accélère la lecture. Si l'interlettrage est différent d'une ligne à l'autre, le lecteur doit constamment changer de rythme, ce qui peut être frustrant et risque de réduire la vitesse de lecture.
Interligne
L'interligne est l'espace vertical entre des lignes de texte. Par exemple, lorsque vous configurez une page de texte à double interligne, vous configurez l'interligne de sorte qu'il corresponde à deux fois la taille du texte, afin que l'espace entre les lignes soit de la même taille que le texte. Quand l'interligne est trop petit, les jambages inférieurs et supérieurs des lettres minuscules, autrement dit les parties qui dépassent de la ligne vers le haut ou vers le bas, peuvent se chevaucher. Et même dans des cas moins extrêmes, le lecteur peut avoir l'impression que le texte est chargé et plus difficile à lire. Une bonne règle de base consiste à opter pour un interligne d'environ 1,5 à 2 fois la taille du texte.
Longueur de ligne
Comme souvent en typographie, vous avez peut-être remarqué qu'il existe un juste milieu. Lorsque les lignes sont trop courtes, le lecteur est obligé de passer à la ligne suivante trop souvent, ce qui freine la lecture. Lorsque les lignes sont trop longues, il est difficile de se retrouver dans le texte quand on passe d'une ligne à la suivante. La longueur de ligne idéale est comprise entre 40 et 75 caractères.
Hiérarchie de titres
Une fois que vous avez sélectionné les polices avec lesquelles vous voulez travailler, réfléchissez à la meilleure façon de les utiliser pour guider le lecteur dans les pages. La hiérarchisation des titres est l'une des choses les plus simples mais les plus importantes que vous pouvez faire pour rendre votre contenu accessible. Une bonne hiérarchie de titres fonctionne comme une carte. Elle aide les utilisateurs à comprendre rapidement la structure de votre contenu, à parcourir la page et à trouver les informations qu'ils recherchent.
Voici quelques notions à garder à l'esprit :
Limitez-vous à un titre de niveau h1 par page. Chaque page doit comporter un titre de niveau h1 qui décrit son objet principal. Tous les titres qui suivent doivent être imbriqués.
Imbriquez les titres de manière hiérarchique. N'ignorez aucun niveau de titre. Par exemple, un h2 doit toujours être suivi d'un h3 (ou d'un autre h2).
Améliorez la structure hiérarchique sur le plan visuel. Utilisez notamment une taille, une graisse et des accents visuels spécifiques pour clarifier le niveau du titre. Par exemple, votre h1 doit être le titre le plus grand, celui qui attire le plus l'attention. Les niveaux suivants doivent être suffisamment différents les uns des autres pour que le lecteur puisse identifier rapidement chaque niveau et sa position dans la structure globale de la page.
Soyez cohérent. Les niveaux de titre doivent toujours être identiques d'une page à l'autre.
Couleur
Les concepteurs trouvent souvent que les exigences d'accessibilité concernant la couleur sont restrictives, et s'inquiètent de ne pas pouvoir utiliser certaines couleurs ou combinaisons de couleurs lorsqu'ils veulent rendre leurs créations accessibles. Même s'il est vrai que les exigences d'accessibilité imposent certaines contraintes, celles-ci ne limitent jamais les couleurs que vous pouvez utiliser dans votre palette, seulement la manière dont vous les utilisez.
Pour vous donner un exemple, voici deux conceptions qui utilisent des jeux de couleurs très semblables :
Elles utilisent toutes deux des nuances pastel pour créer une atmosphère légère, aérienne. Sur la première image, les couleurs sont utilisées d'une manière qui rend le contenu inaccessible. Le texte se confond avec l'arrière-plan, et même les plus grandes lettres peuvent être difficiles à lire. À l'opposé, le deuxième exemple utilise les couleurs d'une manière qui crée une impression similaire sans compromettre la clarté du document. Le texte est séparé de l'arrière-plan et est facile à lire.
Contraste du texte
Quelles que soient les couleurs que vous utilisez dans votre travail, veillez à ce qu'au moins quelques combinaisons utilisent un contraste suffisamment élevé. Les Règles pour l'accessibilité des contenus web (WCAG) exigent un rapport de contraste entre le texte et l'arrière-plan d'au moins 4.5:1 pour le texte ordinaire, et de 3:1 pour le texte de grande taille (18pt) et gras (14pt) au niveau AA. Si vous voulez utiliser des combinaisons de couleurs peu contrastées, spécifiez que celles-ci ne doivent pas être utilisées pour le texte et l'arrière-plan.
Une bonne pratique consiste à préciser comment les couleurs peuvent être utilisées pour garantir l'accessibilité dans des guides de style et des systèmes de conception.
Par exemple, vous pouvez préciser les couleurs dont le contraste est suffisant pour un texte en noir et blanc. Les couleurs du texte et de l'arrière-plan peuvent toujours être inversées si vous voulez utiliser du texte coloré sur un arrière-plan blanc ou noir, car le rapport de contraste demeure inchangé.
Vous pouvez également indiquer quelles couleurs de votre palette peuvent être associées de manière accessible.
Contraste hors texte
Le texte n'est pas la seule chose à laquelle vous devez penser en matière de contraste élevé. Les autres informations visuelles importantes, telles que les icônes, les commandes interactives et les éléments de tableaux et de graphiques doivent également utiliser un contraste suffisant pour être visibles.
Par exemple, les sites web comportent souvent des icônes de réseaux sociaux interactives qui ne sont pas suffisamment contrastées.
Le rapport de contraste minimum imposé par les règles WCAG 2.1 pour les éléments autres que le texte est de 3:1.
Communication d'informations au moyen de la couleur
La couleur peut être très efficace pour attirer l'attention des utilisateurs sur des zones spécifiques de la page, créer des appels à l'action accrocheurs et aider les utilisateurs à identifier différents types d'informations d'un seul coup d'œil. Cependant, les indications colorées ne sont pas utiles pour les utilisateurs aveugles ou qui perçoivent les couleurs différemment. Même si vous ne devez pas renoncer à utiliser de la couleur dans vos créations, pour concevoir de manière inclusive, vous devez veiller à ce que des indications supplémentaires soient également disponibles.
L'un des exemples les plus courants d'utilisation de la couleur pour communiquer des informations est l'affichage des informations correctes en vert et des informations incorrectes en rouge.
Bien que cette association de couleurs soit très courante, du moins dans certaines parties du monde, la difficulté à distinguer le vert et le rouge est l'un des types de daltonisme les plus répandus.
Vous pouvez continuer à utiliser ces couleurs dans des éléments tels que des formulaires interactifs. Elles peuvent être extrêmement utiles pour certains utilisateurs. Mais vous devez également veiller à ce qu'un autre type d'indicateur soit disponible, pour ne pas laisser de côté les utilisateurs qui ne peuvent pas se fier aux informations de couleur.
Voici un exemple qui utilise un design très similaire à celui proposé ci-dessus. Contrairement à la première création qui repose uniquement sur la couleur, ce formulaire utilise également une icône et un message d'erreur pour signaler les champs qui n'ont pas été correctement renseignés, ainsi qu'une coche verte en regard des informations correctement renseignées.
Autre exemple : les symboles de localisation. Certaines interfaces de carte distinguent les différents types d'activités au moyen de symboles de différentes couleurs.
Une meilleure approche consiste à ajouter un autre différenciateur, de façon à associer la couleur et la forme pour communiquer la même information.
Le dernier exemple dont je voudrais vous faire part vous est certainement très familier : l'utilisation de la couleur pour distinguer les liens du texte environnant. Vous avez probablement déjà rencontré ce cas de figure à un moment ou un autre dans Wikipedia.
Vous remarquerez que si je retire les informations de couleur, il est très difficile de savoir quel texte renvoie à d'autres articles sous forme de liens (et donc aussi beaucoup plus difficile de se perdre volontairement dans les méandres de Wikipedia).
Souvent, les liens sont soulignés, ce qui fournit un indicateur secondaire en complément de la couleur. Cette approche est bonne dans de nombreux cas. Toutefois, il existe une raison vraiment bonne d'utiliser uniquement la couleur dans des cas tels que Wikipedia. Les liens incorporés au texte sont si nombreux que s'ils étaient tous soulignés, la lecture en serait altérée. Par conséquent, même si le soulignage peut améliorer l'expérience de certains utilisateurs, il complique beaucoup les choses pour d'autres. Il existe une exception spéciale à ce principe dans les exigences imposées par les règles WCAG. Si vous utilisez seulement la couleur pour distinguer les liens du texte environnant, vous pouvez le faire à condition de respecter les deux règles suivantes :
utilisez un contraste entre le texte des liens et le texte ordinaire d'au moins 3:1 (tout en veillant à ce que le texte des liens et le texte ordinaire soient suffisamment contrastés par rapport à l'arrière-plan). Si le contraste est suffisant, la luminosité devient un indicateur supplémentaire ;
fournissez un indicateur supplémentaire pour le survol et le focus. Il peut s'agir d'un soulignement standard ou de quelque chose de plus créatif, comme un contour personnalisé, du texte en gras, etc.
À vous de jouer : créez un guide de style pour l'accessibilité
Créons à présent un guide de style d'une page pour l'accessibilité. Pour commencer, vous pouvez utiliser ce modèle et exemple. Enregistrez une copie et complétez le modèle vous-même ou utilisez un autre outil tel qu'Illustrator pour obtenir un résultat similaire.
Pour ce chapitre, renseignez les sections Typography et Color en appliquant ce que vous avez appris à propos des caractères et du contraste accessibles. Laissez la section Buttons and links vide pour le moment, nous y reviendrons dans un chapitre ultérieur.
En résumé
La différentiabilité est la facilité avec laquelle vous pouvez reconnaître les lettres, et les distinguer les unes des autres. La lisibilité est la facilité avec laquelle vous pouvez lire les mots dans une phrase ou un paragraphe.
Vous pouvez améliorer la différentiabilité et la lisibilité en choisissant des polices de caractères avec des apertures et contreformes ouvertes, en veillant à laisser suffisamment d'espace autour du texte et à utiliser une épaisseur de trait uniforme.
Les éléments visuels importants doivent être suffisamment contrastés par rapport à l'arrière-plan.
Utilisez la couleur uniquement en tant qu'indication secondaire pour communiquer des informations.
Dans le chapitre suivant, nous allons apprendre à créer du contenu multimédia accessible en sous-titrant vos vidéos et en fournissant des transcriptions accessibles efficaces.
