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 Intern: den gleichen semantischen Wert auf der Strukturebene wie auf der Präsentationsebene, und so können auch Screenreadernutzer einen gleichberechtigten Zugang zu den Inhalten erhalten.

Eindeutige Bezeichnung

Wenn auf einer Seite mehrere Multimedia einschließlich Links vorhanden sind, mit denen die Inhalte angezeigt, abgespielt oder bearbeitet werden können, dann werden Linktexte immer wieder den gleichen Wortlaut aufweisen. Die Linktexte können Intern: mit unsichtbarem Text eindeutig formuliert werden, etwa:

<a href="#">Abspielen <span class="unsichtbar">Beitragstitel</span></a>

Das trifft auf Schaltflächen zwar genauso zu, aber mit Schaltflächen können die Bezeichnungen leichter für Screenreadernutzer zugänglich gemacht werden. Die Inhalte können durch Intern: FIELDSET- bzw. LEGEND-Elemente besser nutzbar gemacht werden. Schaltflächen werden in Screenreadern mit einem vorhandenen LEGEND-Element ausgegeben:

<fieldset>
  <legend class="unsichbar">Beitragstitel</legend>
  <button type="submit">Abspielen</button>
</fieldset>

In einem Screenreader wird jede Schaltfläche mit einer vorhandenen Gruppenbezeichnung (LEGEND)und der eigentlichen Beschriftung identifiziert. In diesem Beispiel wird die Schaltfläche also mit "[Beitragstitel] Abspielen" bezeichnet. Mit der Verschachtelung in ein FIELDSET ist der Kontext durch das bezeichnende LEGEND-Element sichergestellt.

Es kommt auf die Rolle an

Jakob Nielsen versucht in seinem oben verlinkten Beitrag den Einsatz von Schaltflächen für Aktionen mit Befehlscharakter zu empfehlen. Die Begründung ist gut nachvollziehbar, aber in der Praxis kaum relevant, weil Links ohne weiteres wie Schaltflächen gestaltet werden können.

Vor dem Hintergrund der Barrierefreiheit spielt die Verwendung von Schaltflächen eine stärkere Rolle: Abgesehen von den eher technischem Aspekt, eindeutige Texte anzubieten, ist die semantische Bedeutung einer Schaltfläche wichtig. Im Screenreader können Schaltflächen anders angesteuert werden als Links; beispielsweise können Formularelemente in den Screenreadern JAWS und NVDA mit der Taste F angesprungen werden .

Multimedia-Player mit einem Redner zum Thema 'Chancengleichheit an Hochschulen' und der Formularliste von JAWS im Vordergrund Wenn Schaltflächen gesucht werden, dann sollten Schaltflächen wie hier bei der Landtagslupe des WDR gefunden werden

In den Web Content Accessibility Guidelines (WCAG) 2.0 wird der Einsatz von Schaltflächen versus Links nicht explizit behandelt, aber es wird an mehreren Stellen auf die Semantik im HTML eingegangen. Beispielsweise steht in der Extern, englischsprachig: Best-Practice-Technik G115:

Using the appropriate semantic elements will make sure the structure is available to the user agent. This involves explicitly indicating the role that different units have in understanding the meaning of the content.

Konkret geht es um die Intern: Rolle eines Elements: Screenreader können zwischen Schaltflächen und Links unterscheiden und bieten alternative Steuerungsmöglichkeiten für unterschiedliche HTML-Elemente an. Wenn also etwas wie eine Schaltfläche gestaltet wird, dann sollte es auch eine Schaltfläche sein.

Wenn Bedienelemente wie Schaltflächen gestaltet werden und diese nicht als BUTTON oder INPUT ausgespielt werden können, dann sollte zumindest Die WAI-ARIA-Rolle button vergeben werden:

<a role="button" href="#">Schaltflächentext?</a>

Mit der Rolle "button" wird das Steuerelement auch mit einem Screenreader so angesteuert, als ob es eine Schaltfläche wäre.