Ein Button ist ein Bedienelement, das eine Handlung auslöst und sich durch Form und Farbe als anklickbar zu erkennen gibt. In HTML steht dafür das button-Element. Ein Link führt dagegen zu einer Adresse, auch wenn er wie ein Button aussieht.
- Button
Bedienelement, das eine Handlung auslöst und sich durch Form und Farbe als anklickbar zu erkennen gibt.
Beispiel: „Der Button sendet das Formular ab.“Auch: Schaltfläche. Beide Wörter werden gleichbedeutend benutzt; in Entwurfsdateien überwiegt Button, in Behördentexten Schaltfläche.
Abgrenzung zum Link: Ein Link führt zu einer Adresse und lässt sich in einem neuen Tab öffnen, kopieren und teilen. Ein Button löst etwas aus, das ohne ihn nicht passiert. Gestalterisch dürfen beide gleich aussehen, technisch nicht.
Button oder Link
Die Entscheidung fällt an einer Frage: Führt das Element zu einer anderen Adresse? Dann ist es ein Link. Löst es etwas auf der Seite aus, öffnet ein Fenster oder schickt ein Formular ab? Dann ist es ein Button.
Der häufigste Fehler ist ein div mit einem Klick-Ereignis. Es sieht aus wie ein Button, lässt sich aber mit der Tastatur nicht erreichen und wird von einem Screenreader nicht als Bedienelement angesagt. Das button-Element bringt beides von sich aus mit.
Das Markup
Ein Button ohne Formular braucht die Angabe type gleich button, sonst schickt er im Zweifel das umgebende Formular ab. Ist die Beschriftung nur ein Symbol, gibt ein aria-label den Namen.
<button type="button" onclick="oeffneDialog()">Termin wählen</button>
<a href="/kontakt/" class="button">Kontakt aufnehmen</a>Größe und Zustände
Auf Berührungsbildschirmen gilt eine Mindestgröße von rund 44 mal 44 Pixeln, damit der Daumen trifft. Dazu kommen die Zustände: Normal, Hover, Fokus, Aktiv und Deaktiviert. Besonders der Fokuszustand wird oft weggestaltet, obwohl er für die Tastaturbedienung unverzichtbar ist.
Ebenso wichtig ist die Beschriftung. Sie benennt die Handlung und ihr Ergebnis, also „Termin wählen“ statt „Weiter“. Stehen mehrere Buttons nebeneinander, bekommt nur einer die volle Farbe; die übrigen bleiben als Umriss stehen, damit die Rangfolge erkennbar ist.