ARIA: switch role

Die ARIA switch-Rolle ist identisch mit der checkbox-Rolle, außer dass es anstelle von "checked" oder "unchecked" entweder "on" oder "off" ist. Wie bei der checkbox-Rolle ist das aria-checked-Attribut erforderlich. Die beiden möglichen Werte sind true und false. Im Gegensatz zu einem <input type="checkbox"> oder role="checkbox" gibt es keinen indeterminate oder mixed Zustand. Die switch-Rolle unterstützt den Wert mixed für das aria-checked-Attribut nicht; das Zuweisen eines Wertes von mixed zu einem switch setzt den Wert stattdessen auf false.

Hilfstechnologien können switch-Widgets mit einer spezialisierten Darstellung zeigen, um die Vorstellung eines Ein-/Ausschalters widerzuspiegeln.

Da ein Switch ein interaktives Steuerungselement ist, muss es fokussierbar und über die Tastatur zugänglich sein. Wenn die Rolle auf ein nicht fokussierbares Element angewendet wird, verwenden Sie das tabindex-Attribut, um dies zu ändern. Die erwartete Tastenkombination zum Umschalten des Wertes eines Switches ist die Leertaste. Der Entwickler muss den Wert des aria-checked-Attributs dynamisch ändern, wenn der Switch umgeschaltet wird.

Es gibt einige Typen von Benutzeroberflächenkomponenten, die, wenn sie in einer Plattformzugänglichkeits-API dargestellt werden, nur Text enthalten können. Zugänglichkeits-APIs haben keine Möglichkeit, semantische Elemente darzustellen, die in einem switch enthalten sind. Um mit dieser Einschränkung umzugehen, wenden Browser automatisch die Rolle presentation auf alle Nachkommenelemente eines jeden switch-Elements an, da es sich um eine Rolle handelt, die keine semantischen Kinder unterstützt.

Zum Beispiel betrachten Sie das folgende switch-Element, das eine Überschrift enthält.

<div role="switch"><h3>Title of my switch</h3></div>

Da Nachkommen von switch präsentational sind, ist der folgende Code äquivalent:

<div role="switch"><h3 role="presentation">Title of my switch</h3></div>

Aus der Perspektive des Benutzers von Hilfstechnologien existiert die Überschrift nicht, da die vorherigen Codeausschnitte dem folgenden im Zugänglichkeitstree entsprechen:

<div role="switch">Title of my switch</div>

aria-checked Attribut

Das aria-checked-Attribut ist erforderlich, wenn die switch-Rolle verwendet wird, da es den aktuellen Zustand des Widgets darstellt, auf das die switch-Rolle angewendet wird. Ein Wert von true repräsentiert den "on"-Zustand; false repräsentiert den "off"-Zustand; ein Wert von mixed wird von der Switch-Rolle nicht unterstützt und wird als false behandelt.

aria-readonly Attribut

Das aria-readonly-Attribut wird von der switch-Rolle unterstützt. Es zeigt an, ob der Zustand des Widgets vom Benutzer bearbeitbar ist. Ein Wert von false bedeutet, dass der Benutzer den Zustand des Widgets ändern kann; ein Wert von true bedeutet, dass der Benutzer den Zustand des Widgets nicht ändern kann. Der Standardwert ist false.

Handler für Klickereignisse

Wenn der Benutzer auf das Switch-Widget klickt, wird ein Klickereignis ausgelöst, das behandelt werden muss, um den Zustand des Widgets zu ändern.

Ändern des aria-checked-Attributs

Wenn ein Klickereignis auf dem Switch-Widget ausgelöst wird, muss der Handler den Wert des aria-checked-Attributs von true auf false oder umgekehrt ändern.

Wenn die switch-Rolle zu einem Element hinzugefügt wird, behandelt der Benutzeragent es folgendermaßen:

• Das Element wird als switch-Rolle an die Systemzugänglichkeitsinfrastruktur weitergegeben.
• Wenn sich der Wert des aria-checked-Attributs ändert, wird ein zugängliches Ereignis mit der Systemzugänglichkeits-API ausgelöst, falls verfügbar und unterstützend für die switch-Rolle.
• Alle Elemente, die Nachkommen eines Elements mit der switch-Rolle sind, werden automatisch mit der Rolle presentation versehen. Dies verhindert, dass Elemente, die verwendet werden, um den Switch zu konstruieren, individuell von Hilfstechnologien interagiert werden. Text in diesen Elementen bleibt für den Benutzeragenten sichtbar und kann vom Benutzer gelesen oder anderweitig bereitgestellt werden, es sei denn, er wird ausdrücklich mit display: none oder aria-hidden="true" ausgeblendet.

Die Hilfstechnologie, wenn sie die switch-Rolle unterstützt, reagiert, indem sie Folgendes tut:

• Screenreader sollten das Element als einen Switch ankündigen und optional Anweisungen dazu geben, wie der Switch aktiviert werden kann.

Die folgenden Beispiele sollten Ihnen helfen zu verstehen, wie die switch-Rolle angewendet und verwendet wird.

Dieses einfache Beispiel erstellt einfach ein Widget und weist ihm die ARIA switch-Rolle zu. Der Button ist mit einem Aussehen gestaltet, das an einen Ein-/Ausschalter erinnert.

HTML

Das HTML ist hier ziemlich einfach. Der Switch ist als <button>-Element implementiert, das zunächst aktiviert ist, da sein aria-checked-Attribut auf "true" gesetzt ist. Der Switch hat zwei Kindelemente, die die Beschriftungen "off" und "on" enthalten und wird von einem <label> gefolgt, das den Switch identifiziert.

<button role="switch" aria-checked="true" id="speakerPower" class="switch">
  <span>off</span>
  <span>on</span>
</button>
<label for="speakerPower" class="switch">Speaker power</label>

JavaScript

Dieser JavaScript-Code definiert und wendet eine Funktion an, um Klickereignisse auf Switch-Widgets zu behandeln. Die Funktion ändert das aria-checked-Attribut von true auf false oder umgekehrt.

document.querySelectorAll(".switch").forEach((theSwitch) => {
  theSwitch.addEventListener("click", handleClickEvent, false);
});

function handleClickEvent(evt) {
  const el = evt.target;

  if (el.getAttribute("aria-checked") === "true") {
    el.setAttribute("aria-checked", "false");
  } else {
    el.setAttribute("aria-checked", "true");
  }
}

CSS

Der Zweck des CSS ist es, ein Aussehen und ein Gefühl für den Switch zu schaffen, das an das Paradigma eines Ein-/Ausschalters erinnert.

button.switch {
  margin: 0;
  padding: 0;
  width: 70px;
  height: 26px;
  border: 2px solid black;
  display: inline-block;
  margin-right: 0.25em;
  line-height: 20px;
  vertical-align: middle;
  text-align: center;
  font:
    12px "Open Sans",
    "Arial",
    serif;
}

button.switch span {
  padding: 0 4px;
  pointer-events: none;
}

[role="switch"][aria-checked="false"] :first-child,
[role="switch"][aria-checked="true"] :last-child {
  background: #262;
  color: #eef;
}

[role="switch"][aria-checked="false"] :last-child,
[role="switch"][aria-checked="true"] :first-child {
  color: #bbd;
}

label.switch {
  font:
    16px "Open Sans",
    "Arial",
    sans-serif;
  line-height: 20px;
  vertical-align: middle;
  user-select: none;
}

Der interessanteste Teil ist wahrscheinlich die Verwendung von Attributselektoren und den :first-child und :last-child Pseudo-Klassen, um den Wechsel des Erscheinungsbildes des Switches basierend darauf, ob er ein- oder ausgeschaltet ist, zu bewältigen.

Ergebnis

Das Ergebnis sieht so aus:

• ARIA: checkbox role
• <input type="checkbox">
• aria-hidden