L'utilisation de l'attribut alt pour le texte en tant que graphique est-elle correcte?
Il existe plusieurs façons de présenter du texte sur votre page Web exactement dans la police choisie par votre concepteur; comme une image, un hack flash, un hack javascript, des polices dynamiques. Mais à ce jour, la seule chose qui semble fonctionner sur toutes les plates-formes est l'ancienne solution text-as-graphics. C'est un coup de tête, bien sûr, mais à des fins d'accessibilité, l'utilisation d'une image contenant le texte comme attribut alt est-elle considérée comme correcte? Les utilisateurs malvoyants obtiendraient le texte, tout comme les moteurs de recherche. Ou est-ce que je manque quelque chose?
Avec quelques mises en garde.
- Si vous changez l'image à l'avenir, l'alt attribut doit également être conservé.
- Il semblerait que les moteurs de recherche attribuent une valeur plus élevée au texte réel qu'une image avec un attribut alt.
- OMI, si vous l'utilisez pour la navigation, vous feriez mieux d'utiliser @ font-face ou JavaScript pour améliorer un menu texte plutôt que de le remplacer par des images depuis le début.
Voilà pourquoi alt est là, pour les lecteurs d'écran et les robots
Si vous incluez des images (via img) en HTML, toujours utilisez le alt attribut ( parfois avec une valeur vide).
Si l'image contient du texte et que ce texte est (une partie du) contenu pertinent que vous souhaitez transmettre, incluez ce texte dans le alt valeur.
mais à des fins d'accessibilité, l'utilisation d'une image contenant le texte comme attribut alt est-elle considérée comme correcte?
Non. Bien que ce ne soit pas un obstacle pour un utilisateur aveugle ou un navigateur de texte, les utilisateurs dyslexiques ou malvoyants (qui ont activé les images) peuvent avoir des problèmes avec les images de texte:
- Les utilisateurs ne peuvent pas ajuster la taille de la police, la hauteur de la ligne, l'espacement des lettres.
- Les utilisateurs ne peuvent pas changer la famille de polices.
- Les utilisateurs ne peuvent pas modifier les couleurs/le contraste.
- Les utilisateurs ne peuvent pas sélectionner le texte (par exemple, pour le copier-coller). (comme noté par Kit Grose)
Probablement pas beaucoup de problème pour le texte court (un seul mot, un titre très court, un bouton d'appel à l'action,…), mais cela peut être un obstacle à l'accessibilité s'il est utilisé pour un texte plus long.
L'un des plus gros inconvénients du texte en tant que graphique est son incapacité à évoluer avec la taille du texte (remarque: taille du texte, pas zoom). Le redimensionnement de l'image en ems pourrait aider à atténuer cela.
Gardez également à l'esprit que la maintenabilité souffre considérablement lors de l'utilisation d'images, à moins qu'elles ne soient générées dynamiquement.
Et, il est assez inefficace de servir une image lorsque tout ce que vous voulez est une police personnalisée - la taille du fichier d'une image est beaucoup plus grande que le texte équivalent.
Je n'y vois aucun problème. Je n'ai jamais entendu personne dire que c'était une mauvaise idée. Mais essayez d'éviter ou procédez comme suit:
- faire du contenu entier d'une page une image (erreur courante commise par des gens qui ne savent pas ce qu'ils font) - cela rend difficile l'analyse de presque tout, y compris les moteurs de recherche
- essayez de l'éviter autant que possible - il est toujours préférable d'avoir du texte pour des choses que des images; cela facilite simplement tout (copie d'un morceau de texte, référencement, etc., etc.)
- ajoutez à la fois une propriété alt et un titre - cela garantit que lorsque les gens survoleront l'image, ils verront l'info-bulle (car différents navigateurs en affichent d'autres); Je le fais surtout sur des images qui sont des liens
Comme d'autres l'ont dit, si vous utilisez cette approche, vous devez fournir un texte alternatif, cependant, je vous recommande fortement de ne pas le faire.
Le zoom sera rompu - Les images raster ne sont pas évolutives à des tailles plus grandes.
Les images prennent plus d'espace que le texte, cela augmentera considérablement le temps de chargement de la page.
Les téléspectateurs qui changent les couleurs du navigateur, par exemple pour des raisons de lisibilité, passez à la lumière à contraste élevé sur l'obscurité, ne verra pas les images correctement et ne verra pas l'alt.
La fonctionnalité de copier-coller sera rompue (les utilisateurs ne pourront pas copier de texte et le coller dans un document en tant que texte).
Mise en page et réactivité - La lisibilité sur l'appareil mobile peut être rompue - Si le texte n'est pas du texte, les navigateurs peuvent ne pas être en mesure de le diviser différemment en lignes afin de l'adapter à des écrans plus petits.
Si vous placez chaque mot ou phrase dans sa propre image, vous pouvez améliorer la mise en page, cependant, vous pouvez casser l'analyse de texte (SEO).
Il existe des moyens généralement pris en charge pour appliquer les polices d'affichage à l'aide de fichiers CSS et de polices. Si certains navigateurs anciens ne le supportent pas, vous ne devriez pas faire souffrir tous les utilisateurs de navigateurs modernes.
La valeur du texte alternatif diminue du point de vue du référencement, il semble donc que nous pouvons tous nous concentrer sur l'accessibilité et optimiser les textes alternatifs pour les lecteurs d'écran.
Pour autant que je sache, cela n'a qu'une influence en pourcentage sur votre classement SERP