Gültig für die Verwendung von <a> (Ankertag) ohne href-Attribut?

151

Ich habe Twitter Bootstrap verwendet, um eine Website zu erstellen, und ein Großteil der Funktionalität hängt davon ab <a>, ob Dinge eingewickelt werden , auch wenn sie nur Javascript ausführen. Ich hatte Probleme mit der href="#"Taktik, die in der Dokumentation von Bootstrap empfohlen wird, und habe daher versucht, eine andere Lösung zu finden.

Aber dann habe ich versucht, das hrefAttribut ganz zu entfernen . Ich habe <a class='bunch of classes' data-whatever='data'>Javascript verwendet und den Rest erledigen lassen. Und es funktioniert.

Doch irgendetwas sagt mir, dass ich das nicht tun sollte. Richtig? Ich meine, technisch gesehen <a>soll es eine Verbindung zu etwas sein, aber ich bin mir nicht ganz sicher, warum dies ein Problem ist. Oder ist es?

Zacqary
quelle
1
Mögliches Duplikat von Ist ein Ankertag ohne das href-Attribut sicher?
behandeln

Antworten:

245

Das <a>nchor-Element ist einfach ein Anker für oder von einem Inhalt. Ursprünglich erlaubte die HTML-Spezifikation benannte Anker ( <a name="foo">) und verknüpfte Anker ( <a href="#foo">).

Das benannte Ankerformat wird seltener verwendet, da die Fragmentkennung jetzt zum Angeben eines [id]Attributs verwendet wird (obwohl Sie aus Gründen der Abwärtskompatibilität weiterhin [name]Attribute angeben können ). Ein <a>Element ohne [href]Attribut ist weiterhin gültig .

In Bezug auf Semantik und Stil ist das <a>Element kein link ( :link), es sei denn, es verfügt über ein [href]Attribut. Ein Nebeneffekt davon ist, dass ein <a>Element ohne [href]standardmäßig nicht in der Tabulatorreihenfolge angezeigt wird.

Die eigentliche Frage ist, ob das <a>Element allein eine angemessene Darstellung von a ist <button>. Auf semantischer Ebene gibt es einen deutlichen Unterschied zwischen a linkund a button.

Eine Schaltfläche bewirkt beim Klicken eine Aktion.

Ein Link ist eine Schaltfläche, die eine Änderung der Navigation im aktuellen Dokument bewirkt. Die auftretende Navigation kann sich bei Fragmentkennungen ( #foo) innerhalb des Dokuments oder bei URLs ( /bar) in ein neues Dokument bewegen .

Da Links eine spezielle Art von Schaltfläche sind, wurden ihre Aktionen häufig überschrieben, um alternative Funktionen auszuführen. Die weitere Verwendung eines Ankers als Schaltfläche ist vom Standpunkt der Konsistenz aus in Ordnung, obwohl sie semantisch nicht ganz genau ist.

Wenn Sie sich Gedanken über die Semantik und Zugänglichkeit der Verwendung eines <a>Elements (oder <span>oder oder <div>) als Schaltfläche machen, sollten Sie die folgenden Attribute hinzufügen:

<a role="button" tabindex="0" ...>...</a>

Die Schaltflächenrolle teilt dem Benutzer mit, dass das bestimmte Element als Überschreibung für die Semantik des zugrunde liegenden Elements als Schaltfläche behandelt wird.

Für <span>und <div>Elemente möchten Sie möglicherweise JavaScript-Schlüssel-Listener für das Ereignis hinzufügen Spaceoder Enteres auslösen click. <a href>und <button>Elemente tun dies standardmäßig, Elemente ohne Schaltflächen jedoch nicht. Manchmal ist es sinnvoller, den clickAuslöser an eine andere Taste zu binden . Beispielsweise kann eine "Hilfe" -Schaltfläche in einer Web-App gebunden sein F1.

zzzzBov
quelle
1
@Zacqary, [role="button"]macht nichts Konkretes, Sie müssen immer noch auf das Klickereignis warten (aber Sie würden das trotzdem tun, um eine JS-Schaltfläche zu erstellen). Es soll für die unterstützte Navigation (auch als Bildschirmleser bezeichnet) verwendet werden, damit der Bildschirmleser das Element als Schaltfläche und nicht als ursprünglichen semantischen Wert darstellen kann. Durch Hinzufügen wird [tabindex]das Element zur Tabulatorreihenfolge hinzugefügt. Unter bestimmten Umständen möchten / müssen Sie die Schaltfläche möglicherweise nicht in der Tabulatorreihenfolge navigieren, daher ist sie ein optionales Attribut. Elemente, die bereits Schaltflächen sind, werden nicht benötigt, [role="button"]da sie redundant sind.
zzzzBov
Ist es gültiges HTML, ein Ankertag ohne href und ohne Namen zu haben? In unserer App gibt es einige Löschlinks, die deaktiviert sind (daher kein href-Attribut), aber dem Benutzer weiterhin angezeigt werden.
Joshua Muheim
1
@JoshuaMuheim, ich hoffe es macht dir nichts aus, aber ich habe deine Frage als separate eigenständige Frage gepostet .
zzzzBov
Ich wollte nur einen Hinweis hinzufügen, dass, wenn Sie damit Schaltflächen für Javascript-Aktionen erstellen ... das vollständige Entfernen des href-Attributs auch dazu führt, dass Chrome (und wahrscheinlich auch andere Browser) den Cursor beim Mouseover nicht mehr ändert. Offensichtlich ist dies mit CSS einfach wieder hinzuzufügen - aber nur ein Kopf hoch.
Mir
@Mir, wenn Sie nicht verwenden möchten, [href]sollten Sie wahrscheinlich ein <span>für die Schaltfläche verwenden.
zzzzBov
45

Ich denke, Sie können Ihre Antwort hier finden: Ist ein Ankertag ohne das href-Attribut sicher?

Auch wenn Sie keine Verknüpfung mit href durchführen möchten, können Sie diese wie folgt verwenden:

<a href="javascript:void(0);">something</a>
Swati
quelle
3
Sollte eigentlich seinjavascript:undefined
rybo111
2
@ rybo111 du hast recht, aber ich bevorzuge immer noch void (0); im Grunde, weil es besser aussieht. Ich mag es nicht, wenn meine Kunden Dinge als "undefiniert" ansehen ;-)
Alex
8
<a href="javascript:;">text</a>?
Diynevala
javascript:;wird verwendet, um Dinge wie Rollover-Effekte und sogar GIF-Animationen in IE6 zu brechen. Und für keine Verknüpfungsoperationen gibt es dedizierte HTML-Elemente wie button. Gleichzeitig können Dinge wie AJAX-Links ihre hrefs für Fallback-Aktionen verwenden, wenn JS fehlschlägt.
Ilya Streltsyn
14

Ja, es ist gültig , das Ankertag ohne hrefAttribut zu verwenden.

Wenn das aElement kein hrefAttribut hat, stellt das Element einen Platzhalter dar, für den andernfalls ein Link platziert worden wäre, wenn er relevant gewesen wäre, der nur aus dem Inhalt des Elements besteht.

Ja, können Sie classund andere Attribute, aber sie können nicht target, download, rel, hreflang, undtype .

Die target, download, rel, hreflang, und typeAttribute müssen weggelassen werden , wenn das href Attribut nicht vorhanden ist.

Bezüglich des Teils " Soll ich? " Siehe das erste Zitat: " Wo sonst ein Link platziert worden wäre, wenn er relevant gewesen wäre ". Also würde ich fragen " Wenn ich kein JavaScript hätte, würde ich dieses Tag als Link verwenden? ". Wenn die Antwort Ja ist, dann ja, dann sollten Sie nutzen , <a>ohne href. Wenn nein, würde ich es trotzdem verwenden, da Produktivität für mich wichtiger ist als die Randfall-Semantik, aber dies ist nur meine persönliche Meinung.

Darüber hinaus sollten Sie aufpassen, für unterschiedliche Verhalten und Styling (zB keine Unterstreichungs, kein Zeiger Cursor, keine :link).

Quelle: W3C HTML5-Empfehlung

Tamás Bolvári
quelle
Es geht nicht so sehr um "Edge-Case-Semantik", sondern um Barrierefreiheit, die sicherstellt, dass Menschen mit Behinderungen den Inhalt einer Website nutzen und verstehen können
neiya
3

Es ist gültig. Sie können es beispielsweise verwenden, um Modalitäten (oder ähnliche Dinge, die auf data-toggleund data-targetAttribute reagieren ) anzuzeigen .

Etwas wie:

<a role="button" data-toggle="modal" data-target=".bs-example-modal-sm" aria-hidden="true"><i class="fa fa-phone"></i></a>

Hier verwende ich das font-awesome-Symbol, das besser als aTag als als Tag geeignet ist button, um ein Modal anzuzeigen. Durch die Einstellung role="button"wird der Zeiger auch in einen Aktionstyp geändert. Ohne entweder hrefoder role="button"ändert sich der Cursorzeiger nicht.

vedant
quelle
2
In diesem Fall sollten Sie eine Schaltfläche verwenden. Dies ist sowohl unter semantischen als auch unter Barrierefreiheitsaspekten angemessener. Anker sollten Sie irgendwohin bringen und keine Aktion ausführen. Warum versteckst du den gesamten Anker mit aria-hidden? Das Symbol vielleicht, aber Benutzer von Bildschirmleseprogrammen sollten keine verminderte Erfahrung haben.
Isherwood