J'utilise Twitter Bootstrap pour créer un site, et une grande partie de ses fonctionnalités dépend de l'encapsulation des choses <a>
, même si elles vont simplement exécuter Javascript. J'ai eu des problèmes avec la href="#"
tactique recommandée par la documentation de Bootstrap, alors j'essayais de trouver une solution différente.
Mais ensuite, j'ai essayé de supprimer href
complètement l' attribut. J'utilise et j'ai <a class='bunch of classes' data-whatever='data'>
Javascript pour gérer le reste. Et il fonctionne.
Pourtant, quelque chose me dit que je ne devrais pas faire ça. Droite? Je veux dire, techniquement, <a>
c'est censé être un lien vers quelque chose, mais je ne suis pas tout à fait sûr de savoir pourquoi c'est un problème. Ou est-ce?
html
anchor
semantic-markup
htmlbutton
Zacqary
la source
la source
Réponses:
L'
<a>
élément nchor est simplement une ancre vers ou depuis un contenu. À l'origine, la spécification HTML autorisait les ancres nommées (<a name="foo">
) et les ancres liées (<a href="#foo">
).Le format d'ancrage nommé est moins couramment utilisé, car l'identificateur de fragment est maintenant utilisé pour spécifier un
[id]
attribut (bien que pour la compatibilité ascendante, vous puissiez toujours spécifier des[name]
attributs). Un<a>
élément sans[href]
attribut est toujours valide .En ce qui concerne la sémantique et le style, l'
<a>
élément n'est pas un lien (:link
) à moins qu'il n'ait un[href]
attribut. Un effet secondaire de ceci est qu'un<a>
élément sans[href]
ne sera pas dans l'ordre de tabulation par défaut.La vraie question est de savoir si l'
<a>
élément seul est une représentation appropriée de a<button>
. Sur le plan sémantique, il existe une nette différence entre alink
et abutton
.Un bouton est quelque chose qui, lorsqu'il est cliqué, provoque une action.
Un lien est un bouton qui provoque une modification de la navigation dans le document courant. La navigation qui se produit peut être le déplacement dans le document dans le cas des identificateurs de fragment (
#foo
) ou le déplacement vers un nouveau document dans le cas des urls (/bar
).Les liens étant un type spécial de bouton, leurs actions ont souvent été remplacées pour exécuter des fonctions alternatives. Continuer à utiliser une ancre comme bouton est acceptable du point de vue de la cohérence, bien que ce ne soit pas tout à fait précis sémantiquement.
Si vous êtes préoccupé par la sémantique et l'accessibilité de l'utilisation d'un
<a>
élément (ou<span>
, ou<div>
) comme bouton, vous devez ajouter les attributs suivants:Le rôle de bouton indique à l'utilisateur que l'élément particulier est traité comme un bouton comme un remplacement pour la sémantique que l'élément sous-jacent peut avoir.
Pour les éléments
<span>
et<div>
, vous pouvez ajouter des écouteurs de clé JavaScript pour Spaceou Enterpour déclencher l'click
événement.<a href>
et les<button>
éléments le font par défaut, mais pas les éléments sans bouton. Parfois, il est plus logique de lier leclick
déclencheur à une clé différente. Par exemple, un bouton "Aide" dans une application Web peut être lié à F1.la source
[role="button"]
ne fait rien de concret, vous devez quand même écouter l'événement de clic (mais vous le feriez quand même pour créer un bouton JS). Il est destiné à être utilisé pour la navigation assistée (ou lecteurs d'écran) afin que le lecteur d'écran sache représenter l'élément sous forme de bouton plutôt que sa valeur sémantique d'origine. L'ajout[tabindex]
ajoute l'élément à l'ordre de tabulation. Dans des circonstances particulières, vous pourriez ne pas vouloir / avoir besoin du bouton navigable dans l'ordre de tabulation, c'est donc un attribut facultatif. Les éléments qui sont déjà des boutons n'ont pas besoin[role="button"]
car ils sont redondants.[href]
, vous devriez probablement utiliser un<span>
pour le bouton.Je pense que vous pouvez trouver votre réponse ici: une balise d'ancrage sans l'attribut href est-elle sûre?
De plus, si vous ne voulez pas d'opération de lien avec href, vous pouvez l'utiliser comme:
la source
javascript:undefined
<a href="javascript:;">text</a>
?javascript:;
utilisé pour casser des choses comme les effets de survol et même les animations gif dans IE6. Et pour aucune opération de lien, il existe des éléments HTML dédiés commebutton
. Dans le même temps, des éléments tels que les liens AJAX peuvent utiliser leurshref
s pour des actions de secours si JS échoue.Oui, il est valide d'utiliser la balise d'ancrage sans
href
attribut.Oui, vous pouvez utiliser
class
et d' autres attributs, mais vous ne pouvez pas utilisertarget
,download
,rel
,hreflang
ettype
.Quant à la partie « Dois-je? », Voir la première citation: « où un lien aurait pu autrement être placé s'il avait été pertinent ». Je demanderais donc " Si je n'avais pas de JavaScript, est-ce que j'utiliserais cette balise comme lien? " Si la réponse est oui, alors oui, vous devriez utiliser
<a>
sanshref
. Si non, je l'utiliserais toujours, car la productivité est plus importante pour moi que la sémantique des cas de pointe, mais ce n'est que mon opinion personnelle.De plus, vous devez faire attention aux différents comportements et styles (par exemple, pas de soulignement, pas de pointeur, pas de a
:link
).Source: recommandation HTML5 du W3C
la source
C'est valable. Vous pouvez, par exemple, l'utiliser pour afficher des modaux (ou des éléments similaires qui répondent à
data-toggle
et desdata-target
attributs).Quelque chose comme:
Ici, j'utilise l'icône font-awesome, qui est mieux comme une
a
balise que comme unbutton
, pour afficher un modal. En outre, le paramètrerole="button"
transforme le pointeur en un type d'action. Sans l'unhref
ou l' autrerole="button"
, le pointeur du curseur ne change pas.la source
aria-hidden
? L'icône, peut-être, mais les utilisateurs de lecteurs d'écran ne devraient pas avoir une expérience diminuée.