Barrierefreies Webdesign — ein zugängliches und nutzbares Internet gestalten

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

Wechselschaltflächen (Switch-Buttons)

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 Umschaltfläche (Toggle-Button).

Die Wechselschaltfläche (Switch-Button) ist dabei eine spezielle Umschaltfläche, die "aktiviert" oder "nicht aktiviert" darstellt. Im Gegensatz dazu vermitteln Umschaltflächen 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 einer Umschaltfläche ist die visuelle Darstellung. Wechselschaltflächen werden z.B. durch ein Häkchen oder Füllung als "aktiviert" dargestellt während Umschaltflächen durch Farbe, Schatteneffekte oder Text hervorgehoben werden.

Play und Stummschaltung eines Players sind gedrückt.

Umschaltflächen sehen 'gedrückt' aus

Wechselschaltflächen ähneln Checkboxen. Der wesentliche Unterschied zwischen Wechselschaltflächen und Checkboxen liegt darin, dass eine Wechselschaltfläche eine Einstellung darstellt, die sich sofort (dynamisch) auf die Webseite auswirkt während die Checkbox nach den Web Content Accessibility Guidelines (WCAG) 2.2 bzw. der Barrierefreien Informationstechnik-Verordnung – BITV 2.0 per Schaltfläche abgeschickt werden sollte.

Beispiele für eine Wechselschaltfläche

Es gibt verschiedene Situationen, in denen eine Wechselschaltfläche 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 eine Wechselschaltfläche mit dem Namen "Details einblenden" und den Zustand "an" oder "aktiviert". Wenn das Element fokussiert wird, wird sie z.B. mit "Knopfschalter Details einblenden an" ausgegeben.

Der einzige Unterschied zwischen der Wechselschaltfläche und der Checkbox ist die Rolle. Jetzt handelt es sich semantisch um einen Button und es wird dem Screenreadernutzer vermittelt, dass es sich um ein dynamisches Element 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 eine Wechselschaltfläche normalerweise ein aria-checked-Attribut mit dem Wert "true" oder "false". Weil es sich hier um eine Checkbox handelt, dessen Zustände bereits mit einer checked-Eigenschaft festgelegt wird, ist ein aria-checked-Attribut nicht erlaubt. Die checked-Eigenschaft impliziert bereits den Wert für 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 Verwendung von Radio-Buttons als Grundlage für Wechselschaltflächen ist allerdings Extern, englischsprachig: nicht zulässig. Im HTML muss eine Checkbox oder ein Button (oder ein anderes zulässiges Element) stehen.

Wechselschaltflächen mit BUTTON-Element

Die Rolle "switch" legt fest, dass ein Element semantisch zu einer Wechselschaltfläche wird, d.h. es ist nicht notwendig, in der Ausgangssituation tatsächlich Checkboxen oder Buttons zu verwenden.

Manchmal erhalten Wechselschaltflächen eine andere Darstellung als Checkboxen, auch wenn sie wie dynamische Checkboxen funktionieren. Wenn Bestandteile der Benutzerschnittstelle offensichtlich aktiviert (oder deaktiviert) werden, was meist mit Symbolen dargestellt wird, dann kommt eine Wechselschaltfläche in Frage.

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

Im Gegensatz zu Checkboxen ist die checked-Eigenschaft für Buttons nicht spezifiziert. Wenn BUTTON-Elemente für Wechselschaltflächen 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 mehreren Wechselschaltflächen 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 Wechselschaltfläche aktiviert wird, dann müssen die aria-checked-Attribute entsprechend mit JavaScript angepasst werden.

Alternative mit Text

Wie bei Umschaltflächen muss der Zustand einer Wechselschaltfläche nicht zwingend mit ARIA angezeigt werden. Alternativ kann der Zustand durch eine Beschriftung erfolgen. Wenn Beschriftungen eingesetzt werden, 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 eine Wechselschaltfläche semantisch richtig aufbereitet wird, müssen folgende Punkte berücksichtigt werden:

  1. Die Wechselschaltfläche ist ein Element mit der Rolle "switch" (z.B. ein BUTTON-Element oder eine Checkbox). Das Element kann auch ein anderes (vorzugsweise aktives) Element mit der Rolle "switch" sein.
  2. Außer für Checkboxen: Wenn die durch die Wechselschaltfläche ausgelöste Funktion aktiviert ist und die Wechselschaltfläche 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 impliziert die checked-Eigenschaft bereits das aria-checked-Attribut, so dass ein aria-checked-Attribut wegen möglicher Konflikte nicht eingesetzt werden darf.
  3. Der Name für die Wechselschaltfläche wird normalerweise durch die Beschriftung des Elements mit der Rolle "switch" bestimmt. Falls keine Beschriftung vorhanden ist, dann erhält das Element mit der Rolle "switch" ein aria-label- oder aria-labelledby-Attribut, um den Namen festzulegen, z.B.:

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

  4. Sollte es eine Beschreibung zu der Funktion der Wechselschaltfläche geben, dann kann die Wechselschaltfläche 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 Umschaltflächen oder Checkboxen. Sie sind per Spezifikation Widgets, aber sie erfordern nur ein minimales Fokus-Management, sofern aktive Elemente (wie ein BUTTON-Element oder eine Checkbox) 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.
  2. Ist die verknüpfte Funktion aktiviert, wird sie deaktiviert.
  3. Im Allgemeinen muss der Fokus nach Aktivierung der Wechselschaltfläche auf der Wechselschaltflä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.