Wenn ein Link wie eine Schaltfläche aussieht, sollte man ihn trotzdem als Schaltfläche gestalten?

Links (Tag <a>) werden verwendet, um zu einer anderen Seite oder Ressource zu navigieren. Buttons (Tag <button>) führen Aktionen auf der aktuellen Seite aus, z.B. das Absenden eines Formulars oder das Aufrufen einer JavaScript-Funktion.

Wenn ein Element eine Aktion ausführt, aber wie ein Link aussieht, sollte es als <button> gestaltet werden. Umgekehrt, wenn ein Element zu einer anderen Seite führt, aber wie ein Button aussieht, ist es besser, <a> zu verwenden.

Begründung aus Sicht der Zugänglichkeit:

• Semantik: Screenreader und andere Assistenztechnologien verwenden die Semantik der Tags, um die Funktion des Elements zu verstehen. Ein Button wird als interaktives Element wahrgenommen, das aktiviert werden kann, ein Link als Navigationselement.
• Tastaturinteraktion: Standardmäßig werden Buttons mit Enter oder Space aktiviert, Links nur mit Enter. Tastaturnutzer erwarten dieses Verhalten.
• Styling und JavaScript: Die Verwendung der richtigen Tags erleichtert die Anwendung von Styles und Event-Handlern.

Beispiel für einen Link, der wie ein Button gestaltet ist:

<a href="/page" class="button">Zur Seite</a>

Beispiel für einen Button, der einen Link imitiert (weniger üblich, aber für spezielle UX-Lösungen möglich):

<button type="button" onclick="doSomething()" class="link">Aktion ausführen</button>

Im Allgemeinen sollte man die Semantik beachten: Links für Navigation, Buttons für Aktionen.