Conseils d'accessibilité du zoom de texte
À l'époque où un utilisateur utilisait Ctrl / Cmd avec les touches + / - pour effectuer un zoom avant et arrière, les navigateurs n'augmentaient que la taille du texte. Cela augmenterait la lisibilité avec le contenu en texte brut, mais le contenu statique, tel que les images, resterait.
Aujourd'hui, lorsque quelqu'un utilise la fonction de zoom par défaut du navigateur, les navigateurs modernes effectuent un zoom en diminuant la taille de la fenêtre d'affichage ; à mesure que le contenu augmente, les points d'arrêt CSS se déclenchent et affichent le contenu conçu pour les écrans plus petits . Il en résulte que tout apparaît plus grand tout en restant lisible.
Bien que la fonction de zoom de la fenêtre d'affichage moderne soit appréciée, certaines personnes utilisent encore des outils pour augmenter uniquement la taille du texte. Selon la façon dont le CSS a été codé, le zoom sur le texte uniquement peut entraîner certains obstacles à l'accessibilité, principalement la lisibilité du contenu en texte brut.
Selon 1.4.4 Redimensionner le texte , les utilisateurs doivent pouvoir zoomer jusqu'à 200% tout en conservant la lisibilité du contenu textuel .
CSS problématique
Ces problèmes proviennent généralement du CSS qui utilise des unités statiques, c'est-à-dire des pixels pour le dimensionnement. Prenons l'exemple suivant :
.card { height: 200px; overflow: hidden; width: 400px; }Avec ce CSS, lorsque quelqu'un zoome via du texte, le dimensionnement statique restreindra la lisibilité du texte ; la taille du contenu augmentera, mais le texte sera restreint de la vue.
Unités de dimensionnement flexibles
Pour contourner ce problème, autorisez la croissance organique des conteneurs de texte et de contenu lorsque le texte est redimensionné. Lors de l'écriture de CSS accessibles, les unités de dimensionnement statiques telles que px doivent être évitées. Dans la mesure du possible, utilisez des unités flexibles telles que % , em ou rem .
.card { height: 12.5rem; overflow: hidden; width: 25rem; } Avec ce CSS en place, le conteneur de contenu sera désormais redimensionné avec le texte lorsqu'un zoom de texte uniquement est lancé. Cela est dû au fait que la taille de l'unité em est basée sur la taille de la police du conteneur.
Découvrez la démo :
Comment tester
Il existe certaines extensions de navigateur Chrome que vous pouvez utiliser pour tester, mais il est recommandé d'utiliser la fonctionnalité de zoom de texte intégrée avec Firefox . Voici comment y parvenir :
- Charger le site Web en question avec Firefox
- Assurez-vous que le zoom du texte est activé en allant dans "Affichage", sélectionnez "Zoom" et sélectionnez "Zoomer le texte uniquement"
- Ajustez la taille du texte à
200%à l'aide des touchesCmd/Ctrlet+, et visualisez le contenu de la page
Ce qui est attendu, c'est que lorsque la taille du texte augmente, les éléments sont mis à l'échelle en conséquence. Cependant, souvent, ce qui se passe réellement, c'est que le texte augmente en taille, le contenu est obscurci et difficile à lire. C'est l'obstacle à l'accessibilité que nous devons éviter.
N'oubliez pas que ce qui est important ici, c'est que le contenu du texte soit lisible et consommable. Souvent, lorsque le texte est agrandi à 200% , la mise en page et d'autres éléments peuvent sembler loin d'être idéaux, mais si le contenu est lisible, vous aurez satisfait à cette exigence.
Critères de réussite WCAG
Cela revient à 1.4.4 Redimensionner le texte qui indique :
"À l'exception des légendes et des images de texte, le texte peut être redimensionné sans technologie d'assistance jusqu'à 200 % sans perte de contenu ou de fonctionnalité."