Buttons barrierefrei gestalten

Viele Probleme beim Navigieren durch Websites entstehen nicht durch grosse technische Fehler, sondern durch kleine Details wie schlecht gestaltete Buttons. Buttons gehören zu den wichtigsten Bedienelementen einer Website. Sie führen User:innen durch die Website: Absenden, Kaufen, Anmelden, Kontakt aufnehmen usw. Wenn sie nicht klar erkennbar oder schlecht bedienbar sind, entstehen Barrieren – und Nutzer:innen springen…

Silvia Meierhofer, 1. Dezember 2025

Eine Kollage auf der ein Button zu sehen ist, drum herum sieht man ein Maus Icon und zwei Hände

Sichtbarkeit schafft Vertrauen

Ein Button muss sich abheben, bedienbar und verständlich sein. Ein klarer Kontrast, eindeutige Beschriftung und eine ausreichende Grösse sind Pflicht.
Die WCAG 2.2 schreibt folgendes für Buttons vor:

Grundsätzlich mindestens 24 × 24 CSS-Pixel grosse Interaktionsfläche nach WCAG 2.2 AA. Das Kriterium enthält Ausnahmen, etwa für ausreichend voneinander entfernte Ziele oder Links im Fliesstext.
3:1 Kontrast für visuelle Merkmale, die zum Erkennen eines Bedienelements oder seines Zustands nötig sind. Nicht jede Buttonfläche muss pauschal 3:1 zum Seitenhintergrund erreichen. Für die Beschriftung gelten die Textkontrast-Anforderungen.
sichtbarer Tastaturfokus, z. B. eine deutliche Umrandung beim Navigieren mit der Tab-Taste. Ein Hover-Effekt allein genügt nicht.

Damit Nutzer:innen wissen, wo sie sich gerade befinden, braucht es zusätzlich eine klare Fokusmarkierung.

Ein sichtbarer Focus-Ring (die Markierung beim Navigieren mit der Tab-Taste) zeigt Tastaturnutzer:innen, welches Element aktuell aktiv ist.

Wenn alle Buttons gleich aussehen, weiss niemand, welcher wichtig ist. Ein barrierefreies Design nutzt klare visuelle Hierarchien:

Primäraktion (z. B. «Absenden») → Sekundäraktion («Abbrechen») → Tertiäraktion (z. B. Link).

Und: Jeder Klick braucht Rückmeldung – visuell oder auditiv. Das gibt Sicherheit und stärkt das Vertrauen.

Warum wir Buttons anklicken

Psychologisch gesehen folgen Menschen gelernten Mustern. Im Web klicken wir, wenn ein Element als «klickbar» erkannt wird – also anders aussieht als sein Umfeld. Über die Jahre hat sich eine visuelle Sprache etabliert: Ein Button hat eine klare Form, eine Fläche, eine Beschriftung und reagiert, wenn man ihn berührt oder anklickt. Wird diese Erwartungshaltung gebrochen und sehen alle Elemente gleich aus, entsteht Unsicherheit – und Interaktionen bleiben aus.

Ein Button braucht also:

klare Form (Rechteck, abgerundet oder mit Kontur – Hauptsache konsistent über deine Website!)
eindeutige Farbe (am besten deine Primärfarbe)
verständlichen Text («Jetzt starten», «Formular absenden»)
Zustände: Hover, Active, Disabled, Focus

Primär-, Sekundär- und Tertiärbuttons

Nicht jede Aktion hat denselben Stellenwert. Eine Hauptaktion braucht visuelle Priorität, sonst weiss niemand, was wirklich wichtig ist. Primär-Buttons weisen auf diese Hauptaktion hin. Sekundär-Buttons unterstützende Aktionen und Tertiär-Buttons optionale Wege. Wenn alle Buttons gleich aussehen, gibt es keine Orientierung.

Fun Fact: Laut einer A/B-Testreihe des MECLABS Institute erhöhen klar formulierte Handlungsempfehlungen auf CTA-Buttons die Klickrate um 132 % und steigern die Conversion um 14 %

Microcopy

Barrierefreiheit endet nicht beim Design. Sprache spielt eine ebenso zentrale Rolle. «Hier klicken» ist bedeutungslos, «Jetzt anfragen» dagegen ist eine Handlungsorientierung. Gute Buttons erklären, was passiert und warum.

So entsteht Vertrauen.

Bedienbarkeit sicherstellen

Buttons müssen nicht nur schön, sondern vor allem bedienbar sein. Also auch mit Screenreadern, Tastatur oder mittels Sprachsteuerung gelesen und geklickt werden können.
Das heisst:

Für Aktionen echte HTML-Buttons (<button>) verwenden; für die Navigation Links (<a>). Das Aussehen entscheidet nicht über das richtige Element.
Bedienelemente verständlich beschriften und relevante Zustände korrekt vermitteln, etwa aria-pressed bei einem Umschaltbutton. Zusätzliche ARIA-Angaben nur einsetzen, wenn sie gebraucht werden.
Reaktionszeiten gering halten (visuelles Feedback sofort anzeigen (Interaktion))

In unserem Beitrag zu WAI-ARIA findest du, wie wir das technisch umsetzen.

Fazit

Buttons sind das Herzstück deiner interaktiven Website. Barrierefreies Button-Design sorgt dafür, dass Handlungen klar, intuitiv und für alle zugänglich sind.

Oder, frei nach Don Norman:

«When usability meets beauty, people don’t just use your design – they enjoy it.»
Donald Arthur Norman, Professor für Kognitionswissenschaften und Informatik

Mehr zum Thema findest du im Beitrag: WCAG 2.1 und Konformität

Häufige Fragen zu barrierefreien Buttons

Wann brauche ich einen Button und wann einen Link?

Ein Button löst eine Aktion aus, beispielsweise ein Formular absenden oder ein Dialogfenster öffnen. Ein Link führt zu einer anderen Seite oder Stelle. Die Funktion entscheidet über das HTML-Element, nicht dessen Aussehen. Ein auffällig gestalteter Link zur Angebotsseite bleibt deshalb ein Link.

Muss jeder Button mindestens 24 × 24 Pixel gross sein?

WCAG 2.2 AA verlangt für Zeigerziele grundsätzlich mindestens 24 × 24 CSS-Pixel. Es gibt aber definierte Ausnahmen, etwa ausreichend Abstand zu benachbarten Zielen, eine gleichwertige grössere Alternative oder Links im Fliesstext. Grössere Klickflächen sind häufig sinnvoll; eine pauschale Regel ohne diese Ausnahmen wäre ungenau.

Reicht ein Hover-Effekt für die barrierefreie Bedienung eines Buttons?

Nein. Ein Hover-Effekt zeigt nur, was beim Darüberfahren mit dem Mauszeiger passiert. Wer mit der Tastatur navigiert, braucht einen sichtbaren Fokus. Der Button muss zudem erreichbar und mit Enter sowie der Leertaste aktivierbar sein. Prüfe diese Zustände getrennt.

Du möchtest Buttons und ihre Zustände neu gestalten? Wir unterstützen dich bei der barrierefreien Gestaltung. Für die technische Umsetzung findest du mehr in unserem Angebot zur barrierefreien Webentwicklung.