Amélioration de la typographie Web pour les utilisateurs malvoyants

Dans l'industrie du Web, nous créons souvent pour la majorité, ce qui rend notre travail tolérable pour les membres de la minorité. Cela ne suffit pas. Dans cet article, nous allons examiner les moyens d'améliorer l'expérience typographique des utilisateurs malvoyants sur le Web..

Les rapports de fin 2013 suggèrent qu'il y aurait environ 285 millions de malvoyants dans le monde. Bien que 90% de ces personnes vivent dans des pays en développement, les 10% restants incluent 28 500 000 personnes qui interagissent certainement avec le Web. Il existe des navigateurs spécialement conçus pour les utilisateurs malvoyants, tels que WebbIE, qui transforment toutes les pages en interfaces textuelles uniquement pour fonctionner avec des lecteurs d'écran, mais est-ce suffisant? Qu'en est-il de ceux qui ne sont pas complètement aveugles, mais qui ont des problèmes pour lire des polices sur le Web? Est-ce qu'une approche du tout ou rien est juste pour eux?

WebbIE Navigateur Web 4

Passons en revue les problèmes auxquels ce groupe d'utilisateurs est confronté, comment nos pratiques de l'industrie contribuent à les entraver et comment nous pouvons résoudre le problème.!

Problèmes liés à la conception des caractères

Lorsqu'un concepteur crée une police de caractères, le lieu de visualisation prévu a une influence considérable. Les personnages destinés à être lus sur des supports imprimés seraient conçus pour ce faire. Une police de bureau doit d’abord être optimisée avant d’être utilisée sur le Web, et de nombreuses polices populaires ont des variantes Web de nos jours. Par exemple, un caractère optimisé pour le Web peut avoir un contraste de trait faible (que vous verrez tout de suite), une hauteur x plus grande, des compteurs plus grands (les trous d'une lettre) et un espacement plus ouvert. Tout en visant à rendre le texte plus lisible sur le Web, certains de ces changements peuvent en réalité avoir l’effet inverse pour les personnes malvoyantes..

Coups non modulés

Vous entendrez souvent les gens se perdre dans une discussion sur ce qui est le plus lisible pour la copie; type serif ou sans-serif? En fait, choisir un caractère pour sa lisibilité n’est pas aussi noir et blanc que cela..

Coups non modulés sont lorsque le poids dans les traits d'un personnage est invariable. Cela supprime de nombreuses caractéristiques des lettres utilisées par les malvoyants pour l'interprétation. Pour un utilisateur malvoyant, le S d'une police de caractères non modulée pourrait très bien être mal interprété en tant que C.

Dans l'exemple ci-dessus, vous verrez qu'Arial a des traits non modulés, contrairement au serif Georgia classique. Verdana est un bon exemple de sans-serif qui affiche une légère modulation. Ses bornes élargies (la fin des traits) suggèrent un "arrêt" avant que l'œil du lecteur ne passe au caractère suivant.

Dans les années 50, Herman Zapf développa Optima avec cet objectif en tête. il visait un sans-serif qui pourrait remplacer le serif le plus souvent utilisé dans les livres et les magazines. 

Mauvaise manipulation de la taille et du poids

Vous avez peut-être déjà dû le faire auparavant: augmenter le poids d'une police dans des tailles plus petites pour une meilleure lisibilité. Pour l’essentiel, il s’agit d’une solution satisfaisante qui donne au contenu anticipé lisible par l’utilisateur. Dans le cas d'utilisateurs malvoyants, cela crée à nouveau une expérience de lecture presque impossible.

Lorsque vous combinez une police non spécialement conçue pour une certaine taille et que vous améliorez sa lisibilité en ajoutant du poids (en particulier si le navigateur ajoute du poids plutôt qu'en utilisant une variante de police spécifique), l'effet des traits non modulés est exagéré. Le poids ajouté atténue les caractéristiques spécifiques de la lettre utilisées pour une identification plus facile. 

Absence de crénage distinctif

Le crénage est le réglage distinctif de l'espacement entre les caractères d'une police. Avec le crénage, l'objectif est de laisser une quantité distincte d'espaces entre les caractères pour la famille de polices entière. Cependant, dans la plupart des polices disponibles sur le Web, la quantité d’espaces est gérée de manière plus uniforme..

En apparence, cela ne semble pas si important, mais une approche uniforme peut conduire à une mauvaise interprétation du personnage. Un exemple courant de ceci est L et J. Placez ces deux personnages l'un à côté de l'autre et vous pourriez facilement les lire de travers. U, ou LI. Un autre bon exemple est deux capitales v, VV. Cette combinaison pourrait facilement être vue comme un W.

Choix de couleur

Il est impossible de discuter de la lisibilité sans mentionner les choix de couleurs. Différentes combinaisons de couleurs pour la police et l'arrière-plan créent différentes expériences de lecture. Par exemple, il est courant de placer du texte presque noir sur un arrière-plan presque blanc. De la même manière, il est déconseillé d’utiliser une couleur jaune avec un fond blanc. Ce dernier produit une expérience de lecture épouvantable et peut provoquer des maux de tête..

Aujourd'hui, avec l'utilisation prédominante du design plat, ces problèmes de couleur ne posent pas un aussi gros problème par rapport à il y a quelques années. Cependant, c'est toujours quelque chose à prendre en considération. Pour un arrière-plan vidéo (également une tendance à la hausse), il y aura toujours différentes scènes qui modifieront la balance des couleurs. Pour le design à plat, le problème réside dans les choix consistant à simplement assourdir une couleur afin de lui donner un niveau de lisibilité acceptable..

Le blanc sur bleu de cet exemple a fière allure, mais pas si votre vision n'est pas à 100%. Consultez checkmycolours.com pour analyser toutes les combinaisons dont vous n'êtes pas sûr..

Créer de meilleurs jeux de polices de projet

Après avoir passé en revue quelques inconvénients clés auxquels sont confrontés les utilisateurs malvoyants utilisant la typographie Web, passons maintenant à ce que l'on peut faire en tant qu'architectes du Web pour l'aider..

Meilleures combinaisons de couleurs

Pour créer des combinaisons de couleurs entre votre modèle et votre police, vous devez suivre une seule règle simple. L'arrière-plan doit être suffisamment clair et suffisamment silencieux pour ne pas créer de bruit. Pour la police, une couleur unie avec une quantité de contraste respectable. Simple, droit?!

Pour les arrière-plans vidéo, il est un peu plus impliqué. Bien que la superposition de couleurs d’arrière-plan sous le texte soit excellente, la vidéo peut différencier les niveaux d’atmosphère et de bruit par des scènes changeantes. Pour remédier à cela, assurez-vous de prendre en compte tous les différents changements de scène au cours de la vidéo..

Ça a l'air génial! Je ne peux pas le lire.

Taille de police

Afficher simplement une police à une taille suffisante ne fonctionnera pas toujours. Comme vous l'avez probablement constaté, certaines polices apparaissent irrégulières ou moins raffinées lorsqu'elles sont utilisées avec des tailles différentes. Un correctif populaire pour cela est un peu de poids supplémentaire et l'ajout d'un trait. Bien que cela puisse aider, c'est désordonné et ne fait pas le travail bien fait.

Essai

Effectuer des tests pour vérifier que votre site est lisible pour les malvoyants n'est pas aussi difficile qu'il y paraît. Essayez de faire ces trois choses:

  • Regardez votre site dans une échelle de gris.
  • Testez le comportement de votre site pour les utilisateurs qui différencient ou voient certaines couleurs (orange et rouge par exemple). www.color-blindness.com/coblis-color-blindness-simulator
  • Visualisez à quel point votre police est lisible à différents niveaux de flou en jouant avec les ombres de texte..

Ressources

  • Vérificateur de contraste de couleur
  • www.checkmycolours.com
  • contrastrebellion.com
  • Extension de chrome pour analyseur de contraste de couleur
  • Color Blind Web Filer
  • Sim Daltonisme (Color Blindness Simulator OSX)

Conclusion

Être conscient qu'il y a un problème est la moitié de la bataille. Maintenant, vous devriez avoir un bon point de départ pour comprendre comment vous pouvez donner aux utilisateurs malvoyants une meilleure expérience.