Barrierefreies Webdesign — ein zugängliches und nutzbares Internet gestalten

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

Toggle-Buttons (Umschaltflächen)

Toggle-Buttons sind einfache Schaltflächen, die über ihre Gestaltung den Zustand "gedrückt" oder "nicht gedrückt" darstellen. Dem Grunde nach sind sie Checkboxen sehr ähnlich mit folgendem Unterschied:

Anders gesagt: Die Umschaltfläche löst eine Funktion aus während die Checkbox grundsätzlich statisch sein sollte. Wenn ein Button aktiviert wird, dann kann ein Nutzer erwarten, dass eine Funktion auf der Webseite unmittelbar ausgelöst wird. Das gilt nicht bei der Bearbeitung einer Checkbox.

Im Übrigen hat die Umschaltfläche noch weitere "Verwandte":

Ein Toggle-Button vermittelt eine allgemeine Umschaltmöglichkeit: eine Option wird an- oder ausgeschaltet. Toggle-Buttons (wie auch andere Buttons) gibt es in zwei Varianten:

  1. Der Zustand des Buttons (gedrückt oder nicht gedrückt) wird visuell vermittelt. In diesem Fall muss ein ARIA-Attribut den Zustand im HTML ebenfalls vermitteln:

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

  2. Der Zustand des Buttons wird textlich vermittelt. In diesem Fall sollte kein aria-pressed-Attribut vorhanden sein:

    <button>
      Abspielen|Pause
      </button>

Beispiel für eine Umschaltfläche

Eine typische Situation, in der Umschaltflächen eingesetzt werden, ist für die Bedienleiste eines Multimedia-Abspielers. Beispielsweise können das Abspielen und die Stummschaltung gleichzeitig gedrückt sein:

Abspielen und Stummschaltung eines Multimedia-Players sind gedrückt.

Wenn die Multimedia abgespielt oder stumm gestellt wird, können die Schaltflächen visuell so gestaltet werden, dass sie "gedrückt" aussehen. In dem Fall wird visuell eine Information über den Zustand vermittelt, die natürlich auch an Screenreader vermittelt werden muss. Das erfolgt mit einem aria-pressed-Attribut für eine Schaltfläche:

<button aria-pressed="true">
  Abspielen
  </button>

In anderen Situationen wird bei Aktivierung einer Umschaltfläche die Beschriftung angepasst. Aus einem "Wiedergabe"-Button wird beispielsweise ein "Pause"-Button.

Screenshot: Aus einem Play-Icon wird ein Pause-Icon

In diesem Fall ist die neue Funktion bereits in Textform verfügbar unabhängig von der visuellen Gestaltung. Die Zuweisung eines aria-pressed-Attributs für "Wiedergabe" und "Pause" ist sinnfrei - in einem Screenreader entstünden Informationen wie "Wiedergabe nicht gedrückt" oder "Pause gedrückt". Die Auszeichnung einer Umschaltfläche mit dem aria-pressed-Attribut würde die Bedienung in einem Screenreader erschweren.

Obwohl die Veränderung der Beschriftung (z.B. von "Abspielen" in "Pause") im Allgemeinen vorteilhaft für viele Nutzer ist, so hat diese Technik einen Nachteil: Screenreader lesen den neuen Text nach der Aktivierung der Schaltfläche nicht vor, d.h. wenn der Zustand (gedrückt oder nicht gedrückt) geändert wird, werden Screenreader über die Zustandsänderung informiert, aber wenn die Beschriftung der Umschaltfläche ("Abspielen" oder "Pause") geändert wird, geben Screenreader den neuen Namen nicht weiter; Nutzer müssen den Fokus entfernen und wieder zu der Umschaltfläche bringen, um den neuen Namen zu erfahren.

Aufbau im HTML

Damit eine Umschaltfläche, die durch Gestaltungsmaßnahmen den gedrückten oder nicht gedrückten Zustand vermitteln, semantisch richtig aufbereitet wird, müssen folgende Punkte berücksichtigt werden:

  1. Die Umschaltfläche ist ein BUTTON-Element oder ein (vorzugsweise aktives) Element mit der Rolle "button".
  2. Wenn die durch die Umschaltfläche ausgelöste Funktion eingeschaltet ist und die Umschaltfläche als gedrückt dargestellt wird, dann erhält das BUTTON-Element ein aria-pressed-Attribut mit dem Wert "true". Ansonsten ist der Wert "false".
  3. Der Name für die Umschaltfläche errechnet sich aus dem Text innerhalb des Elements mit der Rolle "button". Falls keine Beschriftung vorhanden ist, dann erhält das BUTTON-Element ein aria-label- oder aria-labelledby-Attribut, damit der Name berechnet werden kann, z.B.:

    <button aria-pressed="false" aria-label="Abspielen"></button>

  4. Sollte es eine Beschreibung zu der Funktion der Umschaltfläche geben, dann kann die Umschaltfläche ein aria-describedby-Attribut mit der ID des Elements mit der Beschreibung erhalten:

    <button aria-pressed="false" aria-label="Abspielen" aria-describedby="help"> </button>
    <span id="help">
      Drücken Sie Leertaste oder P, um diese Funktion zu aktivieren.
    </span>

    Diese Möglichkeit ist optional und nur dann sinnvoll, wenn eine Anweisung erforderlich ist.

ARIA bietet im Übrigen zahlreiche weitere Attribute, die in Einzelfällen auch für Umschaltflächen genutzt werden können. Normalerweise sollten jedoch ARIA-Attribute nur dann eingesetzt werden, wenn es tatsächlich ein Problem gibt. Überflüssige ARIA-Attribute können die Barrierefreiheit einschränken oder ausschließen, wenn sie falsch eingesetzt werden.

Fokus-Management

Sofern ein Button-Element für die Umschaltfläche eingesetzt wird, ist kein besonderes Fokus-Management notwendig, denn alle Browser erlauben die Aktivierung eines BUTTON-Elements per Eingabe- und Leertaste. Die Aktivierung per Tastatur löst dabei den click-Event aus. Gleiches gilt für ein Link mit der Rolle "button":

<a role="button" href="#" aria-pressed="false">
  Abspielen
</a>

Sollte die Rolle "button" für ein nicht aktives Element genutzt werden, dann müssen folgende Maßnahmen getroffen werden:

  1. Das Element mit der Rolle "button" benötigt ein tabindex="0", damit es in der Fokus-Reihenfolge steht.

    <span role="button" tabindex="0" aria-pressed="false">
      Abspielen
    </span>

  2. Es müssen Event-Handler (z.B. onkeypress oder onkeyup) für die Leertaste und die Eingabetaste berücksichtigt werden, um die damit verknüpfte Aktion auszulösen.

Für das Element mit der Rolle "button" müssen folgende Aktionen sowohl per Eingabe- als auch per Leertaste möglich sein, wenn der Fokus auf das Element steht:

  1. Ist die verknüpfte Funktion ausgeschaltet, dann wird sie eingeschaltet.
  2. Ist die verknüpfte Funktion eingeschaltet, dann wird sie ausgeschaltet.
  3. Im Allgemeinen muss der Fokus nach Aktivierung der Umschaltfläche auf der Umschaltfläche bleiben. Nur wenn die verknüpfte Funktion beispielsweise neue Inhalte zur Webseite hinzufügt und der eingeblendete Inhalt nicht unmittelbar hinter dem aktiven Element zum DOM hinzugefügt wird, kommt das Setzen des Fokus auf die eingeblendeten Inhalte in Frage.