Das Anti-Pattern eines Ankers ohne href
Warum ein Fake-Link Tastatur- und Screenreader-Nutzer behindert.
Das Anti-Pattern eines Ankers ohne href ist eine kostenlose Web Accessibility Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Web Accessibility Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Web Accessibility Academy-Kurs umfasst insgesamt 4 Lektionen.
Der falsche Link
Ein häufiges Anti-Pattern ist ein Anker ohne href, der mit einem click-Handler so verdrahtet wird, dass er wie eine Schaltfläche funktioniert. Es sieht zwar gut aus, verursacht aber Probleme.
<a onclick="openMenu()">Menu</a>Kein href, kein Link
Ein Anker zählt nur dann als echter Link, wenn er ein href besitzt. Ohne href behandelt der Browser ihn überhaupt nicht als interaktiv.
Er fällt aus der Tab-Reihenfolge
Ein Anker ohne href ist nicht fokussierbar. Tastaturnutzer, die durch die Seite tabben, überspringen ihn einfach und können ihn nie erreichen.
Die Tastatur kann ihn nicht auslösen
Selbst wenn Sie den Fokus erzwingen, reagiert ein falscher Link standardmäßig weder auf die Eingabetaste noch auf die Leertaste. Tastaturnutzer können ihn also weiterhin nicht aktivieren.
Screenreader werden verwirrt
Ohne href gibt ein Screenreader den Anker möglicherweise überhaupt nicht als Link aus. Nutzer erfahren dann nie, dass sie ihn verwenden können.
Der href-Pfund-Trick
Manche beheben das mit einem href, das nur aus einem Hash besteht. Dadurch wird das Element fokussierbar, aber die Seite springt auch nach oben, was irritierend ist.
<a href="#" onclick="openMenu()">Menu</a>Die richtige Lösung
Wenn das Steuerelement eine Aktion ausführt, verwenden Sie eine echte Schaltfläche. Fokus, Tastaturunterstützung und die richtige Rolle erhalten Sie automatisch.
<button type="button" onclick="openMenu()">Menu</button>Wann es ein Link sein sollte
Wenn das Steuerelement tatsächlich navigiert, behalten Sie den Anker bei und geben Sie ihm ein echtes href, das auf das Ziel verweist.
<a href="/menu">Menu</a>Warum das gemacht wird
Entwickler wählen oft einen Anker wegen seiner Unterstreichung. Sie können jedoch stattdessen eine Schaltfläche gestalten, ohne auf Barrierefreiheit zu verzichten.
Auch der Cursor täuscht
Ein Anker ohne href verliert standardmäßig sogar den Mauszeiger in Form einer Hand. Das deutet sehenden Nutzern an, dass hier eigentlich nichts anklickbar ist.
Die Kernaussage
Täuschen Sie keine Interaktivität vor. Wählen Sie für Aktionen eine echte Schaltfläche oder für Navigation einen Anker mit href und verzichten Sie auf Behelfslösungen.
Kurzer Check
Warum ist ein Anker ohne href, aber mit einem click-Handler, problematisch?
Zusammenfassung
Ein Anker ohne href ist ein falscher Link: nicht fokussierbar und für die Tastatur unbrauchbar. Verwenden Sie für Aktionen eine Schaltfläche und für Navigation ein echtes href. ✅
Häufig gestellte Fragen
Ist die Lektion „Das Anti-Pattern eines Ankers ohne href“ kostenlos?
Ja — der vollständige Text von „Das Anti-Pattern eines Ankers ohne href“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Web Accessibility Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Web Accessibility Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Das Anti-Pattern eines Ankers ohne href“?
Warum ein Fake-Link Tastatur- und Screenreader-Nutzer behindert. Du übst Web Accessibility Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Web Accessibility Academy zu starten?
Keine Vorkenntnisse erforderlich. Web Accessibility Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.
Wie lange dauert die Lektion „Das Anti-Pattern eines Ankers ohne href“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Web Accessibility Academy-Lektion Code schreiben und ausführen?
Ja. Jede Web Accessibility Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Links führen irgendwohin, Buttons lösen etwas aus
- Linktexte, die auch ohne Kontext verständlich sind
- Buttons, die ihre Funktion ankündigen
- Das Anti-Pattern eines Ankers ohne href