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 ab!

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:

Mindestens 24×24 Pixel grosse Interaktionsfläche
3:1 Kontrast zwischen Button und Hintergrund
sichtbarer Fokuszustand, z. B. durch Farbwechsel bei Klick/Hover

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:

Buttons als echte HTML-Buttons (<button>) statt Links stylen
Rollen und Zustände korrekt beschreiben (aria-pressed, aria-label)
Reaktionszeiten gering halten (visuelles Feedback sofort anzeigen (Interaktion))

In unserem Beitrag zur Webentwicklung 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 Audit