Quel devrait être le texte ALT pour une image qui est aussi un lien?
Une image alt="" le texte doit contenir des informations sur cette image dans le contexte de la page. Par exemple, si vous avez un article sur les chats sur des planches à roulettes, puis une photo du chat sur sa planche à roulettes, vous lui donnerez probablement le texte alternatif de alt="Fluffy pulling some mad tricks on his pimped-out board".
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Cependant, que devrait-il se passer lorsque cette image est un lien vers une page (comme la page de chat Wikipedia)?
Je ne pense pas qu'il soit utile d'utiliser l'attribut title ici parce que les lecteurs d'écran ignorent simplement que lorsqu'un attribut alt existe - les seules personnes qui verraient l'attribut title sont les utilisateurs de souris qui survolent l'image, ce qui exclut également les utilisateurs du clavier uniquement. Ce n'est pas vraiment un avantage pour l'accessibilité d'inclure un titre dans cette situation (dans l'ensemble, l'attribut title est vraiment un peu inutile).
Alors, que doit dire le texte ALT de l'image dans ce cas?
WCAG 1.1 stipule:
Fournissez des alternatives textuelles pour tout contenu non textuel afin qu'il puisse être changé sous d'autres formes dont les gens ont besoin, comme les gros caractères, le braille, la parole, les symboles ou un langage plus simple.
Par conséquent, en lui donnant le texte alternatif de cat article page on Wikipedia est incorrect car cela ne décrit pas l'image, ni skateboarding cat image that links to the wikipedia article car le texte de remplacement doit faire référence à l'image elle-même, et non au lien qui lui est associé.
HTML5 (Recommandation du candidat) contient la section " Exigences pour fournir du texte comme alternative aux images ", qui inclut le cas " n lien ou bouton ne contenant qu'une image ":
Lorsqu'un élément
aqui est un lien hypertexte ou un élémentbutton, n'a pas de contenu textuel mais contient une ou plusieurs images, incluez du texte dans les attributsaltqui transmettent ensemble l'objectif du lien ou du bouton.
( HTML5: Techniques pour fournir des alternatives de texte utiles (Working Draft) a presque le même texte .)
Le contenu alt ne doit donc pas décrire l'image, mais la cible du lien.
Techniques pour WCAG 2.0 (Working Draft) contient la technique " H30: Fournir un texte de lien qui décrit le but d'un lien pour les éléments d'ancrage ":
Lorsqu'une image est le seul contenu d'un lien, l'alternative textuelle de l'image décrit la fonction unique du lien.
Cette technique particulière (informative et non normative!) Est donc d'accord.
À mon humble avis, cela a du sens dans de nombreux cas (la plupart?) (Par exemple, pour les exemples donnés dans la spécification HTML5), mais je pense qu'il existe des cas où cette exigence conduirait à une mauvaise expérience utilisateur.
Par exemple, un article de blog contenant uniquement une image. Cette image est liée à une version haute résolution de celle-ci. Le lien ouvre directement le fichier image, aucune page HTML n'est impliquée:
<a href="mona-Lisa_high-res.jpg">
<img src="mona-Lisa_medium.jpg" alt="…" />
</a>
Suivant l'exigence HTML5, le contenu alt pourrait ressembler à
JPG haute résolution de "Mona Lisa"
Mais maintenant, le contenu réel de l'image n'est plus donné sous forme de texte, car l'élément img devrait contenir le texte alternatif décrivant la cible du lien, qui serait la même image en plus haute résolution. Mais cette image haute résolution ne peut pas contenir de texte alternatif, car elle ne fait pas partie d'un document HTML.
Donc je suppose que nous devons faire attention lors de l'ajout de liens uniquement image: si le texte alternatif d'une image serait différent lorsqu'il est lié vs non lié, nous devons nous assurer que la cible du lien décrit l'image. Sinon (par exemple, pour les liens de fichiers directs), nous devons modifier la configuration, par exemple:
- ne liez pas directement à l'image, mais plutôt à une page HTML contenant cette image
- ne liez pas l'image elle-même, ajoutez plutôt un lien texte séparé
- n'incluez pas uniquement l'image dans le lien, mais ajoutez-y du texte descriptif (il ne contient donc plus "rien d'autre qu'une image")
Pour reformuler le problème que vous essayez de résoudre: vous voulez qu'un utilisateur qui a un lecteur d'écran (ou un autre type de navigateur qui manque d'images) puisse dire où va le lien. Je pense que vous avez oublié que vous essayez de résoudre un problème plus important: vous voulez que tous vos utilisateurs soient en mesure de dire où va votre lien.
Normalement, vous y parvenez en faisant décrire au corps du lien la cible du lien: j'ai écrit un article précédent sur ce sujet. BBC News a écrit à ce sujet. Cliquez ici pour une photo de moi serrant la main de la reine . Notez que j'ai dit "corps du lien", pas "texte du lien". Lorsque le lien est une image, il doit également indiquer à l'utilisateur à quoi s'attendre.
Dans votre exemple, il est clair à partir d'une photo de Fluffy que le lien ira à plus d'informations à son sujet, mais il n'est pas clair qu'il ira à Wikipedia.
Si votre corps de lien est une image, et il est clair à partir de l'image où le lien va, et le texte alternatif décrit l'image, alors il doit être clair à partir du texte alternatif aussi. Le texte alternatif n'a rien à faire supplémentaire pour décrire où va le lien. D'un autre côté, si votre corps de lien est une image et qu'il n'est pas clair où le lien va, alors vous devez ajouter une légende même pour le les utilisateurs qui verront l'image.
Dans votre exemple, vous pourriez avoir Fluffy skateboarding et inclure le texte, "Fluffy est présenté sur Wikipedia", comme légende à l'intérieur du corps du lien. Si vous faites cela, alors votre texte alternatif toujours n'a rien à faire de plus, car tous les utilisateurs verront la légende.
Si, pour une raison quelconque, vous ne voulez pas rendre la cible du lien claire pour les utilisateurs qui peuvent voir des images - peut-être avez-vous peur que le texte descriptif encombre la page, et la beauté est plus importante pour vous que la convivialité - vous pourriez être tenté d'utiliser l'attribut a de la balise title (et non les balises img) pour ajouter des informations supplémentaires. Ne vous embêtez pas, car cela n'est pas utile pour les lecteurs d'écran. Cet article vous montre comment il échoue (celui-ci est un véritable lien) et décrit une solution de contournement terrible qui utilise CSS pour afficher du texte supplémentaire à un lecteur d'écran ou un autre navigateur de texte, mais le cacher d'un graphique navigateur. Bleurgh. Mais le fait est que si vous utilisez cette technique, vous toujours n'avez pas besoin de changer le texte alternatif car c'est un lien: votre texte alternatif décrit le l'image, et votre légende cachée décrit où va le lien.
En résumé, cette question est juste un cas spécial de la question, "Comment puis-je faire savoir à mes utilisateurs où une image renvoie?" En réfléchissant au point de vue de l'utilisateur depuis la navigation, nous avons trouvé trois façons de le faire, par ordre de préférence: -
- Choisissez une image qui la rend évidente, puis utilisez le texte alternatif pour décrire l'image.
- Si vous ne pouvez pas le rendre évident à partir de l'image, ajoutez (à l'intérieur du corps du lien) une légende qui rend la relation claire entre l'image et le lien, et utilisez le texte alternatif pour décrire l'image.
- Si les contraintes de mise en page vous empêchent d'ajouter une légende, ajoutez une légende invisible décrivant le lien uniquement pour les navigateurs de texte et les lecteurs d'écran, et utilisez le texte de remplacement pour décrire l'image.
Quelle que soit l'alternative que vous prenez, la réponse à votre question littérale est la même: le texte alternatif doit toujours décrire ou représenter l'image.
Si vous le souhaitez, cette hiérarchie est parallèle à la conception d'un bouton dans une interface graphique: la meilleure option est de rendre évident ce que fait le bouton; vous envisagez ensuite d'ajouter une info-bulle; et en dernier recours, vous l'expliquez dans le fichier d'aide ou le manuel.
Donc, pour résumer votre exemple, nous commençons par réfléchir à la façon de rendre un article Wikipedia évident pour l'utilisateur. Il n'est pas évident que votre photo de Fluffy soit liée à Wikipédia, même si la page Wikipédia utilise la même photo. Alors ne faites pas le lien photo vers Wikipedia. Avoir un lien vers Wikipedia ailleurs, en utilisant une icône Wikipédia (et le texte alternatif "Wikipedia"), ou peut-être une capture d'écran de la photo Fluffy en contexte sur la page (et le texte alternatif "Fluffy est présenté dans l'article Wikipedia sur les chats" ou similaire). De cette façon, vous n'avez pas besoin d'avoir recours à une légende descriptive visible ou invisible, et vous avez rendu l'expérience utilisateur plus agréable pour tous vos utilisateurs, pas seulement ceux sur les lecteurs d'écran. Vous pouvez toujours inclure la photo Fluffy si vous le souhaitez, mais cela ne doit pas du tout être un lien.
L'image fournit-elle réellement des informations supplémentaires (précieuses) qui ne sont pas déjà disponibles dans le texte environnant? Dans l'exemple de la question, le texte entourant l'image décrit comment le chat aime tirer des tours sur sa planche à roulettes. Je ne pense pas que l'image qui l'accompagne ait besoin d'une autre description, presque identique. C'est redondant.
Lorsque WCAG parle de la nécessité de fournir une alternative textuelle qui décrit l'image, cela signifie vraiment fournir une alternative textuelle qui sert le même but que l'image. Je pense que le but principal de l'image dans ce contexte est d'agir comme un lien, donc j'utiliserais l'attribut alt pour décrire la cible du lien, pas le contenu de l'image.