Améliorer l’accessibilité par la typographie

Par Joe Dolson

Parmi les nombreuses décisions que l'on doit prendre lors de la réalisation d'un site web accessible, les choix typographiques sont souvent les moins mûris. Je ne dis pas qu'ils sont oubliés, mais simplement qu'ils souffrent d'un excès de simplification, au point que des aspects importants concernant l'accessibilité ne sont pas toujours considérés. L'accessibilité du texte est souvent réduite aux trois points suivants :

  1. Cette police est-elle assez grande ?
  2. Est-elle lisible ?
  3. Le contraste est-il assez élevé ?

Cette police est-elle assez grande ?

En réalité la taille du texte est moins importante que la possibilité de le redimensionner. Est-ce possible, et cela pose-t-il problème ? Prenez par exemple un texte avec différentes tailles de police : l'espace entre les lignes change-t-il ? (Je parle ici de hauteur de ligne : l'espace entre la partie inférieure d'une ligne et celle de la ligne au-dessus, pour utiliser le terme typographique précis.)

Dans une feuille de style en cascade (CSS), cet espace se définit à l'aide de la propriété line-height. Si vous la définissez à une valeur fixe, en utilisant des pixels par exemple, l'espace entre les lignes ne changera pas avec la taille de la police. En conséquence, les lignes se chevaucheront quand le texte sera grossi, et seront très éloignées quand le texte sera réduit.

Exemple : Ce choix peu judicieux provoquera des chevauchements de texte lorsqu'il est grossi.

L'espace entre les lettres (l'interlettrage ou crénage) est également ajustable en CSS, mais ne doit être modifié qu'avec beaucoup de précautions. Dans l'industrie typographique, il est souvent réglé (avec précision) pour éviter les coupures de mots et les fins de paragraphes disgracieuses.

Sur le web, le texte se placera différemment suivant les préférences de police de l'utilisateur et la dimension de la fenêtre du navigateur. Jouer sur l'interlettrage dans de telles conditions s'avère périlleux, et il vaut mieux s'en abstenir dans la plupart des cas.

Des lettres trop rapprochées ou trop éloignées les unes des autres peuvent gravement diminuer la lisibilité d'un texte. Trop proches, les lettres se colleront voire se chevaucheront, rendant leur lecture difficile. A l'inverse, des lettres trop écartées seront plus reconnaissables mais les mots seront plus difficiles à distinguer les uns des autres. Il arrive bien sûr qu'il soit nécessaire de modifier l'interlettrage d'une police mal conçue, mais en aucun cas ceci ne doit être utilisé pour rattraper un mauvais crénage.

Exemple : Des lettres trop proches ou trop éloignées peuvent rendre un texte illisible.

La justification elle aussi peut poser problème. En particulier la justification complète, où les bords gauche et droit du texte sont alignés verticalement. Sur de longues lignes l'effet peut être intéressant, mais il entravera la lecture sur des lignes trop courtes. Ici encore, agrandir la taille de police peut avoir un effet négatif sur votre mise en page. Le nombre de mots par ligne diminuant, l'espace entre ceux-ci augmente et le texte se morcelle, devenant plus difficile à lire.

Exemple : Sur de courtes lignes, les espaces entre les mots s'étirent.

L'effet n'est pas vraiment idéal, n'est-ce pas ?

Que pensez-vous de cette police ? Agréable et lisible, non ?

Je ne sais pas. La première règle de la typographie sur Internet, est qu'on a peu de choix, et encore moins de contrôle sur les polices utilisables par les visiteurs. Définissez des choix de dernier recours ! CSS vous permet d'établir une liste de polices classée par ordre de priorité descendante, alors profitez-en ! Mais assurez-vous du résultat obtenu avec chacune d'entre elles, à différentes tailles de texte.

La lisibilité d'une police dépend aussi du type de texte. Il n'est pas rare de devoir utiliser une police pour les titres, une autre pour la navigation, et une troisième pour le corps de texte. Sachez surtout qu'une police qui « rend bien » pour les titres peut perdre tout son intérêt une fois appliquée au corps de texte. Ce qui donne une touche majestueuse et unique à vos titres peut facilement perdre de son attrait une fois appliqué à de longs passages de texte, et les rendre difficiles à lire.

Honnêtement, si vous vérifiez que vos choix de polices sont lisibles, qu'ils s'ajustent correctement, et que vous proposez en dernier recours des polices parmi celles recommandées pour le web, vous pouvez être tranquilles. Se laisser emporter dans des choix de polices extravagants est le pire qui puisse vous arriver : si vous utilisez une police différente pour chaque bloc de texte, les ressources mentales nécessaires pour lire le texte augmenteront considérablement. Créer des pages inutilement complexes ne peut que desservir vos visiteurs.

Et le contraste, alors ?

Est-il suffisant, est-il trop fort ? On a tendance à utiliser le plus grand contraste possible pour s'assurer que le texte est lisible. Mais les problèmes de contraste se posent aux deux extrêmes. Qu'il soit trop faible (texte gris foncé sur fond noir par exemple) et le texte devient illisible. Qu'il soit trop fort (texte blanc sur fond noir par exemple) et, malgré une lisibilité évidemment accrue, vous poserez problème à un autre groupe d'utilisateurs. Si vous lisez l'article de Met Pedley, Concevoir pour les dyslexiques, publié en trois épisodes en 2006, vous aurez une idée des problèmes qui peuvent survenir avec les contrastes élevés.

J'ai parlé de dyslexie visuelle dans la première partie. Pour certaines personnes, les contrastes importants donnent l'impression que les mots se déplacent constamment sur la page. -Met Pedley

Les problèmes d'arrière-plans ne se limitent pas qu'aux couleurs unies. N'importe quelle image peut servir d'arrière-plan, et rien ne vous empêche d'en utiliser une qui rende le texte illisible d'une manière ou d'une autre. Les images trop complexes sont évidemment à éviter : elles attirent l'oeil au point qu'il peut être impossible de distinguer le texte placé au-dessus. Mais même les dégradés, extrêmement populaires, peuvent poser des problèmes de lisibilité.

En quoi une image si simple peut-elle poser problème ? Par définition, un dégradé se compose d'une plage de couleurs. Dans cette plage, les contrastes de premier et d'arrière-plan varient et il suffit que sur une zone le contraste pose problème pour que certains visiteurs n'aient pas accès à une partie du texte. Suivant les facultés cognitives du visiteur et la proportion de texte devenue illisible, le sens du texte entier peut ainsi être perdu.

Conclusion

Les éléments à prendre en compte dans la typographie pour Internet sont les mêmes que pour les autres médias, c'est la manière d'utiliser les ressources qui change, afin de s'adapter aux visiteurs. L'absence de contrôle sur de nombreux éléments oblige les webdesigners à réfléchir à d'autres façons d'optimiser les moyens à leur disposition. Il ne suffit pas de s'en tenir à un modèle spécifique, il existe trop d'impondérables. Il vaut mieux au contraire savoir dans quelle mesure les préférences de l'utilisateur peuvent avoir un impact sur vos choix typographiques et éviter les situations risquant de rendre le texte illisible.

Fiche technique

À propos de l'auteur

Joe Dolson est un webdesigner freelance vivant dans les deux villes jumelles du Minnesota (Minneapolis et Saint Paul). Il travaille comme webdesigner depuis le début 2005, et construit des sites web depuis 2002. Son objectif est de faire de son mieux pour vous aider à développer votre site. En dehors du site Accessite.org, il a aussi créé The Conscientious Home, un site web consacré à la préservation de l’environnement au travers des comportements de tous les jours, et rédige inter:digital strategies un blog sur les stratégies marketing. En plus de développer des sites web, Joe Dolson est enfin un violoniste freelance actif et un professeur de viole et de violon depuis 2001.

Articles similaires

Voici la liste des dix articles les plus récents en rapport avec cet article :

Tous niveaux

Accessibilité

© 2001-2016 Pompage Magazine et les auteurs originaux - Hébergé chez Nursit.com ! - RSS / ATOM - About this site