Im Modernen Webdesign wird es immer beliebter, kurze Links als Button zu gestalten, um diesen mehr Aufmerksamkeit zu gewähren. Ein Beispiel dafür sind die Links zum Kontaktformular in den orangefarbenen Störern auf stolperfrei.digital. Im Gegensatz dazu werden Aktionen, welche zwar vorhanden sein müssen (oder gewünscht sind), aber dem Nutzer nicht direkt ins Auge springen sollen, so unscheinbar wie möglich gestaltet und gleichen, wenn überhaupt, einem Link in einem Text. Dagegen ist nichts einzuwenden, lenkt es doch die Nutzer sehr effektiv auf die wichtigen Funktionen einer Seite und gibt so beispielsweise dem Absenden eines Formulars schon auf den ersten Blick mehr Raum als dem Zurücksetzen. Auch so können Fehler vermieden werden.
Viele Redakteure und auch gestandene Frontendentwickler fragen sich aber oft, welches HTML-Element denn jeweils das richtige ist. Denn vielen ist nicht klar, dass die beiden Elemente eben nicht austauschbar sind und sich auch nicht danach richten, wie man das entsprechende Element gestaltet.
Mehr Tipps zu barrierefreien Formularen gibt es übrigens im Blogbeitrag Was macht ein Formular barrierefrei? – Ein Bruchteil einer Checkliste.
Warum eine Unterscheidung wichtig ist – die Semantik der Elemente
Für sehende Nutzer einer Website ist es nahezu egal, welches HTML-Element Sie bei der Pflege verwenden. Bis auf ein paar wenige Funktionen lässt sich mit CSS und notfalls auch Javascript aus jedem div oder span ein interaktives und gut gestaltetes Inhaltselement zaubern. So natürlich auch Buttons und Links.
Für Nutzer, die einen Screenreader verwenden, sieht das jedoch anders aus. Denn Screenreader orientieren sich stark an der Semantik, also der Bedeutung, der verwendeten Elemente. Nicht nur wird die Rolle eines Inhaltselementes meistens mit vorgelesen, auch Shortcuts funktionieren oft nur mit bestimmten Elementen. Ist die Rolle eines Links oder eines Buttons also klar, dann weiß der Nutzer auch sofort, wie er diesen zu bedienen hat. Browser und Screenreader arbeiten Hand in Hand und bieten den Nutzern ein konsistentes und intuitives Nutzererlebnis.
Link
Ein Link verkettet, wie der Name laut englischem Ursprung schon andeutet, Dinge miteinander. In unserem Fall verbindet er zwei Internetseiten. Über den Klick auf einen Link springen wir zu einer anderen Seite oder auch eine andere Stelle auf derselben Seite. Links kann man auch mitgeben, ob sich diese im gleichen oder in einem neuen Reiter oder Fenster öffnen sollen. Die URL auf die ein Link verweist kann man kopieren und abspeichern oder mit anderen teilen.
Das richtige HTML-Element für einen Link ist <a>. Verwendet man dieses korrekt, so gehen damit einige nützliche Browser-Funktionen einher. Zum Beispiel kann der Browser zwischen aktiven, unbesuchten und besuchten Links unterscheiden, die man entsprechend unterschiedlich gestalten kann. Ein weiterer Vorteil von Links ist, dass man nahezu jedes andere HTML-Element verlinken kann, also beispielsweise auch ganze Tabellen. Einzig andere interaktive Elemente dürfen nicht in Links enthalten sein (also auch keine Buttons).
Liegt der aktuelle Tastaturfokus auf einem Link, so kann man diesen mit der Enter-Taste auslösen und so die neue Seite laden.
Button
Ein Button dagegen löst eine Aktion auf derselben Seite aus und kann diese so verändern. So kann ein Button ein Formular absenden oder zurücksetzen, aber auch etwas ausklappen oder weiterblättern. Die Aktionen von Buttons hängen immer von der Seite ab, auf der ich mich gerade befinde und können nicht einfach in einer URL beschrieben und mit anderen geteilt werden.
Das HTML-Element für einen Button ist <button>. Rein theoretisch wäre eine Auszeichnung zwar auch als <input type="button"> möglich, jedoch bietet das <button>-Element viel mehr Möglichkeiten für die Auszeichnung des Inhalts.
Liegt der Tastaturfokus gerade auf einem Button, so muss man im Gegensatz zum Link die Leertaste drücken um die Aktion, mit der der Button verknüpft ist, auszuführen.
Button oder Link – Fazit
Achten Sie das nächste Mal, wenn Sie ein Inhaltselement pflegen, doch genau darauf, was Ihr Element erreichen soll. Führt es als Link auf eine neue Seite oder einen anderen Seitenbereich? Oder löst es eine Aktion aus, die gegebenenfalls mit Javascript implementiert wurde? Dann verwenden Sie doch das entsprechende HTML-Element und überlassen Sie den Rest dem CSS.