Barrierefreie Buttons brauchen oft ARIA veröffentlicht in 2012zuletzt bearbeitet in
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 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".
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.
Toggle-Buttons sehen 'gedrückt' aus
Knopfschalter ähneln Checkboxen. Der wesentliche Unterschied zwischen Knopfschaltern und Checkboxen liegt darin, dass ein Knopfschalter eine Einstellung darstellt, die sich sofort (dynamisch) auf die Webseite auswirkt während die Checkbox nach den Web Content Accessibility Guidelines (WCAG) 2.1 bzw. der Barrierefreien Informationstechnik-Verordnung – BITV 2.0 per Schaltfläche abgeschickt werden sollte.
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:
Diese Radio-Buttons funktionieren wie Switch-Buttons
Die Verwendung von Radio-Buttons als Grundlage für Switch-Buttons ist allerdings nicht zulässig. Im HTML muss eine Checkbox oder ein Button (oder ein anderes zulässiges Element) stehen.
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 Buttons zu verwenden.
Manchmal erhalten Knopfschalter eine andere Darstellung als Checkboxen, auch wenn sie wie dynamische Checkboxen funktionieren. Wenn Komponenten offensichtlich aktiviert (oder deaktiviert) werden, was meist mit Symbolen dargestellt wird, dann kommt ein Switch-Button in Frage.
Im Gegensatz zu Checkboxen 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:
- Der Knopfschalter 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. - Außer für Checkboxen: 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 dasaria-checked
-Attribut möglichen Wert "mixed" nicht. Bei Checkboxen impliziert daschecked
-Attribut bereits dasaria-checked
-Attribut, so dass einaria-checked
-Attribut wegen möglicher Konflikte nicht eingesetzt werden darf. - Der Name für den Knopfschalter errechnet sich aus dem Text innerhalb des Elements mit der Rolle "switch" (bei Checkboxen 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" einaria-label
- oderaria-labelledby
-Attribut, damit der Name berechnet werden kann, z.B.:<button role="switch" aria-checked="false" aria-label="bis 25 Euro"></button>
- 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 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:
- 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> - Es müssen Event-Handler (z.B.
onkeypress
oderonkeyup
) 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:
- Ist die verknüpfte Funktion nicht aktiv, dann wird sie aktiviert.
- Ist die verknüpfte Funktion aktiviert, wird der Knopfschalter als nicht aktiviert gekennzeichnet.
- 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.
Der Beitrag Barrierefreie Buttons brauchen oft ARIA besteht aus folgenden einzelnen Webseiten:
- Toggle-Buttons (Umschaltflächen)
Wenn Buttons "gedrückt" oder "nicht gedrückt" aussehen, dann muss das
aria-pressed
-Attribut eingesetzt werden.- Switch-Buttons (Knopfschalter)
(Aktuelle Seite)
- Ausklappbare Schaltflächen
Schaltflächen, die kürzere Inhalte ein- und ausblenden, benötigen ein
aria-expanded
-Attribut.- Akkordeons
Abschnittsüberschriften, die Inhalte ein- und ausblenden, benötigen ein
BUTTON
-Element mit einemaria-expanded
-Attribut.- Menu-Buttons
Buttons, die Inhalte zur Seite hinzufügen und dabei andere Inhalte überlagern können, müssen mit einem
aria-haspopup
-Attribut ergänzt werden.