web-dev-qa-db-fra.com

Utilisation correcte du texte alternatif lorsque l'image est un lien

Dans une situation où une image est une caractéristique importante de la page, mais agit également comme un lien vers une page contenant une version haute résolution, comment sa balise alt doit-elle être remplie.

Dans ce cas, il doit remplir deux objectifs:

  1. Une description de l'image (car elle est importante dans le contexte de la page)
  2. Une indication du but/de la destination du lien

Comment les deux devraient-ils être remplis dans la balise alt, et s'ils ne peuvent pas l'être tous les deux, lesquels devraient être prioritaires?

Remarque: je suis particulièrement intéressé par les cas décrits ci-dessus dans lesquels les deux objectifs s'appliquent. Je ne suis pas intéressé par les situations où l'image fonctionne uniquement comme une image de lien vers l'événement principal.

Remarque supplémentaire: J'implémente un design sur lequel je n'ai pas le dernier mot. Je connais les directives de base sur l'accessibilité, mais comme c'est souvent le cas, personne d'autre sur le projet ne se soucie de rendre le site accessible, donc je reste à essayer de faire de mon mieux dans les limites données.

Alors ne répondez pas ou ne commentez pas pour me dire:

  1. Que l'image devrait plutôt être un lien texte
  2. Que le lien doit contenir du texte ainsi qu'une image
accessibilityhyperlinksimage
1
Undistraction

Ma recommandation serait de définir:

  • l'attribut alt de l'image pour spécifier un équivalent de texte pour l'image

  • l'attribut title du lien pour décrire la ressource à laquelle il est lié

    <A href="https://lebowskifest.com/fests/lebowski-fest-new-york"
  title="Lebowski Fest New York in August 2014">
    <IMG src="http://cdn2.screenjunkies.com/wp-content/uploads/2013/06/Screen-shot-2013-06-30-at-4.30.03-PM.png"
      alt="Walter Sobchak indicating disapproval.">
</A>

Le W3C a publié Techniques for WCAG 2.0 et y recommande également de compléter le texte du lien avec l'attribut title . Cela dit, ne pas avoir de texte d'ancrage est un faux pas d'accessibilité. Si cela est important pour vous, ajoutez un texte d'ancrage et cachez-le en utilisant CSS . Il existe de meilleures façons de gérer le travail CSS derrière cette tactique, mais je voulais vous lier aux instructions du W3C pour vous aider à comprendre l'intention derrière elle.

2
Tom Griffin

Le texte ALT a un double objectif.

Objectif 1:

Une simple recherche sur Google pour "but de la balise alt" montre la réponse suivante ...

Le texte alternatif dans la balise ALT doit indiquer à l'utilisateur le contenu et le but d'une image. Le texte alternatif est accessible aux utilisateurs de lecteurs d'écran pour leur fournir un équivalent texte d'images. Dans les navigateurs visuels, le texte alternatif s'affiche lorsqu'une image est cassée ou lorsque toutes les images ont été désactivées.

Plus d'informations sur Accessibilité et convivialité

Objectif 2:

Le texte ALT est essentiel pour une présence en ligne efficace. Un vieil article " L'importance des attributs alt aka balises alt ou texte alt " couvre assez bien ce sujet.

Retour à votre réponse:

Vous avez raison, les deux doivent être couverts. Disons que vous avez une image d'une Bugatti Veyron 2011 avec un lien vers une image plus haute fidélité du même véhicule. Une façon de construire la balise ALT serait: "2011 Bugatti Veyron" ou similaire. Utilisez le lien "titre" pour identifier l'action derrière le lien "Suivez le lien pour voir une Bugatti Veyron 2011".

Différentes images nécessiteront un texte différent, à condition que ce soit sur l'image et le but de l'image agrandie/haute fidélité pour le visiteur.

0
Igorek