Buttons vs. Links: Semantics and Usability

Was ein Element ist, bestimmt, wie es verwendet werden kann. Semantik drückt aus, was ein Element ist, und daher auch, wie es verwendet werden kann. Und die Semantik eines Links ist nicht dieselbe wie die eines Buttons. Sie sind beide interaktive Elemente – aber das war es auch schon.

Buttons

Buttons lösen programmierbare Aktionen aus. Programmierbare Aktionen benötigen JavaScript. Ausnahmen bestätigen die Regel: ein Submit-Button in einem Formular schickt ein Formular ab – ganz ohne JavaScript.

Ein HTML <button>-Element hat implizit die Rolle »Button«. Semantik und Verhalten sind eingebaut. Alle Browser haben Keyboard-Support für Buttons. Das bedeutet:

ein Button ist standardmäßig fokussierbar, wenn der User mit einem Keyboard durch die Seite tabbt
es ist nicht nötig, das tabindex="0"-Attribut zum Button hinzuzufügen
ein Button ist keyboard-operable, d.h., er kann mit der Leertaste und der Entertaste aktiviert werden

Wenn er nicht innerhalb eines Formulars ist, wird er ohne JavaScript nichts machen. Er hat kein vorgegebenes Verhalten. Dieses muss mit JavaScript hinzugefügt werden.

Links

Links bringen uns an andere Orte. Technisch gesehen können Links aber noch viel mehr:

ein Dokument downloaden (mit dem download-Attribut)
ein E-Mail mit dem Standard-E-Mail-Programm verschicken
eine Telefonnummer wählen

Das alles wird durch das href-Attribut möglich gemacht. Wenn ein <a>-Element ein href-Attribut enthält, dann repräsentiert es einen Hyperlink, der durch seinen Inhalt gekennzeichnet wird. Ohne href-Attribut hat ein Link keine implizite Link-Rolle und wird daher auch keiner ARIA-Rolle zugewiesen und nicht im AccTree angezeigt. Heißt weiter, ein Anchor-Element ohne href-Attribut ist kein Link. Es ist in den meisten Browsern auch nicht fokussierbar und wird aus der Tabbing-Order der Seite herausgenommen.

Ein Link ist von sich aus:

fokussierbar, es ist nicht nötig, das tabindex="0"-Attribut zum Button hinzuzufügen
keyboard-operable, d.h., er kann (nur) mit der Enter-Taste bedient werden
Links brauchen kein JavaScript, um zu tun, was sie tun

Links als disabled kennzeichnen

Links können, im Gegensatz zu Buttons, nicht mit dem disabled-Attribut deaktiviert werden. Wenn ein Link-Element kein href-Attribut hat, wird es ja nicht mehr als solches von einem Screenreader erkannt, daher muss die semantische Information über das ARIA-Attribut role="link" hergestellt werden. Mit aria-disabled="true" kann der Link für Screenreader als disabled gekennzeichnet werden.

Links in Buttons umwandeln

Nur in begründeten Ausnahmefällen (progressive enhancement) machen!

<a href="#" role="button" class="btn">Chirp chirp</a>

Chirp chirp

Siehe dazu auch den Artikel von Adrian Roselli (unten verlinkt): wie ein Button Events abfeuert (bei Space und Enter-Taste nämlich anders)

Nicht alle AT bekommen ihre accessibility information über den accessibility tree!!! Z.B. bei Forced Colors Mode in Windows

Buttons vs. Links Übersicht

	default behaviour	implicit semantics	activated via	Can be disabled?
`<button>`	none unless it submits a form	button	Space, Enter/Return	disabled attribute
`<a href="">`	takes the user somewhere	link	Enter/Return only	No (but can work around it using ARIA)