web-dev-qa-db-fra.com

Les liens html avec des images doivent-ils avoir à la fois des attributs title et alt?

Je comprends qu'il est généralement préférable d'avoir des balises de titre pour les hyperliens et des balises alt pour les images. Cela est bon pour plusieurs raisons: informations supplémentaires pour les utilisateurs à faible bande passante, informations supplémentaires pour les technologies d'assistance, meilleur affichage des résultats de recherche des moteurs de recherche, etc.

Ma question est quand une image est un hyperlien, c'est-à-dire.

<a href="google.com><img src="google.gif"/></a>

Devrait-on le faire avec l'attribut a title

<a href="google.com" title="Google"><img src="google.gif"/></a>

ou avec la balise img alt

<a href="google.com"><img src="google.gif" alt="Google/></a>

ou avec les deux

<a href="google.com" title="Google"><img src="google.gif" alt="Google"/></a>

ou avec les deux ayant les deux

<a href="google.com" title="Google" alt="Google"><img src="google.gif" title="Google" alt="Google"/></a>

Déplacé ici du site qa. fermé là-bas.

usabilityaccessibilityhtmlhyperlinkstitle
8
Michael Durrant

Les deux

Cependant, la description alt dans l'image doit être pour la description du lien , pas pour l'image elle-même

De Accessibilité et convivialité à Penn State: Conseils sur les balises ALT pour HTML

le terme "balise ALT" est un terme courant utilisé pour désigner l'attribut ALT dans la balise IMG.

  • Chaque fois que vous utilisez une image, assurez-vous d'inclure une balise ALT ou du texte ALT dans la balise IMG. Cela fournira une alternative en texte clair à l'image pour les utilisateurs de lecteurs d'écran. WCAG 2.0 Guideline 1.1.1 .— "Tout le contenu non textuel qui est présenté à l'utilisateur a une alternative textuelle qui remplit le même objectif."
  • La description dans la balise ALT doit être significative dans le contexte de la page Web, en particulier:
    • Les images utilisées comme liens doivent avoir un texte alternatif (ou "alt") décrivant la destination du lien, pas l'image elle-même.
    • Le texte alternatif avec des acronymes doit être écrit avec des espaces entre les lettres. Par exemple, (lu par un lecteur d'écran comme "ITS at PSU") est préférable à (lu comme "It’s at Sue").
    • Les images utilisées comme espaceurs ou dans les barres d'outils doivent avoir une balise ALT vide (c'est-à-dire). Les lecteurs d'écran sauteront simplement les images avec des balises ALT vides.
    • Les images qui incluent déjà une description textuelle dans le texte principal de la page peuvent avoir une balise ALT récapitulative.
  • Si vous souhaitez fournir une info-bulle pour les navigateurs visuels, utilisez la balise TITLE en plus de la balise ALT, car elle est prise en charge dans la plupart des navigateurs. Par exemple:
  • Bien qu'il n'y ait pas de restriction de longueur officielle sur la longueur du texte alternatif, de nombreux experts recommandent 125 caractères ou moins en raison des restrictions du lecteur d'écran JAWS. De nombreuses versions de JAWS décomposent des parties de texte plus longues en blocs de 125 caractères, ce qui peut être déroutant pour les utilisateurs.
  • Pour une image particulièrement complexe, comme un graphique, une équation ou un diagramme, un lien vers une description textuelle étendue doit également être inclus.
  • Les images utilisées comme boutons ou étiquettes doivent utiliser des polices lisibles pour un large segment du public (probablement 12 pixels/point ou plus).
  • Dans certains cas, vous pouvez remplacer les images décoratives ou liées à la mise en page par des éléments HTML stylisés, tels que HR ou DIV, pour lesquels vous modifiez les couleurs d'arrière-plan et spécifiez des images d'arrière-plan.

L'article ci-dessus explique clairement l'utilisation de alt sur les liens d'image. Cependant, la partie titre est incomplète dans l'article d'origine, mais vous devez utiliser les deux, car l'un d'eux vous aidera avec les technologies d'assistance et l'accessibilité, tandis que le title sur les liens vous aidera avec cela, mais aussi avec meilleure lisibilité et référencement.

Préoccupations supplémentaires

En plus de ce qui précède, vous ne devriez jamais compter uniquement sur title, voir L'attribut title

Il est actuellement déconseillé de se fier à l'attribut title car de nombreux agents utilisateurs n'exposent pas l'attribut de manière accessible, comme l'exige cette spécification (par exemple, en exigeant un périphérique de pointage tel qu'une souris pour faire apparaître une info-bulle, ce qui exclut les utilisateurs utilisant uniquement le clavier et utilisateurs tactiles, comme toute personne possédant un téléphone ou une tablette moderne).

mais ... en ne l'ajoutant pas, vous obtenez ceci:

Si cet attribut est omis d'un élément , cela implique que l'attribut title de l'élément HTML ancêtre le plus proche avec un ensemble d'attributs title est également pertinent pour cela élément. La définition de l'attribut l'emporte, indiquant explicitement que les informations consultatives des ancêtres ne sont pas pertinentes pour cet élément. La définition de l'attribut sur la chaîne vide indique que l'élément n'a aucune information consultative.

En bref

Vous devez utiliser les deux éléments dans la mesure du possible, mais vous devez suivre certaines spécifications et règles spéciales.

7
Devin