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

Überblendschaltflächen

Eine Überblendschaltfläche ist ein Steuerelement, das einen Inhalt als Popup anzeigt. Eine Überblendschaltfläche darf nach Accessible Rich Internet Applications (ARIA) 1.2 nur solche Inhalte aufrufen, die einer der Rollen "menu", "listbox", "tree", "grid" oder "dialog" haben.

Eine Überblendschaltfläche ruft ein Listenfeld auf

Das aria-haspopup-Attribut

Wenn ein Button visuell anzeigt, dass die Aktivierung des Buttons ein Widget zur Webseite hinzufügen wird und den Inhalt der Webseite überlagern wird, muss diese Information auch für Screenreader und andere Hilfsmittel zugänglich gemacht werden. Das erfolgt mit einem aria-haspopup-Attribut für ein Element mit der Rolle "button". Der Wert des Attributs soll der Rolle des zu öffnenden Widgets entsprechen, d.h. der Wert von aria-haspopup kann "menu", "listbox", "tree", "grid" oder "dialog" annehmen. Darüber hinaus ist der Wert "true" gleichbedeutend mit "menu"; standardmäßig hat das Attribut den Wert "false".

Eine Überblendschaltfläche kann wie folgt aussehen:

Die Popup-Funktionalität bedeutet, dass ein zusammengesetztes Widget oder ein Dialogfenster auf der gleichen Seite geöffnet und andere Inhalte der Webseite überlagern wird. Außerdem wird ein Fokus-Management impliziert, denn zusammengesetzte Widgets dürfen nur einmal in der Fokus-Reihenfolge stehen und die Bedienung per Tastatur muss z.B. per Pfeiltasten autorenseitig sichergestellt werden.

Das aria-haspopup-Attribut ist nicht geeignet beispielsweise, um Tooltips oder Links, die in einem neuen Fenster oder Tab aufgehen, "anzukündigen". Das Attribut sagt aus, dass aus einer normalen Aktionsschaltfläche eine Überblendschaltfläche wird. Der Nutzer (eines Screenreaders) wird somit informiert, dass mit der Aktivierung der Schaltfläche Inhalte durch neue Inhalte überlagert werden und dass die neuen Inhalte per Pfeiltasten bedient werden müssen.

Unterstützung von aria-haspopup

Wenn die Aktivierung einer Schaltfläche beispielsweise ein Dialogfenster öffnet, kann die folgende Schreibweise verwendet werden:

Der Button im vorstehenden Code wird beispielsweise mit dem Screenreader NVDA als "Adressdaten Schalter Dialogfeld öffnen" identifiziert. Im Screenreader JAWS wird die Überblendschaltfläche als "Adressdaten hap Popup Schalter"

In diesem Beispiel wird die Popup-Funktionalität mit einem "↑" gekennzeichnet, was in einem Screenreader mit "Pfeil nach oben" übersetzt werden könnte. Um solche vielleicht uneindeutige Symbole für Screenreader zu unterdrücken, wird das umfassende Element mit aria-hidden="true" vor dem Accessibility-Tree verborgen. Das aria-haspopup-Attribut ist bei der Vielzahl an möglichen Symbolen die konsistentere Variante, um den Überlagerungseffekt und ein Fokus-Management anzukündigen.

Ein anderes typisches Beispiel für eine Überblendschaltfläche ist der sogenannte Hamburger Icon:

Bei einem solchen Button sollte der Wert "menu" oder "true" für das aria-haspopup-Attribut vergeben werden:

Der vorstehende Code wird beispielsweise mit dem Screenreader JAWS als "Navigation Menüschalter" identifiziert.

Aufbau im HTML

Damit eine Überblendschaltfläche semantisch richtig aufbereitet wird, müssen folgende Punkte berücksichtigt werden:

1. Die Überblendschaltfläche ist ein BUTTON-Element oder ein (vorzugsweise aktives) Element mit der Rolle "button".
2. Die Überblendschaltfläche benötigt ein aria-haspopup-Attribut mit einem Wert, der die Rolle des einzublendenden Widgets entspricht.
3. Der Name für die Überblendschaltfläche wird durch die Beschriftung des Elements mit der Rolle "button" bestimmt. Falls keine Beschriftung vorhanden ist, dann erhält das BUTTON-Element ein aria-label- oder aria-labelledby-Attribut, z.B.:

   <button aria-haspopup="true" aria-label="Navigation"></button>

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

   <button aria-haspopup="menu" aria-label="Navigation" aria-describedby="help"> </button>
<span id="help">
  Im Menü navigieren Sie mit Pfeiltasten, mit Enter wählen Sie aus, mit Esc brechen Sie ab und mit Tab übernehmen Sie die Auswahl ohne sie 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 Überblendschaltflä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.

Oft werden Überblendschaltflächen beispielsweise mit einem aria-expanded-Attribut ergänzt, was überflüssig ist. Im nicht sichtbaren Zustand der einzublendenden Inhalte mag ein aria-expanded="false" für die Überblendschaltfläche einleuchten, aber wenn der Inhalt eingeblendet wird, muss der Fokus in den eingeblendeten Inhalt gesetzt werden und in den meisten Fällen auch ein autorenseitiges Fokus-Management übernehmen. Wenn der Fokus wieder auf den Button steht, wird der eingeblendeter Inhalt wieder ausgeblendet und der Zustand der Überblendschaltfläche ist wieder "nicht erweitert" – bei Fokus ist der zu erweiternde Inhalt immer reduziert.

Fokus-Management

Überblendschaltflächen sind Widgets. In der Regel öffnen sie ein weiteres Widget. Ausnahmen bilden Dialogfenster, die selbst keine Widgets sind. Folgendes ist für ein funktionierendes Fokus-Management zu berücksichtigen:

1. Mit einer Überblendschaltfläche wird ein Layer mit der Rolle "menu", "listbox", "tree", "grid" oder "dialog" angekündigt und durch Aktivierung aufgerufen. Sofern ein BUTTON-Element verwendet wird, ist nur ein minimales autorenseitiges Fokus-Management für die Überblendschaltfläche erforderlich.
2. Wird durch Aktivierung der Überblendschaltfläche ein Widget mit der Rolle "menu", "listbox", "tree", "grid" oder "dialog" zur Webseite hinzugefügt, müssen Autoren das Fokus-Management für das Widget bereitstellen.

Im Folgenden steht die Überblendschaltfläche im Fokus. Das Fokus-Management für die verschiedenen zusammengesetzten Widgets wird in den ARIA Authoring Practices Guide beschrieben und mit Beispielen ergänzt.

Sofern ein Button-Element für die Überblendschaltflä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":

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-haspopup="menu">
  Navigation
</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 das Widget nicht sichtbar, dann wird es eingeblendet.
2. Bei Überblendschaltflächen muss der Fokus nach Aktivierung der Überblendschaltfläche auf das erste oder ein als aktuelles Element markiertes Element des Widgets gesetzt werden.

Wenn das Widget zulässt, dass per Tab und Umschalt+Tab der Fokus auf aktive Elemente des verdeckten Inhalts gesetzt wird (was bis auf Dialogfenster der Normalfall ist), dann wird das Widget wieder ausgeblendet. Es ist daher wichtig, dass das Widget im HTML unmittelbar hinter der Überblendschaltfläche im DOM steht: Mit Umschalt+Tab gelangt ein Nutzer direkt wieder zur Überblendschaltfläche und das Widget wird geschlossen.

Dialogfenster sind für die Tastatur generell modal. Dialogfenster müssen mit einer Aktionsschaltfläche und/oder durch Drücken der Esc-Taste geschlossen werden können.