Button oder Link: was Sie wann verwenden
Aktualisiert am 14. Oktober 2026 · Lesezeit: 5 Min.
„Button oder Link?“ ist die häufigste Frage in der barrierefreien Frontend-Entwicklung, und die Antwort ist kurz: Ein Link bringt Sie irgendwohin, ein Button tut etwas. Die optische Gestaltung ist eine eigene Entscheidung. Diese Seite zeigt den Unterschied in Code, Tastaturbedienung und WCAG-Begriffen sowie die Fehler, die wir in Online-Shops am häufigsten sehen. Sie gehört zur Reihe barrierefreie UI-Muster.
Wann was passt
Link <a href> verwenden |
Button <button> verwenden |
|---|---|
| Zu einer anderen Seite wechseln: Produkt, Kategorie, Warenkorbseite | In den Warenkorb legen, Menge ändern |
Zu einem Abschnitt derselben Seite springen (href="#reviews") |
Ein Menü, einen Dialog, ein Filterpanel öffnen oder schließen |
| Eine Datei herunterladen (Rechnung, PDF mit Größentabelle) | Ein Formular absenden oder zurücksetzen |
| Eine externe Website öffnen | Ein Video abspielen, eine Diashow starten, einen Code kopieren |
Der APG formuliert es so: „Es ist wichtig, dass sowohl das Aussehen als auch die Rolle eines Widgets zu seiner Funktion passen.“ Wenn etwas wie ein Link aussieht, aber eine Aktion auslöst, empfiehlt der APG, die Gestaltung zu ändern, statt ihm nur die Rolle button zu geben.
Relevante WCAG-Kriterien
- 4.1.2 Name, Rolle, Wert (A): Die Rolle im Code muss stimmen, und jeder Button und jeder Link braucht einen Namen.
- 2.1.1 Tastatur (A): Beide müssen per Tastatur funktionieren.
- 2.4.4 Linkzweck (im Kontext) (A): Der Linktext sagt, wohin er führt; ein „hier klicken“ ohne Zusammenhang tut das nicht.
- 2.4.7 Fokus sichtbar (AA): Beide zeigen den Fokus.
- 2.5.3 Beschriftung (Label) im Namen (A): Der zugängliche Name enthält den sichtbaren Text.
- 2.5.8 Zielgröße (Minimum) (AA): Kleine Icon-Buttons brauchen 24 × 24 CSS-Pixel oder genug Abstand.
- 1.4.1 Benutzung von Farbe (A): Die Farbe darf nicht das einzige Merkmal sein, das Links im Fließtext vom umgebenden Text unterscheidet.
Codebeispiel
<!-- Navigation: ein Link, auch wenn er wie ein Button aussieht -->
<a href="/de/collections/sale" class="btn btn-primary">Zum Sale</a>
<!-- Aktion: ein Button. type="button", damit er kein umgebendes Formular absendet -->
<button type="button" class="btn" aria-describedby="price-123">In den Warenkorb</button>
<!-- Button nur mit Icon: der Name kommt aus verstecktem Text, das Icon ist ausgeblendet -->
<button type="button" class="icon-btn">
<svg aria-hidden="true" focusable="false"><use href="#icon-heart"></use></svg>
<span class="visually-hidden">Auf die Wunschliste</span>
</button>
<!-- Umschalt-Button: der Name bleibt gleich, der Zustand ändert sich -->
<button type="button" aria-pressed="false">Preise inkl. MwSt. anzeigen</button>
Hinweise:
<a>ohnehrefist kein Link: Es ist nicht fokussierbar und hat keine Link-Rolle. Wenn es keine URL gibt, ist es ein Button.href="#"oderhref="javascript:void(0)"plus Klick-Handler ist ein Button, der sich als Link ausgibt. Verwenden Sie<button>.- Für Umschalt-Buttons sagt der APG, dass sich die Beschriftung nicht mit dem Zustand ändern soll – „Stumm“ bleibt „Stumm“, und
aria-pressedsagt, ob er aktiv ist.
Tastaturbedienung
| Taste | Link | Button |
|---|---|---|
| Tab / Umschalt + Tab | Bewegt den Fokus hin und weg | Bewegt den Fokus hin und weg |
| Enter | Folgt dem Link | Aktiviert den Button |
| Leertaste | Gehört nicht zum Link-Muster; folgt dem Link nicht | Aktiviert den Button |
Das APG-Muster für Buttons nennt Leertaste und Enter, das Muster für Links nennt Enter. Nutzer verlassen sich auf diesen Unterschied. Ein Link, der nur auf die Leertaste reagiert, oder ein „Button“, der nur auf einen Mausklick reagiert, bricht mit den Erwartungen. Öffnet ein Button einen Dialog, sollte der Fokus in den Dialog wechseln – siehe modaler Dialog.
Typische Fehler in Online-Shops
- Anklickbare
div- undspan-Elemente für „In den Warenkorb“, Farbfelder oder „Mehr laden“. Für die Tastatur sind sie unsichtbar. - Ganze Produktkarten in einem Link, der auch Buttons enthält („Auf die Wunschliste“ im Karten-Link). Ineinander verschachtelte interaktive Elemente verwirren Browser und assistive Technologien.
- Icon-Buttons ohne Namen: Warenkorb, Suche, Schließen (×), Wunschlisten-Herz, Plus und Minus bei der Menge.
- „Mehr erfahren“- und „Jetzt shoppen“-Links, zwanzigmal wiederholt, ohne Kontext, oder derselbe Text führt zu verschiedenen Seiten.
- Links im Fließtext, die nur durch Farbe erkennbar sind, oft eine Markenfarbe nahe an der Textfarbe.
- Ein
<button>in einem Formular ohnetype="button", der das Formular absendet, obwohl die Person nur die Größentabelle öffnen wollte. - Winzige Icon-Ziele bei Mengenauswahl und „Aus dem Warenkorb entfernen“.
Was automatische Prüfungen finden und was manuell zu testen ist
Die Karten unserer Regelbibliothek zu diesem Muster:
| Automatisch (axe-core-Regel) | Was sie findet |
|---|---|
button-name, input-button-name |
Buttons ohne zugänglichen Namen |
link-name |
Links ohne zugänglichen Namen |
aria-command-name |
Elemente mit role="button" oder role="link" ohne Namen |
nested-interactive |
Buttons oder Links in anderen interaktiven Elementen |
label-content-name-mismatch |
Sichtbarer Text fehlt im zugänglichen Namen |
link-in-text-block |
Links im Text, die sich nur auf Farbe stützen |
target-size |
Ziele kleiner als 24 × 24 Pixel ohne genug Abstand |
identical-links-same-purpose |
Links mit gleichem Namen, die zu verschiedenen Zielen führen (Hinweis) |
Manuelle Tests sind nötig, um zu entscheiden, ob ein Element ein Link oder ein Button sein sollte, um anklickbare div-Elemente ganz ohne Rolle zu finden und um zu prüfen, ob Enter und Leertaste richtig funktionieren und die Linktexte verständlich sind. Gehen Sie mit Tab durch Produktseite, Warenkorb und Kasse und lösen Sie alles nur mit der Tastatur aus.
Starten Sie die kostenlose Prüfung einer Seite auf einer Produktseite, um den automatisch prüfbaren Teil zu finden. Sie ist eine automatische Prüfung, kein vollständiges Audit.
Häufige Fragen
Wann verwende ich einen Button und wann einen Link?
Verwenden Sie einen Link (a-Element mit href), wenn die Aktivierung zu einer anderen Seite, an eine andere Stelle der Seite oder zu einer Datei führt. Verwenden Sie einen Button, wenn er auf der aktuellen Seite etwas auslöst: in den Warenkorb legen, einen Dialog öffnen, ein Formular absenden, einen Filter umschalten.
Darf ein Link wie ein Button aussehen?
Ja. Die WCAG regeln die optische Gestaltung nicht. Entscheidend ist, dass das Element im Code zu dem passt, was es tut. Ein „Jetzt shoppen“-Button, der eine Kategorieseite öffnet, ist ein Link, auch wenn er wie ein Button gestaltet ist.
Warum ist das für Screenreader-Nutzer wichtig?
Screenreader sagen die Rolle an („Link“ oder „Schalter“), daher erwarten Nutzer entweder Navigation oder eine Aktion. Außerdem listen sie Links und Buttons getrennt auf. Eine falsche Rolle weckt die falsche Erwartung.
Ist ein div mit onclick-Handler barrierefrei?
Nicht von sich aus. Es hat keine Rolle, ist mit Tab nicht erreichbar und reagiert nicht auf Enter oder Leertaste. Verwenden Sie stattdessen einen echten Button oder Link.
Kann eine automatische Prüfung einen Button von einem Link unterscheiden?
Sie findet Buttons und Links ohne Namen sowie ineinander verschachtelte interaktive Elemente. Sie kann nicht beurteilen, ob ein Link eigentlich ein Button hätte sein sollen, und sieht anklickbare div-Elemente meist nicht.
Quellen
- W3C WAI, APG Button pattern: https://www.w3.org/WAI/ARIA/apg/patterns/button/
- W3C WAI, APG Link pattern: https://www.w3.org/WAI/ARIA/apg/patterns/link/
- W3C, Using ARIA (Regeln für den Einsatz von ARIA): https://www.w3.org/TR/using-aria/