Accessibilité

Agrandissement de la taille des polices

Donner à l'utilisateur la possibilité d'agrandir la taille des caractères est une des recommandations emblématiques de l'accessibilité du web. Si l'objectif est limpide, la mise en oeuvre est souvent délicate. Gardons à l'esprit que le redimensionnement des polices ne doit pas générer de perte d'information, comme, par exemple, des textes tronqués ou masqués par des superpositions d'éléments. Les questions relatives à ces effets indésirables et les contraintes qu'elles engendrent sur le design sont légion sur les forums spécialisés. Voici regroupés quelques remarques et points importants à respecter pour mener à bien cette opération essentielle.

Article par (Lyon, France)
Créé le , mis à jour le (24769 lectures)
Tags : accessibilité, police, agrandir, agrandissement, zoom, taille typo, fonte, pixel

Question posée

Une des choses à essayer de respecter en terme d'accessibilité c'est le redimensionnement de la police et permettre d'agir 2 fois sur ce redimensionnement ("grand" sous IE, et 150% Firefox) sans aucune perte que ce soit au niveau du design (si possible) et surtout lisibilité (chevauchement de lettres et de blocs) et utilisation (présence de scroll horizontal...).

Dans un souci d'accessibilité accrue, pensez-vous que permettre de passer 2 niveaux supplémentaires (agir 4 fois) sans perte de lisibilité et d'utilisation soit quelque chose à laquelle l'on doit penser dans un souci de qualité ?

Éléments de réponse

Menu du changement de la taille du texte dans IE6On a là trois malentendus souvent rencontrés :

  1. Permettre à l'utilisateur d'agir 2 fois sur le redimensionnement n'est pas une règle d'accessibilité. Ce facteur "2" correspond au niveau de zoom des utilisateurs qui en ont besoin sans avoir necessité, par ailleurs, de recourir à une aide technique telle qu'une loupe (le cas le plus concret est la presbytie). C'est le plus grand agrandissement possible dans Internet Explorer (voir ci-contre), et le minimum acceptable pour l'accessibilité, qu'il faut tendre à pousser le plus près possible du seuil où la dégradation devient trop importante.
  2. Conserver le design sur ce palier de zoom n'est pas une règle d'accessibilité : il n'est pas dit que le design doit être respecté à quelque niveau de zoom que ce soit, mais qu'il ne doit pas y avoir de perte d'information, ce qui est tout à fait différent.
  3. Éviter systématiquement l'apparition du scroll n'est pas une règle d'accessibilité : le scroll ne doit pas être évité ; il faut, au contraire, s'assurer que son utilisation est possible pour éviter les pertes d'information.

Agrandir polices

Les points importants à respecter

  1. Assurer le zoom des polices pour 150%, au minimum,(par référence à la taille "très grande" de IE). Quelle que soit la situation, il faut garantir que le contenu, à ce palier, soit intégralement lisible ; ce n'est pas un objectif mais un véritable pré-requis à l'accessibilité de vos pages.
  2. Tester la dégradation du design au-delà de ce palier minimum et tenter de trouver les solutions pour pousser la limite du zoom. Faire en sorte qu'au-delà de ce premier palier, le contenu reste lisible le plus longtemps possible, quitte à ce que le design se modifie fortement; vérifier, dans ce cas, que l'utilisation des ascenceurs est possible. Attention : prendre soin également de vérifier que la dégradation ne modifie pas la logique de présentation du contenu.
  3. Tester systématiquement les effets du positionnement absolu, fixe et des flottants pour éliminer les superpositions et les débordements. L'usage mal contrôlé de ces propriétés est souvent la cause des effets indésirables qu'engendre le zoom, surtout, comme on le rencontre souvent, si on a défini un « conteneur principal » à largeur fixe qui empêchera la structure de se transformer de manière élégante.
  4. Ne pas considérer qu'un dispositif JavaScript d'agrandissement "maîtrisé" est une réponse aux questions précédentes. Il faut éviter d'en faire usage : cela ne fonctionne pas pour ceux qui désactivent JavaScript et peut poser des problèmes dans le cas d'une modification par l'utilisateur de la taille de police par défaut. En tout état de cause, ce n'est pas une solution fiable pour résoudre les problèmes causés par le Zoom.
  5. Si, malgré tous vos efforts, vous ne parvenez pas à résoudre les effets indésirables du Zoom sur vos contenus, une solution acceptable consiste à proposer un style alternatif plus adapté aux contraintes des pages. Mais attention, faites-le à bon escient ; si c'est la seule solution que vous trouvez aux effets indésirables pour le minimum à garantir, vous devriez vous pencher sérieusement sur vos fichiers CSS. Veillez, notamment, à vérifier et modifier, si nécessaire, les propriétés de positionnement, particulièrement absolute et fixed. Idem pour les propriétés de dimensionnement, surtout si vous mélangez des valeurs fixes et des valeurs relatives. Si cela ne permet pas de résoudre les problèmes, vous devrez, éventuellement, remettre en cause vos choix de mises en page.

Conclusion

L'agrandissement de la taille des caractères est un élément que vous devez intégrer dès la conception du design, notamment lorsque vous définissez les structures de votre page et les méthodes CSS pour y parvenir. Il n'y a pas de limite au Zoom, mais un minimum à garantir ( dans l'idéal, 200% et, dans tous les cas, 150% correspondant à « très grande » pour IE). Ne vous acharnez pas à tenter de conserver votre design à ces paliers de Zoom, il peut se dégrader si ça garantit que le contenu reste accessible. Essayez de pousser la limite du Zoom aussi loin que possible; vos pages n'en seront que plus accessibles et vous en apprendrez beaucoup sur l'art de la mise en page CSS.