Est-il correct d'utiliser la balise alt pour un lien d'ancrage?


124

Est-il correct d'utiliser la balise alt pour un lien d'ancrage, quelque chose comme

<a href="#" class="test" alt="Something" src="sfasfs" ></a>

Réponses:


130

La meilleure réponse à ces choses est de regarder la spécification officielle:

  1. aller à la spécification: https://www.w3.org/TR/html5/

  2. recherchez " aélément": https://www.w3.org/TR/html5/text-level-semantics.html#the-a-element

  3. cochez "Attributs de contenu", qui répertorie tous les attributs autorisés pour l' aélément:

    • Attributs globaux
    • href
    • target
    • download
    • rel
    • hreflang
    • type
  4. vérifiez les "attributs globaux" liés: https://www.w3.org/TR/html5/dom.html#global-attributes

Comme vous le verrez, l' altattribut n'est pas autorisé sur l' aélément.
Vous remarquerez également que l' srcattribut n'est pas autorisé non plus.

En validant votre HTML , des erreurs comme celles-ci vous sont signalées.


Notez que ce qui précède concerne HTML5 , qui est la norme HTML du W3C à partir de 2014 . En 2016, HTML 5.1 est devenu le prochain standard HTML . La recherche des attributs autorisés fonctionne de la même manière. Vous verrez que l' aélément peut avoir un autre attribut HTML 5.1: rev.

Vous pouvez trouver toutes les spécifications HTML (y compris la dernière norme) sur l' état actuel du HTML du W3C .


2
Je ne vois pas l' titleattribut dans les aattributs globaux est-il correct d'utiliser un tel titleattribut dans le aou non?
Yousef Altaf

1
@YousefAltaf: Sur quelle page regardez-vous? Celui lié, les attributs globaux , les listes title.
unor

Je l'ai donc répertorié sous les attributs globaux, mais cela affecte-t-il la qualité de la page si je l'utilise ou non?
Yousef Altaf

@YousefAltaf: C'est une question différente, qu'il vaut mieux ne pas discuter ici. Reportez-vous à sa définition . Si vous avez encore des questions à ce sujet, n'hésitez pas à créer une question distincte (mais mieux vaut rechercher avant si elle n'a pas déjà été posée).
unor le

4
Répondez comme signet "Comment rechercher des attributs HTML". Merci.
Codage du

59

Pour les ancres, vous devez utiliser le titre à la place. alt n'est pas un attribut valide d'un. Voir http://w3schools.com/tags/tag_a.asp


@FabioPoloni Merci, je m'attendais à ce que tout le monde puisse trouver le lien ci-dessous sur la page :-)
tomis

Je pensais que si quelqu'un ne savait pas grand chose sur ce sujet, il ne le trouverait pas ;-)
Fabio Poloni

8
Cette information se trouve être correcte chez w3schools, mais w3schools n'est pas officiel et n'est pas fiable, voir w3fools.com
Jukka K. Korpela

thx Guys ... à part cela, mon besoin était purement basé sur les normes d'accessibilité ainsi que sur la suppression des frais généraux de performance. J'ai utilisé une image spirte, en même temps voulu donner un attribut alt, ce qui ne pouvait pas faire en utilisant des images de fond. Au lieu de cela, j'ai une solution de contournement qui a aidé ..
user2067736

1
"title" n'est plus sur w3schools. Mais vous pouvez utiliser title, car il s'agit d'un attribut global: w3.org/TR/html5/dom.html#global-attributes
rosell.dk

28

"title" est largement implémenté dans les navigateurs. Essayer:

<a href="#" title="hello">asf</a>

3
Voici à quoi devrait ressembler une réponse au lieu de la réponse de 10 minutes ci-dessus. Mais cette réponse devrait aussi avoir le lien: w3schools.com/tags/att_global_title.asp
mikael1000

Je conviens que ce qui précède ne répond pas à la question, mais selon elle, titleest incorrect selon la spécification HTML5 (même si la plupart des navigateurs l'implémenteront).
felwithe

6

Non, un altattribut (ce serait un attribut, pas une balise) n'est autorisé pour un aélément dans aucune spécification HTML ou brouillon. Et il ne semble pas non plus reconnu par aucun navigateur comme ayant une signification.

C'est un peu mystérieux pourquoi les gens essaient de l'utiliser, mais l'explication probable est qu'ils le font en analogique avec un altattribut pour les imgéléments, s'attendant à voir une «info-bulle» au survol de la souris. Il y a deux choses qui ne vont pas avec cela. Tout d'abord, chaque élément a ses propres attributs, définis dans les spécifications de chaque élément. Deuxièmement, le rendu «info-bulle» des altattributs dans certains anciens navigateurs est / était une bizarrerie ou même un bogue, plutôt que quelque chose à prévoir; l' altattribut est censé être présenté à l'utilisateur si et seulement si l'image elle-même n'est pas présentée, pour une raison quelconque.

Pour créer une «info-bulle», utilisez titleplutôt l' attribut ou, mieux, Google pour les «info-bulles CSS» et utilisez les info-bulles basées sur CSS de votre préférence (elles peuvent être caractérisées comme des «couches» cachées qui deviennent visibles au survol de la souris).


Comment utiliser des liens créés par programmation à l'aide des info-bulles basées sur CSS?
Salvador Valencia

6

Vous devez utiliser l'attribut title pour les balises d'ancrage si vous souhaitez appliquer des informations descriptives de la même manière que vous le feriez pour un attribut alt. L'attribut title est valide sur les balises d'ancrage et n'a d'autre objectif que de fournir des informations sur la page liée.

Le W3C recommande que la valeur de l'attribut title corresponde à la valeur du titre du document lié, mais ce n'est pas obligatoire.

http://www.w3.org/MarkUp/1995-archive/Elements/A.html


Alternativement, et probablement plus avantageux, vous pouvez utiliser l'attribut d'accessibilité ARIA aria-label(à ne pas confondre avec aria-labeledby). aria-labelremplit la même fonction que l'attribut alt pour les images, mais pour les éléments non-image et inclut une certaine mesure d'optimisation depuis votre optimisation pour les lecteurs d'écran.

http://www.w3.org/WAI/GL/wiki/Using_aria-label_to_provide_labels_for_objects


Cependant, si vous souhaitez décrire une balise d'ancrage, il est généralement approprié d'utiliser la balise rel ou rev, mais vous êtes limité à des valeurs spécifiques, elles ne doivent pas être utilisées pour des descriptions lisibles par l'homme.

Rel sert à décrire la relation de la page liée à la page courante. (par exemple, si la page liée est la suivante dans une série logique, ce serait rel = next)

L'attribut rev est essentiellement la relation inverse de l'attribut rel. Rev décrit la relation entre la page actuelle et la page liée.

Vous pouvez trouver une liste de valeurs valides ici: http://microformats.org/wiki/existing-rel-values


5

J'ai utilisé le titre et ça a marché!

L'attribut title donne le titre du lien. À une exception près, il est purement consultatif. La valeur est du texte. L'exception concerne les liens de feuilles de style, où l'attribut title définit des jeux de feuilles de style alternatifs.

<a class="navbar-brand" href="http://www.alberghierocastelnuovocilento.gov.it/sito/index.php" title="sito dell'Istituto Ancel Keys">A.K.</a>

1

Je suis surpris de voir toutes les réponses indiquant que l'utilisation de l' altattribut dans la abalise n'est pas valide . C'est absolument faux.

Html ne vous bloque en utilisant aucun attribut:

<a your-custom-attribute="value">Any attribute can be used</a>

Si vous demandez s'il est sémantiquement correct d'utiliser l' altattribut, aje dirai:

NON. Il est utilisé pour définir la description de l'image <img alt="image description" />.

C'est une question de ce que vous feriez avec les attributs. Voici un exemple:

a::after {
  content: attr(color); /* attr can be used as content */
  display: block;
  color: white;
  background-color: blue;
  background-color: attr(color); /* This won't work */
  display: none;
}
a:hover::after {
  display: block;
}
[hidden] {
  display: none;
}
<a href="#" color="red">Hover me!</a>
<a href="#" color="red" hidden>In some cases, it can be used to hide it!</a>

Encore une fois, si vous demandez s'il est sémantiquement correct d'utiliser un attribut personnalisé, je dirai:

Non. Utilisez des data-*attributs pour son utilisation sémantique.


Oups, la question a été posée en 2013.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.