Barrierefreies Webdesign ein zugängliches und nutzbares Internet gestalten

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

Switch-Buttons (Knopfschalter)

Wenn eine Schaltfläche dazu dient, die Zustände "an" oder "aus" zu visualisieren, müssen diese beiden Zustände auch für Screenreader und andere Hilfsmittel zugänglich gemacht werden. Das erfolgt generell mit einer Intern: Umschaltfläche (Toggle-Button).

Der Knopfschalter (Switch-Button) ist dabei ein spezieller Toggle-Button, der "aktiviert" oder "nicht aktiviert" darstellt. Im Gegensatz dazu vermitteln Toggle-Buttons die Zustände "gedrückt" und "nicht gedrückt".

Mehrere Switch-Buttons 2 aktiviert (schwarz ausgefüllte Quadrate) und 3 nicht aktiviert Der Zustand der Switch-Buttons wird durch die Quadrate vermittelt

Der entscheidende Unterschied zu einem Toggle-Button ist die visuelle Darstellung. Knopfschalter werden z.B. durch ein Häkchen oder Füllung als "aktiviert" dargestellt während Toggle-Buttons durch Farbe, Schatteneffekte oder Text hervorgehoben werden.

Play und Stummschaltung eines Players sind gedrückt. Toggle-Buttons sehen 'gedrückt' aus

Knopfschalter ähneln sowohl Checkboxen als auch Radio-Buttons – je nach dem, wie die Optionen funktionieren. Der wesentliche Unterschied zwischen Knopfschaltern und Checkboxen oder Radio-Buttons liegt darin, dass ein Knopfschalter eine Einstellung darstellt, die sich sofort (dynamisch) auf die Webseite auswirkt während die Formularelemente nach den Web Content Accessibility Guidelines (WCAG) 2.0 bzw. der Barrierefreien Informationstechnik-Verordnung – BITV 2.0 per Schaltfläche abgeschickt werden sollten.

Beispiele für einen Knopfschalter

Es gibt verschiedene Situationen, in denen ein Switch-Button das Mittel der Wahl für eine dynamische Option auf einer Webseite ist.

Dynamische Checkbox

Wenn die Aktivierung oder Deaktivierung einer Checkbox die Webseite dynamisch verändert, dann benötigt die Checkbox die Rolle "switch":

<p><input type="checkbox" role="switch" onclick="my_function();" id="my_switch" checked>
<label for="my_switch">Details einblenden</label></p>

Screenreader identifizieren mit diesem Code einen Knopfschalter mit dem Namen "Details einblenden" und den Zustand "an" oder "aktiviert". Wenn die Komponente fokussiert wird, wird sie z.B. mit "Knopfschalter Details einblenden an" ausgegeben.

Der einzige Unterschied zwischen dem Switch-Button und der Checkbox ist die Rolle. Jetzt handelt es sich semantisch um einen Button und es wird dem Screenreadernutzer vermittelt, dass es sich um eine dynamische Komponente handelt und dass bei einer Aktivierung des Buttons eine sofortige Aktion oder Änderung der Webseite erwartet werden kann. Weil die Checkbox bereits per Tastatur bedienbar ist, sind keine weiteren autorenseitigen Maßnahmen für die Tastaturbedienung erforderlich.

Im Übrigen benötigt ein Switch-Button normalerweise ein aria-checked-Attribut mit dem Wert "true" oder "false". Weil es sich hier um eine Checkbox handelt, dessen Zustände bereits mit einem checked-Attribut angezeigt wird, ist ein aria-checked-Attribut nicht sinnvoll. Das checked-Attribut impliziert bereits das aria-checked-Attribut.

Dynamische Radio-Buttons

Genauso wie bei Checkboxen werden auch Radio-Buttons immer wieder für dynamische Funktionen auf Webseiten genutzt:

Durch betätigen der Radio-Buttons werden neue Inhalte ein- und ausgeblendet. Diese Radio-Buttons funktionieren wie Switch-Buttons

Die Vorgehensweise, die Komponenten barrierefrei zu gestalten, ist analog zu den Checkboxen. Die Radio-Buttons benötigen lediglich die Rolle "switch", um Knopfschalter zu werden:

<p>
  <input type="radio" role="switch" name="abfahrt" value="jetzt" id="fahrt1"><label for="fahrt1">Ich möchte um 12:05 am 16.11.2018 abfahren</label>
</p>
<p>
  <input type="radio" role="switch" name="abfahrt" value="pendler" id="fahrt2">
  <label for="fahrt2">Ich möchte einen Pendler-Fahrplan berechnen</label>
</p>

Toggle-Buttons mit BUTTON-Element

Die Rolle "switch" legt fest, dass das Element semantisch zu einer Schaltfläche (genauer: Knopfschalter) wird, d.h. es ist nicht notwendig, in der Ausgangssituation tatsächlich Checkboxen oder Radio-Buttons zu verwenden.

Manchmal erhalten Knopfschalter eine andere Darstellung als Checkboxen oder Radio-Buttons, auch wenn sie wie dynamische Checkboxen oder dynamische Radio-Buttons funktionieren. Unabhängig davon, ob die Komponenten sich gegenseitig ausschließen (wie bei Radio-Buttons) oder gleichzeitig aktiviert werden können (wie bei Checkboxen), ist manchmal die Darstellungsform entscheidend für den Einsatz eines Knopfschalters. Wenn Komponenten offensichtlich aktiviert (oder deaktiviert) werden, was meist mit Symbolen dargestellt wird, dann kommt ein Switch-Button in Frage.

Filterfunktion für ein Fernsehprogramm, teilweise durch Häkchen in runden Schaltflächen gekennzeichnet

Im Gegensatz zu Checkboxen oder Radio-Buttons ist das checked-Attribut nicht für Buttons vorgesehen. Wenn BUTTON-Elemente für Knopfschalter eingesetzt werden, dann muss der Zustand mit einem aria-checked-Attribut mit dem Wert "true" oder "false" semantisch vermittelt werden:

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

Bei Switch-Buttons, die wie Radio-Buttons funktionieren, könnte der Aufbau wie folgt sein:

<p>
  <button role="switch" aria-checked="true">
    bis 25 Euro
</button>
</p>
<p>
  <button role="switch" aria-checked="false">
    bis 50 Euro
     </button>
</p>
<p>
  <button role="switch" aria-checked="false">
    bis 75 Euro
   </button>
</p>

Wichtig: Wenn eine Komponente aktiviert wird, dann müssen die aria-checked-Attribute entsprechend mit JavaScript angepasst werden.

Alternative mit Text

Wie bei Toggle-Buttons muss der Zustand eines Switch-Buttons nicht zwingend mit ARIA angezeigt werden. Alternativ kann der Zustand durch Text erfolgen. Wenn Text eingesetzt wird, ist die semantische Kennzeichnung mit einem aria-checked-Attribut redundant bzw. nicht mehr sinnvoll. Würde eine semantische Auszeichnung berücksichtigt werden, wäre die aktivierte Schaltfläche doppelt gekennzeichnet, einmal durch den Text und einmal durch ein ARIA-Attribut.

<p id="option1">
  bis 25 Euro:
  <button aria-labelledby="option1">
        <span class="ja">aktiv</span>
    <span class="nein">nicht aktiv</span>
  </button>
</p>
<p id="option2">
  bis 50 Euro:
      <button aria-labelledby="option2">
      <span class="ja">aktiv</span>
  <span class="nein">nicht aktiv</span>
</button>
</p>
<p id="option3">
  bis 75 Euro:
  <button aria-labelledby="option3">
    <span class="ja">aktiv</span>
   <span class="nein">nicht aktiv</span>
  </button>
</p>
<style>
  .ja { display:none; }
</style>

Aufbau im HTML

Damit ein Knopfschalter semantisch richtig aufbereitet wird, müssen folgende Punkte berücksichtigt werden:

  1. Der Knopfschalter ist ein Element mit der Rolle "switch" (z.B. ein BUTTON-Element, eine Checkbox oder ein Radio-Button). Das Element kann auch ein anderes (vorzugsweise aktives) Element mit der Rolle "switch" sein.
  2. Außer für Checkboxen oder Radio-Buttons: Wenn die durch den Knopfschalter ausgelöste Funktion aktiviert ist und der Knopfschalter als aktiviert dargestellt wird, dann erhält das Element mit der Rolle "switch" ein aria-checked-Attribut mit dem Wert "true". Ansonsten ist der Wert "false". Elemente mit der Rolle "switch" unterstützen den dritten für das aria-checked-Attribut möglichen Wert "mixed" nicht. Bei Checkboxen und Radio-Buttons impliziert das checked-Attribut bereits das aria-checked-Attribut, so dass ein aria-checked-Attribut wegen möglicher Konflikte nicht eingesetzt werden darf.
  3. Der Name für den Knopfschalter errechnet sich aus dem Text innerhalb des Elements mit der Rolle "switch" (bei Checkboxen und Radio-Buttons kann es allerdings der Text in einem verknüpften LABEL-Element) sein. Falls keine Beschriftung vorhanden ist, dann erhält das Element mit der Rolle "switch" ein aria-label- oder aria-labelledby-Attribut, damit der Name berechnet werden kann, z.B.:

    <button role="switch" aria-checked="false" aria-label="bis 25 Euro"></button>

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

    <button role="switch" aria-checked="false" aria-label="bis 25 Euro" aria-describedby="help"> </button>
    <span id="help">
      Produkte, die teuerer als 25 Euro sind, werden ausgeblendet.
    </span>

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

ARIA bietet zahlreiche weitere Attribute, die in Einzelfällen auch für Switch-Buttons genutzt werden können. Normalerweise sollten aber 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

Elemente mit der Rolle "switch" funktionieren dem Grunde nach wie Toggle-Buttons oder Checkboxen. Sie sind per Spezifikation Widgets, aber sie erfordern nur ein minimales Fokus-Management, sofern aktive Elemente (wie ein BUTTON-Element, eine Checkbox oder Radio-Buttons) eingesetzt werden. Aktive Elemente lösen dabei den click-Event aus, wenn Leertaste gedrückt wird.

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

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

    <span role="switch" tabindex="0" aria-checked="false">
      bis 25 Euro
    </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 "switch" müssen folgende Aktionen sowohl per Eingabe- als auch per Leertaste möglich sein, wenn der Fokus auf dem Element steht:

  1. Ist die verknüpfte Funktion nicht aktiv, dann wird sie aktiviert. Dabei:
    • Wenn der Knopfschalter teil einer Gruppe von Knopfschaltern ist und die Gruppe den Charakter von Radio-Buttons hat, dann müssen die anderen Knopfschalter der Gruppe als "nicht aktiviert" gekennzeichnet werden.
    • Ansonsten bleiben sonstige aktivierte Knopfschalter als "aktiviert" gekennzeichnet.
  2. Ist die verknüpfte Funktion aktiviert:
    • Wenn der Knopfschalter teil einer Gruppe von Knopfschaltern ist und die Gruppe den Charakter von Radio-Buttons hat, dann passiert nichts.
    • Ansonsten wird der Knopfschalter als nicht aktiviert gekennzeichnet.
  3. Im Allgemeinen muss der Fokus nach Aktivierung des Knopfschalters auf dem Knopfschalter 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.