Links führen irgendwohin, Buttons lösen etwas aus
Diese eine Regel klärt fast jeden Fall.
Links führen irgendwohin, Buttons lösen etwas aus ist eine kostenlose Web Accessibility Academy-Lektion auf CoddyKit. Dies ist Lektion 1 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.
Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.
The One Rule
Here is the rule that solves almost every case: a link takes you somewhere, and a button makes something happen right here. 🧭
What a Link Is
A link navigates. Clicking it changes the page or URL, like jumping to another article or a new section.
<a href="/pricing">See pricing</a>What a Button Is
A button performs an action in place: it submits a form, opens a menu, or toggles a setting without leaving the page.
<button type="button">Add to cart</button>Why It Matters
Screen readers announce the role out loud. Users hear link or button, so the right element sets the right expectation before they act.
Different Keys, Different Jobs
This is not just cosmetic. A button fires on Space or Enter, but a link activates only on Enter. The keys follow the role.
The Quick Test
Ask one question: does this control change where I am, or change what is on screen? Navigation means link; action means button.
Open in a New Tab
If a control could sensibly open in a new tab or be bookmarked, it is navigation, so use a real link with an href.
Looks Are Not Roles
Styling does not change meaning. A button can look like a link and a link can look like a button, but the element decides the role.
The Common Mistake
People reach for a styled div or span and bolt on a click handler. It looks fine but has no role and no keyboard support.
<div class="btn" onclick="save()">Save</div>Submitting a Form
To send a form, use a button of type submit. It is an action, not navigation, so a link here would be wrong.
<button type="submit">Sign up</button>Going to Another Page
To send a user to your contact page, use a link. That is pure navigation, and a button would mislead everyone.
<a href="/contact">Contact us</a>Quick Check
You add a control that opens a menu without leaving the page. Which element fits?
Recap
Links go places, buttons do things. Match the element to the intent and you get the right role, the right keys, and happy users. 🎉
Häufig gestellte Fragen
Ist die Lektion „Links führen irgendwohin, Buttons lösen etwas aus“ kostenlos?
Ja — der vollständige Text von „Links führen irgendwohin, Buttons lösen etwas aus“ 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 „Links führen irgendwohin, Buttons lösen etwas aus“?
Diese eine Regel klärt fast jeden Fall. 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 1 von 4.
Wie lange dauert die Lektion „Links führen irgendwohin, Buttons lösen etwas aus“?
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