Gestion de l’agrandissement des caractères
Thématiques associées :- Composant
Date de parution
Mise à jour de l'article du
Préambule
L’agrandissement de la taille des caractères est utilisé par beaucoup d’utilisateurs (les personnes seniors, 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%) ou l'utilisation du zoom global de la page à 200%, tout cela sans chevauchement ou perte de contenu ou de fonctionnalités. À 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 apparaitre une barre de défilement horizontal qui rend la lecture de la page difficile pour certains. Chez Orange, nous avons décidé d'utiliser comme seule méthode de test pour le critère WCAG 1.4.4 Resize Text, le zoom du texte seulement à 200%.
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 sa totalité sans manipulations.
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 entraine 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.
Le zoom texte seulement permet de résoudre plus de situations problématiques pour certains utilisateurs que la vérification avec le zoom global navigateur et permet donc une plus grande robustesse du code front.
Exemple non-valide
Cet exemple utilise des pixels pour dimensionner la hauteur des éléments.
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;
Conclusion
Il est indispensable de tester vos pages avec le zoom à 200% et l’option « Zoom texte seulement » activée. C'est ce que nous préconisons chez Orange et c'est la seule façon de vérifier si vos pages restent bien lisibles quelle que soit la taille de l'écran. Bien que ces développements ne sont souvent que de bonnes pratiques de responsive web design (conception adaptative web) voire des corrections mineures à apporter, celles-ci peuvent améliorer drastiquement la façon dont l’information sera perçue par certains utilisateurs.