Barrierefreies Webdesign ein zugängliches und nutzbares Internet gestalten

Ein Link ist ein Link — oder doch eine Schaltfläche veröffentlicht in 2012

Um im Web zu navigieren, bietet HTML zwei Elementtypen: Links und Schaltflächen. Von den Möglichkeiten, Event-Handler oder andere Schnittstellen für Navigations- und Bedienelemente zu verwenden, möchte ich hier absehen. Vielmehr geht es in diesem Beitrag darum, wann ein Link und wann eine Schaltfläche (BUTTON oder INPUT) eingesetzt werden soll.

In der Praxis ist der Einsatz von Links und Schaltflächen auf der HTML-Ebene oft nicht konsequent. Manche Webseiten weisen Navigationsleisten auf, die nur aus Schaltflächen bestehen, und andere Webseiten bieten Funktionen an, die als Links ausgespielt werden.

Eine Linkliste die aber mit Schaltflächen aufgebaut wird Offensichtlich sollten die Schaltflächen doch Links sein.

Auf einer funktionalen Ebene gibt es kaum Gründe, sich für eine Schaltfläche oder einen Link zu entscheiden, denn beide Elementtypen bieten ähnliche Funktionalität. Auf der Darstellungsebene wird allerdings durchaus differenziert.

"Links are for going and buttons are for doing"

Ich weiß nicht, wann ich diesen Spruch zum ersten Mal gehört habe, aber er kommt aus der Usability-Ecke. Nutzer wissen, dass Links neue Inhalte und auch neue Fenster aufrufen während Schaltflächen einen Befehlscharakter haben, d.h. mit Schaltflächen werden Inhalte bearbeitet, Bestätigungen eingefordert oder sonstige Anweisungen an die aktuelle Anwendung vorgenommen.

Eine eindeutige Antwort auf die Frage, wann Links und wann Schaltflächen eingesetzt werden, gibt es leider nicht. Diskussionen werden insbesondere in der Extern, englischsprachig: Usability geführt, wonach mit Links navigiert und mit Schaltflächen bearbeitet werden sollte. Wie schwierig die Abgrenzung zwischen dem Einsatz von Links und von Schaltflächen ist, zeigt auch ein Extern, englischsprachig: Beitrag von Jakob Nielsen aus dem Jahr 2007. Klare Richtlinien als Entscheidungsgrundlage gibt es nicht.

Ein E-Shop in dem Schaltflächen 'In den Warenkorb' und 'Auf die Wundschliste' genauso aussehen wie der Link 'zur Kasse' Quelle: manufaktum.de

In einem E-Shop sollte eine Funktion "In den Warenkorb legen" eine Schaltfläche sein — vorausgesetzt, es wird keine neue Seite aufgerufen, und auf der aktuellen Produktseite erscheint eine entsprechende Statusmeldung. Gleiches gilt für die Funktion "Auf die Wunschliste". Hingegen führt "Zur Kasse" zu einer neuen Seite und sollte als Link umgesetzt werden. Im Übrigen wurden in der vorstehenden Grafik die drei Bedienelemente im HTML korrekt umgesetzt; nach den Usability-Diskussionen müsste der Link aber als solche am Bildschirm erkennbar gemacht werden.

Obwohl Links und Schaltflächen sowohl der Navigation als auch der Ausführung von Funktionen gleichwertig dienen können, sollte die Navigation über Links und die Ausführung von Funktionen mit Steuerelementen realisiert werden. Faustregel: Wenn Nutzer Inhalte aufrufen, um zu lesen, dann sind Links angebracht, wenn Nutzer mit einer Anwendung interagieren und somit Daten verändern, sind Schaltflächen geeigneter. Zu dieser Faustregel wird es mit Sicherheit Grenzfälle geben, in denen sowohl für das eine als auch für das andere entschieden werden kann.

Beispiele

Im Alltag eines Webentwicklers wird die Gestaltung von Links gegenüber Schaltflächen sicher bevorzugt, denn Intern: Links können zuverlässiger mit CSS gestaltet werden. Wenn aber Links so gestaltet werden, dass sie wie Schaltflächen aussehen, dann sollten sie nach den Richtlinien für barrierefreie Webinhalte mit den entsprechenden HTML-Elementen ausgezeichnet werden. Ein weiterer Aspekt ist die Beschriftung: In manchen Fällen bieten Steuerelemente mehr Möglichkeiten der eindeutigen Beschriftung.

Info und Beziehung

Die Argumentation der Usability-Experten zur Verwendung von Links und Schaltflächen hebt meist auf die Erwartungen ab. Sie sagen, ein Link führt zu einem anderen Inhalt bzw. baut die Seite neu auf während eine Schaltfläche dazu dient, zum Beispiel den Status eines Inhalts zu verändern. Aus Sicht eines Entwicklers ist das Problem schnell gelöst: "Der Link soll ein Button sein? Kein Problem, das kriege ich mit CSS schnell hin."

Zwei Ansichten eines Formulars mit und ohne CSS: Bei eingeschaltetem CSS werden Links wie Schaltflächen gestaltet Erwartungen der sehenden Nutzer können mit Links und CSS erfüllt werden.

Den Nutzererwartungen wird am Bildschirm genüge getan, aber das gilt nicht für Screenreadernutzer. In Sprachausgaben und Braille-Zeilen ist die Funktion nachwievor ein Link.

Ist jeder Link wirklich ein Link? Wenn man doch eine Schaltfläche daraus macht, dann sollte eine Schaltfläche im HTML eingesetzt werden statt in die CSS-Kiste zu greifen. So erhält die Funktion Zeile206: DB-Eintrag ungültig: - Zeile: 206