Gestion de l’agrandissement des caractères

Préambule

L’agrandissement de la taille des caractères est utilisé par beaucoup d’utilisateurs (les personnes senior, les personnes malvoyantes, les personnes qui devraient porter une paire de lunettes mais qui n’en portent pas…). Les recommandations d’accessibilité préconisent la possibilité d’agrandir la taille du texte et seulement du texte par deux (200%) sans perte d’information. À ce niveau de zoom, la présentation peut être altérée, mais le texte doit rester lisible (pas de texte tronqué ni superposé).

Zoom par défaut du navigateur

Tous les navigateurs récents offrent désormais la possibilité de zoomer la page. Cette option permet d’agrandir la totalité de la page (les textes, les images, l’espacement entre les différentes zones de la page…). Cette option, bien que satisfaisante pour les utilisateurs occasionnels, a l’inconvénient de faire apparaître une barre de défilement horizontal qui rend la lecture de la page difficile.

Mise en évidence du problème

Exemple de page avec un niveau de zoom à 100%

Ce premier exemple simule le zoom par défaut du navigateur. La totalité de la page s’agrandit, deux barres de défilement apparaissent (horizontal et vertical). Le texte est difficile à lire.

Dans ce deuxième exemple, on simule uniquement l’agrandissement de la taille du texte. Ici, la largeur de la page reste inchangée, cela entraîne uniquement l’apparition d’un ascenseur vertical. La lecture du texte est beaucoup plus simple.

Zoom de la taille du texte uniquement

Heureusement certains navigateurs permettent d’agrandir uniquement la taille du texte. C’est le cas de Firefox par exemple (option disponible dans le menu Affichage > Zoom > Zoom texte seulement).

Lorsque cette option est activée, il se peut que votre page ne s’affiche pas correctement avec un zoom à 200% (dans Firefox faire quatre fois Ctrl+). Bien souvent, il s’agit d’un problème lié à l’utilisation d’unités non-relatives telles que les pixels ou les points (px, pt).

Les unités relatives

L’utilisation d’unités relatives pour le texte telles que les %, les em, ou les rem, mais également dans le dimensionnement des zones de l’écran (taille des div) permet de résoudre les problèmes. En effet, si le texte peut être zoomé alors les containers doivent aussi suivre l’augmentation de la taille pour ne pas tronquer ou faire se chevaucher le texte.

Exemple non-valide

Cet exemple utilise des pixels pour dimensionner la hauteur des éléments.

Ouvrir l’exemple 1

Exemple valide

Il y a plusieurs façons de corriger le problème, par exemple en utilisant une unité relative pour dimensionner la hauteur des éléments.

On pourrait par exemple remplacer :
height: 450px;
par une hauteur variable en fonction de la taille des caractères :
height: 45rem;

Ou encore plus simplement, en gardant les pixels, mais en précisant qu’il s’agit d’une hauteur minimale :
min-height: 450px;

Ouvrir l’exemple 2

Conclusion

Il est indispensable de tester vos pages avec le zoom à 200% et l’option « Zoom texte seulement » activée. C’est la seule façon de vérifier si vos pages restent lisibles. Bien qu’il s’agisse de corrections mineures à apporter, celles-ci peuvent changer totalement la façon dont l’information sera perçue par certains utilisateurs.