Barrierefreies Webdesign ein zugängliches und nutzbares Internet gestalten

Barrierefreie Buttons brauchen ARIA veröffentlicht in 2012zuletzt bearbeitet in 2018

Ein Link ist ein Link — oder doch eine Schaltfläche?

Der Einsatz von Links und Schaltflächen auf Webseiten ist in der Praxis oft nicht konsequent. Manche Webseiten weisen Navigationsleisten auf, die nur aus Schaltflächen bestehen, und andere Webseiten bieten Widgets an, die als Links ausgezeichnet werden.

Eine Navigation, die mit Buttons aufgebaut ist Neue Seiten sollten mit Links aufgerufen werden

Der wesentliche Unterschied zwischen Links und Buttons ist, dass Buttons keine eigene Funktionalität mit sich bringen und Aktionen per JavaScript ausgelöst werden müssen. Auf einer funktionalen Ebene gibt es darüber hinaus kaum Gründe, sich für eine Schaltfläche oder einen Link zu entscheiden, denn beide Elementtypen bieten ähnliche Features:

Es gibt aber auch kleine Unterschiede zwischen beiden Elementen:

Es gibt weitere Gründe, strikt zwischen Links und Buttons zu unterscheiden: Nutzer wissen, dass Links neue Inhalte aufrufen während Schaltflächen einen Befehlscharakter haben, d.h. mit Schaltflächen werden Inhalte bearbeitet, Bestätigungen eingefordert oder sonstige Anweisungen an die Webanwendung vorgenommen.

"Links are for going and buttons are for doing"

Eine strikte Trennung für den Einsatz von Links oder Buttons ist leicht gefordert, aber eine eindeutige Antwort auf die Frage, wann Links und wann Schaltflächen eingesetzt werden müssen, gibt es leider nicht immer. Wie schwierig die Abgrenzung zwischen dem Einsatz von Links und von Schaltflächen sein kann, zeigt ein Extern, englischsprachig: Beitrag von Jakob Nielsen aus dem Jahr 2007. Die Diskussionen dauern bis heute an.

Drei aktive Elemente 'In den Warenkorb', 'Auf die Wundschliste' und 'zur Kasse' mit gleicher Gestaltung 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 Webseite sollte bei Aktivierung der Funktion eine entsprechende Statusmeldung erscheinen. Gleiches gilt für die Funktion "Auf den Wunschzettel". Hingegen führt "Zur Kasse" zu einer neuen Seite und sollte als Link umgesetzt werden. Im Übrigen wurden in der Seite im Screenshot die drei aktiven Elemente im HTML korrekt umgesetzt; nach den Usability-Diskussionen sollte der Link aber wie ein Link und nicht wie ein Button aussehen.

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 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. Statt nur in die CSS-Kiste zu greifen muss zuerst in die HTML-Kiste gegriffen werden und entweder ein BUTTON-Element oder ein role-Attribut mit der Rolle "button" vergeben werden.

Wann kommen Links in Frage?

Links sind in den folgenden Situationen Buttons vorzuziehen:

Im Allgemeinen verändern Links den Kontext. Beispielsweise befindet sich der Tastaturfokus nicht mehr an der gleichen Stelle wie zuvor, wenn ein Link aufgerufen wird. Links haben außerdem die Eigenschaft, neue Ressourcen aufzurufen (außer bei Sprunglinks innerhalb einer Webseite).

Wann sind Buttons zu bevorzugen?

Schaltflächen erhalten im Gegensatz zu Links meist den Kontext, auch wenn die Inhalte der Seite geändert werden. Für die meisten Buttons ist außerdem JavaScript erforderlich, d.h. Buttons sind oft Widgets. Die Widgets können wie folgt kategorisiert werden:

Beim Einsatz von Buttons müssen folgende Punkte noch beachtet werden:

Bis auf die Schaltflächen zum Abschicken oder Zurücksetzen eines Formulars müssen im Übrigen Autoren dafür sorgen, dass der Fokus nicht verloren geht, wenn eine Schaltfläche aktiviert wird.

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 und umgekehrt.

Vor dem Hintergrund der Barrierefreiheit spielt die Verwendung von Schaltflächen und Links eine stärkere Rolle: die semantische Bedeutung einer Schaltfläche ist beispielsweise entscheidend für die Navigation innerhalb einer Webseite. In Screenreadern werden Schaltflächen anders angesteuert als Links; Formularelemente werden z.B. in den Screenreadern JAWS und NVDA mit der Taste F angesprungen. Außerdem dürfen auch Screenreadernutzer bei der Aktivierung eines Buttons erwarten, dass der Kontext sich nicht ändert.

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 bzw. der Barrierefreien Informationstechnik-Verordnung – BITV 2.0 wird der Einsatz von Schaltflächen versus Links nicht explizit behandelt, aber in den WCAG 2.0 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 im HTML eine Schaltfläche sein, und wenn ein Element wie ein Link aussieht, dann sollte im HTML auch ein Link stehen.

Wenn aktive Elemente wie Schaltflächen gestaltet werden und diese nicht als BUTTON ausgespielt werden können, dann sollte das HTML repariert werden und zumindest die Rolle "button" explizit vergeben werden:

<a role="button" href="#">
  Beschriftung
</a>

Mit der expliziten Rolle "button" wird der Link im Intern: Accessibility-Tree als Button abgelegt und von einem Screenreader entsprechend als Schaltfläche identifiziert.