Gérer l’agrandissement des caractères pour garantir la lisibilité des contenus.

Ce que j’ai fait :

• lire l’article Agrandissement des caractères(lien externe) du Guide de l’intégrateur
• lire l’article Gestion de l’agrandissement des caractères(lien externe) d’Orange
• lire les notices Zoom et taille de texte(lien externe) d’AcceDe Web
• lire la notice Utiliser uniquement des tailles relatives (em, %, small, etc.) pour les polices de caractères(lien externe) d’AcceDe Web

Ce que j’ai appris

Le RGAA (Référentiel Général d’Amélioration de l’Accessibilité) pose le critère suivant :

Critère 10.4. Dans chaque page web, le texte reste-t-il lisible lorsque la taille des caractères est augmentée jusqu’à 200%, au moins (hors cas particuliers) ?

De nombreux utilisateurs et utilisatrices doivent en effet agrandir le texte lorsqu’ils ou elles consultent un site internet : les personnes âgées, les personnes mal-voyantes ou même certaines personnes qui ont besoin de lunettes mais qui n’en portent pas au moment où elles consultent le site.

Ce critère d’accessibilité sous-entend trois points :

• qu’aucune taille minimale de caractères n’est imposée
• que la taille du texte, et seulement du texte, peut être modifiée en fonction des préférences de l’internaute
• que le texte doit rester lisible même lorsque sa taille est doublée

(A noter que les cas particuliers se réfèrent aux textes en image et aux sous-titres de vidéos.)

Pas de taille minimale requise

Si aucune taille minimale des caractères n’est requise afin d’être conforme aux règles d’accessibilité, il n’en reste pas moins fortement conseillé d’utiliser des tailles relativement grandes pour que le contenu puisse être lu aisément par tout le monde. Aucune valeur explicite n’est demandée mais si vous voyez vos utilisateurs et utilisatrices se pencher à moins de deux centimères de leur écran, c’est qu’il y a sans doute un problème.

La taille du texte est modifiable

Zoom navigateur uniquement sur le texte

On parle ici de modifier uniquement la taille du texte et pas de la page dans son ensemble. Le zoom par défaut du navigateur permet d’agrandir la totalité de la page : texte mais aussi images, espacement entre les différentes zones de la page… Cette fonctionnalité peut se révéler pratique dans certains cas mais elle n’est pas optimale : à un certain point de zoom, une barre de défilement horizontale apparaît, rendant la lecture difficile.

Un zoom sur la taille de texte uniquement, et non pas l’ensemble de la page, évite ce genre d’écueils et fait apparaître seulement une barre de défilement verticale. Certains navigateurs proposent cette option.

Dans Firefox par exemple :

1. Sur la barre d’outils supérieure, cliquez sur “Affichage”, puis sur “Zoom”
2. Sélectionnez “Zoom texte seulement”. Les commandes ne modifient alors que la taille du texte, pas celle des images.

Je vous invite à consulter la page Taille de police et zoom – augmenter la taille des pages web(lien externe) de Mozilla pour avoir plus de détails. Et si comme moi, votre barre de menus a disparu de Firefox, n’hésitez pas à consulter l’article Qu’est-il arrivé aux menus Fichier, Édition et Affichage ?(lien externe).

Note de l’autrice (17 décembre 2019) : dans sa version 4, le RGAA autorise désormais la validation du critère 10.4 en utilisant le zoom graphique du navigateur (voir les tests 10.4.2 et 10.4.3).

Enfin, il est impératif de laisser à l’internaute la possibilité de zoomer. Les déclarations suivantes sont donc à proscrire :

<meta content="width=device-width;initial-scale=1.0; maximum-scale=1.0; user-scalable=1;" name="viewport" />

<meta name="viewport" content="user-scalable=no" />

Utiliser des unités relatives

Pour que la taille de texte soit modifiable, celle-ci doit être exprimée en unités relatives. Les unités suivantes sont permises :

• em, rem
• %
• vw, vh (unités relatives à la taille du viewport) ;
• x-small, small, large… (mots clés).

Petit focus pour celles et ceux qui ne connaissent pas ou peu les mots clés (comme c’est mon cas) : xx-small, x-small, small, medium, large, x-large, xx-large renvoient à des valeurs absolues basées sur la taille par défaut de l’utilisateur qui vaut medium. Les mots-clés larger et smaller quant à eux permettent d’avoir une taille de caractères plus grande (larger) ou plus petite (smaller) que celle de l’élément parent.

Les unités fixes en revanche sont interdites :

• px (pixel)
• pt (point)
• cm (centimètres)

(A noter que les styles d’impression ne sont pas concernés par cette recommandation).

Garantir la lisibilité des contenus

Le texte doit rester lisible lorsque la taille par défaut est augmentée de 200%. Sur Firefox, cela correspond à 6 fois l’action “Ctrl +” (avec l’option « Texte seul » du zoom). Afin de garantir cette lisibilité, certaines propriétés CSS doivent être maniées avec précaution :

• les tailles de boîtes fixées par les propriétés height, width, max-height et max-width et dont les valeurs sont définies en pixels ne peuvent s’agrandirent proportionnellement à la taille de la police. Le texte contenu risque de déborder et d’être illisible. Mieux vaut privilégier des valeurs relatives et remplacer height et width par min-height et min-width. L’utilisation des propriétés max-height et max-width est à contrôler pour s’assurer que l’agrandissement des caractères ne posent pas de problème.

• ne pas utiliser la propriété overflow: hidden; qui conduit à tronquer et masquer le contenu.

• ne pas définir d’unités, qu’elles soient relatives ou fixes, pour la propriété line-height.

• vérifier que les positionnements absolute et fixed n’entraînent pas de chevauchement.

• vérifier l’affichage du texte si vous utilisez la propriété white-space: nowrap; qui empêche le retour à la ligne automatique.