image-of-text
Le texte devrait être du vrai texte, pas une image de texte
Pose la question, pour les images dont le balisage montre qu’elles contiennent probablement du texte (un <input type="image">, ou un <img> qui affiche un SVG contenant <text>), de savoir si ce texte pourrait être du vrai texte.
Applicabilité. S’applique à deux types d’image dont le balisage montre qu’elles contiennent probablement du texte, lorsqu’elles sont affichées :
- un <input type="image">, un bouton dessiné sous forme d’image, qui porte presque toujours son libellé sous forme de texte dans l’image ;
- un <img> dont la source est une URL de données SVG dont le balisage contient un élément <text> : le texte est dessiné comme partie de l’image, qui ne peut pas être restylée comme peut l’être du texte.
Les autres images ne donnent pas lieu à une question : savoir si une image contient du texte dépend de ses pixels, qu’une analyse du balisage ne voit pas. Un <svg> en ligne contenant <text> est du vrai texte, et sort du périmètre (ACT 0va7u6). Lorsqu’elle ne trouve rien à mettre en question, elle renvoie notApplicable, et non pass : elle ne s’applique qu’à ce que son contrôle signale, et ne rien y trouver ne montre pas que tout va bien.
Attendu. Un texte qui peut être du vrai texte est du vrai texte, mis en forme avec CSS, plutôt qu’une image de texte, sauf si l’image peut être personnalisée selon les besoins de l’utilisateur ou si la présentation particulière du texte est essentielle, comme dans un logo (WCAG 1.4.5).
Exemples
<input type="image" src="send-button.png" alt="Send">
Un bouton dessiné sous forme d’image porte presque toujours son libellé sous forme de texte dans l’image ; un <button> avec du vrai texte pourrait faire de même.
<img alt="WCAG Rocks" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><text x='0' y='15'>WCAG Rocks</text></svg>">
Le <text> du SVG est dessiné comme partie de l’image, où il ne peut pas être restylé comme du texte.
<svg xmlns="http://www.w3.org/2000/svg"><text x="0" y="15">WCAG Rocks</text></svg>
Le texte d’un SVG en ligne est du vrai texte.
Comment vérifier
Quand cette règle ne peut pas trancher, elle renvoie cantTell et laisse la question à une personne. Chaque question qu’elle peut poser figure ici sous son code de raison, avec les étapes pour y répondre. Un constat porte les mêmes étapes dans howToCheck, dans la langue de l’analyse. Voir Schéma de sortie.
IMAGE_BUTTON_TEXT_REVIEW
- Repérez le bouton image indiqué par le rapport et regardez l’image.
- Vérifiez si l’image contient des mots ou des lettres, et pas seulement une icône.
- Si c’est le cas, déterminez si ce texte pourrait être un vrai texte mis en forme avec CSS, ou si son apparence est essentielle (un logo).
Réussite. L’image ne contient pas de texte, seulement une icône ou une illustration, ou le texte est un logo ou est essentiel pour une autre raison.
Échec. Le bouton affiche son libellé sous forme de texte dans une image alors qu’il pourrait s’agir d’un vrai texte, ce qui ne respecte pas le critère WCAG 1.4.5.
SVG_IMAGE_TEXT_REVIEW
- Repérez l’image indiquée par le rapport et regardez le texte qui y est dessiné.
- Déterminez s’il s’agit d’un logo ou d’un logotype, ou d’un texte comme un titre, une phrase ou un libellé.
- S’il ne s’agit pas d’un logo, déterminez si le texte pourrait être un vrai texte mis en forme avec CSS, ou si son apparence est essentielle.
Réussite. Le texte est un logo ou son apparence est essentielle (ou il n’est qu’accessoire, comme les nombres des axes d’un graphique).
Échec. L’image dessine un texte qui pourrait être un vrai texte et n’est pas un logo, ce qui ne respecte pas le critère WCAG 1.4.5.