Barrierefreie Buttons brauchen oft ARIA veröffentlicht in 2012zuletzt bearbeitet in 2024

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 auf anderen Webseiten werden Formulare mit Links abgeschickt.

Der wesentliche Unterschied zwischen Links und Schaltflächen ist, dass Schaltflächen generell einen Befehl per JavaScript ausführen (auch wenn es Ausnahmen gibt). Links können hingegen mit HTML ihre vollständige Funktionalität erhalten. Auf einer funktionalen Ebene gibt es darüber hinaus kaum Gründe, sich für eine Schaltfläche oder einen Link zu entscheiden. Beide Elementtypen bieten ähnliche Features:

• Sowohl Links (ein a-Element mit einem href-Attribut) als auch Schaltflächen (ein button-Element oder z.B. ein input-Element im Zustand "button") haben eine implizite Rolle (im Accessibility-Tree legen Browser Links mit der Rolle "link" und Schaltflächen mit der Rolle "button" ab).
• Sowohl Links als auch Schaltflächen werden standardmäßig von Browsern in die Fokus-Reihenfolge aufgenommen.
• Bei Links löst die Eingabetaste und bei Schaltflächen die Leertaste oder Eingabetaste standardmäßig das Click-Event aus.

Auch ein Blick in die HTML-Spezifikation liefert keine eindeutige Unterscheidung zwischen beiden Formen von Befehlen. Links stellen eine Verbindung zwischen zwei Ressourcen her während Schaltflächen eine Aktion ausführen. Mit etwas gutem Willen können die Definitionen so verstanden werden, dass Links eine neue URI in der Adresszeile anzeigen während Schaltflächen Aktionen im DOM ausführen; In der Praxis gibt es aber verschiedene Gründe, Ausnahmen zuzulassen.

Es gibt aber auch Unterschiede zwischen beiden Elementtypen:

• Schaltflächen können mit dem disabled-Attribut deaktiviert werden während es für Links keinen deaktivierten Zustand gibt. Um Links zu "deaktivieren" muss das href-Attribut vom a-Element entfernt werden.
• Links können ohne JavaScript in einem neuen Fenster bzw. in einem neuen Reiter geöffnet werden oder mit dem Pseudoattribut :visited anders gestaltet werden.
• Browser bieten unterschiedliche Features für die beiden Elemente im Kontextmenü (rechter Mausklick bzw. Umschalt+F10).
• Semantisch ist ein Link immer ein Link. Schaltflächen können mit ARIA eine unterschiedliche Semantik erhalten und werden abhängig von ihren Attributen unterschiedlich von Assistenztechnologien identifiziert.

"Links are for going and buttons are for doing"

Eine strikte Trennung für den Einsatz von Links oder Schaltflächen 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 Beitrag von Jakob Nielsen aus dem Jahr 2007. Die Diskussionen dauern bis heute an.

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 vorstehenden Screenshot die drei Bestandteile der Benutzerschnittstelle korrekt im HTML umgesetzt; nach den Usability-Diskussionen sollte der Link aber wie ein Link und nicht wie eine Schaltfläche gestaltet werden.

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 beziehungsweise 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."

Den Nutzererwartungen wird am Bildschirm genüge getan, aber das gilt nicht für Screenreadernutzer. In Sprachausgaben und Braille-Zeilen ist die Funktion nach wie vor 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 Schaltflächen vorzuziehen:

• Navigation (neue Webseite oder Ansicht)
• Download
• Webseite neu laden
• Sprunglinks innerhalb einer Webseite

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 Schaltflächen zu bevorzugen?

Außer beim Abschicken eines Formulars behalten Schaltflächen bei Aktivierung normalerweise den Fokus (im Gegensatz zu Links), auch wenn die Inhalte der Seite geändert werden. Für die meisten Schaltflächen ist außerdem JavaScript erforderlich.

Schaltflächen werden zu unterschiedlichen Zwecken eingesetzt. Die Schaltflächen können wie folgt kategorisiert werden:

• Abschicken (und Zurücksetzen) von Formularen - die Ausnahme, denn meist wird bei Abschicken-Schaltflächen eine neue Webseite aufgerufen.
• Gewöhnliche Aktionsschaltflächen, d.h. nach Aktivierung einer Schaltfläche ändert sich der Zustand der Schaltfläche nicht. Das kann beispielsweise eine "Diese Seite drucken"- oder ein "Schließen"-Schaltfläche für ein Dialogfenster sein.

• Umschaltflächen (Toggle-Buttons), die eine An/Aus-Funktion inne haben:

  <button aria-pressed="true|false">
  Beschriftung
  </button>

• Wechselschaltflächen (Switch-Buttons), die eine Aktivierungs-Funktion inne haben:

  <button role="switch" aria-checked="true|false">
    Beschriftung
</button>

• Erweiternde bzw. reduzierende Schaltflächen:

  • einfache erweiternde bzw. reduzierende Schaltflächen, die kürzere Texte zur Webseite ein- und ausblenden:

    <button aria-expanded="true|false">
  Beschriftung
  </button>

  • Akkordeons, um Abschnitte einer Webseite ein- und auszublenden:

    <h2>
  <button aria-expanded="true|false">
    Abschnittsüberschrift
  </button>
</h2>

• Überblendschaltflächen, die ein Overlay anzeigen, z.B.:

  <button aria-haspopup="true">
  Beschriftung
</button>

Beim Einsatz von Schaltflächen müssen folgende Punkte noch beachtet werden:

• Schaltflächen bieten grundsätzlich keine Funktionalität und Befehle werden mit JavaScript bereitgestellt. Allerdings gibt es in HTML einige Ausnahmen, bei denen Browser die Funktionalität bereitstellen:
  • button-Elemente in den Zuständen "submit", "image" oder "reset" zum Abschicken oder Zurücksetzen eines Formulars und
  • Schaltflächen, die vom Browser durch den Einsatz anderer HTML-Elemente im Shadow DOM generiert werden, etwa mit einem details-, audio oder video-Element, oder aber auch mit <input type="file"> (Datei-Upload), <input type="color"> (Farbwähler) oder einer der fünf Datums- und Zeitfelder,

• Dient eine Schaltfläche als Widget und befindet sich die Schaltfläche innerhalb eines FORM-Elements, so wird das button-Element nach dem HTML-Standard als Schaltfläche des Typs "submit" interpretiert. Daher sollte in solchen Fällen der Zustand "button" explizit angegeben werden:

  <form ...>
  <button type="button" onclick="meinEventHandler();">
    Beschriftung
  </button>
</form>

Bis auf die Schaltflächen zum Abschicken oder Zurücksetzen eines Formulars sollten 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 mit anderen Befehlen aufgelistet oder angesteuert als Links; Schaltflächen werden z.B. in den Screenreadern JAWS und NVDA mit der Taste B angesprungen.

In den Web Content Accessibility Guidelines (WCAG) 2.2 beziehungsweise der Barrierefreien Informationstechnik-Verordnung – BITV 2.0 wird der Einsatz von Schaltflächen versus Links nicht explizit behandelt, aber in den WCAG 2.2 wird an mehreren Stellen auf die Semantik im HTML eingegangen. Beispielsweise steht in der 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.

Diese Beschreibung bedeutet: Der Einsatz geeigneter semantischer Elemente stellt sicher, dass die Struktur für den Benutzeragenten verfügbar ist. Das schließt die explizite Kenntlichmachung der Rolle für verschiedene Einheiten ein, damit die Bedeutung von Inhalt verstanden wird.

Konkret geht es um die Rolle eines Elements: Screenreader unterscheiden zwischen Schaltflächen und Links und bieten alternative Steuerungsmöglichkeiten für unterschiedliche HTML-Elemente an. Wenn also etwas wie ein Link funktioniert (etwa eine anklickbare Grafik, um eine Datei herunterzuladen) , dann sollte im HTML ein Link eingesetzt werden, der am Bildschirm als Link erkennbar ist. Aktive Elemente, die Befehle auf einer Webseite ausführen, sind als Schaltflächen umzusetzen.

Wenn Links per CSS wie Schaltflächen gestaltet werden und diese nicht als BUTTON-Element ausgespielt werden können, dann sollte das HTML zumindest repariert werden. Ein Link darf die Rolle "button" erhalten:

Mit der expliziten Rolle "button" erhält der Link im Accessibility-Tree die Rolle "button" und wird von Assistenztechnologien als Schaltfläche identifiziert. Umgekehrt wäre ein button-Element mit der Rolle "link" für Screenreader ein Link.
Hinweis: Im Browser verändert sich durch die Vergabe von Rollen nichts. Der Link bleibt ein Link und die Schaltfläche bleibt eine Schaltfläche.

Die Reparaturtechnik mit dem role-Attribut ist im Übrigen nicht zu empfehlen. Besser ist es, wenn HTML nach Spezifikation eingesetzt wird. Die Reparatur von Code birgt viele Herausforderungen. Insbesondere ist die Qualitätssicherung eigentlich nur mit Assistenztechnologien möglich. Wenn HTML korrekt eingesetzt wird, dann sparen Sie sich viel Arbeit.