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 href
Attribut 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?
quelle
Antworten:
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 alink
und abutton
.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: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ösenclick
.<a href>
und<button>
Elemente tun dies standardmäßig, Elemente ohne Schaltflächen jedoch nicht. Manchmal ist es sinnvoller, denclick
Auslöser an eine andere Taste zu binden . Beispielsweise kann eine "Hilfe" -Schaltfläche in einer Web-App gebunden sein F1.quelle
[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.[href]
sollten Sie wahrscheinlich ein<span>
für die Schaltfläche verwenden.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:
quelle
javascript:undefined
<a href="javascript:;">text</a>
?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 wiebutton
. Gleichzeitig können Dinge wie AJAX-Links ihrehref
s für Fallback-Aktionen verwenden, wenn JS fehlschlägt.Ja, es ist gültig , das Ankertag ohne
href
Attribut zu verwenden.Ja, können Sie
class
und andere Attribute, aber sie können nichttarget
,download
,rel
,hreflang
, undtype
.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>
ohnehref
. 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
quelle
Es ist gültig. Sie können es beispielsweise verwenden, um Modalitäten (oder ähnliche Dinge, die auf
data-toggle
unddata-target
Attribute reagieren ) anzuzeigen .Etwas wie:
Hier verwende ich das font-awesome-Symbol, das besser als
a
Tag als als Tag geeignet istbutton
, um ein Modal anzuzeigen. Durch die Einstellungrole="button"
wird der Zeiger auch in einen Aktionstyp geändert. Ohne entwederhref
oderrole="button"
ändert sich der Cursorzeiger nicht.quelle
aria-hidden
? Das Symbol vielleicht, aber Benutzer von Bildschirmleseprogrammen sollten keine verminderte Erfahrung haben.