ARIA: Schieberegler-Rolle

Beschreibung

Die slider-Rolle wird für Eingabe-Widgets verwendet, bei denen der Benutzer einen Wert aus einem festgelegten Minimum und Maximum auswählt.

Die slider-Rolle im Vergleich zu anderen Bereichsoptionen

ARIA bietet Entwicklern sechs verschiedene Widget-Rollen für Bereiche an, einschließlich progressbar, meter und slider.

Die progressbar-Rolle, ähnlich dem <progress>-Element von HTML, ist ein schreibgeschützter Bereich, der den Fortschritt einer Aufgabe anzeigt, die sich in eine Richtung bewegt, wie zum Beispiel eine Fortschrittsanzeige des Datei-Uploads, die 100 % erreicht, wenn vollständig hochgeladen.

Die meter-Rolle, ähnlich dem <meter>-Element von HTML, ist eine schreibgeschützte Anzeige, die die Menge von etwas innerhalb eines bekannten Bereichs anzeigt, wie zum Beispiel die Batterieanzeige eines Computers oder die Tankanzeige eines Autos.

Die slider-Rolle, ähnlich dem input-Element vom Typ range, <input type="range">, ist ein les- und schreibbares Eingabefeld. Schieberegler ermöglichen es Benutzern, einen Wert zwischen festgelegten Minimal- und Maximalwerten auszuwählen. Der Benutzer wählt einen Wert aus, indem er den Schieberegler entlang eines horizontalen oder vertikalen Reglers bewegt.

Während alle drei dieser Bereiche die gleichen ARIA-Zustände und -Eigenschaften haben, ist die slider-Rolle der einzige les- und schreibbare Bereich: sie ist der einzige, dessen Wert sich durch Benutzerinteraktion ändert. Daher muss sie den Fokus erhalten können. Zusätzlich müssen Tastaturinteraktionen, Mausklicks und Touch-Interaktionen unterstützt werden.

Übliche Attribute

Das Attribut aria-valuemin legt den Mindestwert fest. Wenn es ausgelassen wird oder keine Zahl ist, ist der Standardwert 0 (null).

Das Attribut aria-valuemax definiert den Höchstwert. Wenn es fehlt oder keine Zahl ist, ist der Standardwert 100.

Der Wert des Attributs aria-valuenow muss zwischen den Minimal- und Maximalwerten liegen, einschließlich dieser Werte. Dieses Attribut ist für slider und meter erforderlich und optional für progressbar.

Für slider, es sei denn, Sie verwenden das <input type="range">-Element, muss der aria-valuenow-Wert programmatisch aktualisiert werden, wenn der Benutzer den Wert aktualisiert.

Das optionale Attribut aria-valuetext wird eingeschlossen, wenn der numerische aria-valuenow-Wert nicht den beabsichtigten Wert des Schiebereglers widerspiegelt. Da die Minimal-, Maximal- und aktuellen Werte alle numerisch sind, sollte das Attribut aria-valuetext enthalten sein, wenn diese Zahlen nicht numerische Werte darstellen, und einen Zeichenkettenwert definieren, der den numerischen Wert beschreibt. Zum Beispiel, wenn ein Schieberegler für T-Shirt-Größen verwendet wird, sollte das Attribut aria-valuetext von xx-small bis XX-large wechseln, wenn aria-valuenow zunimmt.

Der aria-valuetext-Wert muss aktualisiert werden, wenn der value- oder aria-valuenow-Wert aktualisiert wird. Während es kein gleichwertiges HTML-Attribut für <input type="range"> gibt, können Sie aria-valuetext auf jedem <input>-Typ einschließen. ARIA-Attribute werden auf semantischen HTML-Elementen unterstützt.

Wenn aria-valuetext ein wichtiges Feature für einen Schieberegler ist, sollten Sie in Betracht ziehen, <select> mit <option>-Elementen zu verwenden. Auch wenn dies optisch kein Bereich ist, ist der Wert jeder Option für alle Benutzer zugänglicher, nicht nur für Benutzer von assistiver Technologie.

Ein zugänglicher Name ist erforderlich. Wenn die Rolle des Bereichs auf ein HTML <input>-Element (oder ein <meter>- oder <progress>-Element) angewendet wird, kann der zugängliche Name von dem zugehörigen <label> stammen. Andernfalls verwenden Sie aria-labelledby, wenn ein sichtbares Label vorhanden ist oder aria-label, wenn kein sichtbares Label vorhanden ist.

Wenn Sie nicht das HTML <input>-Element verwenden, um Ihren Schieberegler zu erstellen, fügen Sie das tabindex-Attribut hinzu, um den Schieberegler fokussierbar zu machen. Von den drei Bereichstypen ist nur slider benutzerinteraktiv und daher der einzige, der in der Lage sein muss, den Fokus zu erhalten. Der Fokus sollte auf den Schiebereglerdaumen gelegt werden.

Schieberegler haben einen impliziten aria-orientation-Wert von horizontal. Dieses Attribut wird nicht mit meter oder progressbar unterstützt.

Benutzerinteraktionen

Im Gegensatz zu den schreibgeschützten Rollen meter und progressbar ist ein slider eine Eingabe, die Benutzerinteraktionen zulässt. Zusätzlich zu dem Einfügen des tabindex-Attributs zur Aktivierung des Slider-Fokus, muss Tastatur- und Zeigegeräteunterstützung implementiert werden.

Der Schieberegler repräsentiert den Bereich der möglichen Werte. Die Position des Schiebereglerdaumens entlang des Schiebereglers repräsentiert den aktuellen Wert. Benutzeraktionen, die unterstützt werden müssen, umfassen das Ändern des Werts durch Ziehen des Daumens oder Klicken auf den Schieberegler für Zeigegeräte und die Verwendung von Richtungstasten wie Pfeiltasten für Tastaturbenutzer. Siehe Tastaturinteraktionen unten.

Bereich mit mehreren Daumen

Ein Schieberegler mit mehreren Daumen ist ein Schieberegler mit zwei oder mehr Daumen, die jeweils einen Wert in einer Gruppe von zusammengehörigen Werten festlegen. Zum Beispiel könnte in einer Produktsuche ein Schieberegler mit zwei Daumen verwendet werden, um Benutzern zu ermöglichen, die minimalen und maximalen Preisgrenzen für die Suche festzulegen.

In vielen Schiebereglern mit zwei Daumen können die Daumen nicht aneinander vorbei bewegt werden, wie zum Beispiel wenn der Schieberegler die minimalen und maximalen Werte für einen Bereich festlegt. Zum Beispiel in einem Preisbereichsselektor ist der Höchstwert des Daumens, der das untere Ende des Bereichs festlegt, durch den aktuellen Wert des Daumens begrenzt, der das obere Ende des Bereichs festlegt. Der Mindestwert des oberen Enddaumens ist ebenfalls durch den aktuellen Wert des unteren Enddaumens begrenzt.

Es ist keine Anforderung, dass die Daumen in Schiebereglern mit mehreren Daumen abhängig von den anderen Daumenwerten sind, aber eine intuitive Benutzererfahrung ist eine Anforderung, daher wird empfohlen, dieses Anti-Muster zu vermeiden.

Alle Nachkommen sind Präsentationselemente

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

Betrachten Sie z.B. folgendes slider-Element, das eine Überschrift enthält.

<div role="slider"><h3>Temperature in Celsius</h3></div>

Da Nachkommen von slider Präsentationselemente sind, ist der folgende Code gleichwertig:

<div role="slider"><h3 role="presentation">Temperature in Celsius</h3></div>

Aus der Perspektive des Benutzers von assistiver Technologie existiert die Überschrift nicht, da die vorherigen Code-Beispiele äquivalent zum Folgenden im Accessibility-Tree sind:

<div role="slider">Temperature in Celsius</div>

Zugehörige WAI-ARIA-Rollen, Zustände und Eigenschaften

aria-valuenow (erforderlich)

Auf einen Dezimalwert zwischen aria-valuemin und aria-valuemax setzen, der den aktuellen Wert des Schiebereglers angibt.

aria-valuetext

Assistive Technologien präsentieren oft den Wert von aria-valuenow als Zahl. Wenn dies nicht genau wäre, verwenden Sie aria-valuetext, um dem Schieberegler einen verständlicheren Wert zu geben.

aria-valuemin

Auf einen Dezimalwert setzen, der den minimalen Wert darstellt und kleiner ist als aria-valuemax. Wenn nicht vorhanden, ist der Standardwert 0.

aria-valuemax

Auf einen Dezimalwert setzen, der den Höchstwert darstellt und größer ist als aria-valuemin. Wenn nicht vorhanden, ist der Standardwert 100.

aria-label oder aria-labelledby

Definiert den Zeichenkettenwert oder identifiziert das Element (oder die Elemente), die das Schiebereglerelement kennzeichnen und einen zugänglichen Namen bereitstellen. Ein zugänglicher Name ist erforderlich.

aria-orientation

Gibt an, ob die Orientierung des Elements horizontal, vertikal oder unbekannt/mehrdeutig ist. Bei einem Schieberegler ist der implizite Wert horizontal, kann aber auf vertical gesetzt werden. Da er einen impliziten Wert hat, ist die Orientierung des Schiebereglers nie mehrdeutig.

Tastaturinteraktionen

Für die optionalen Tasten Bild Auf und Bild Ab sollte die Änderung des Schiebereglerwerts um einen Betrag größer sein als die Schrittänderungen, die durch Auf- und Abwärtspfeile vorgenommen werden.

Beispiele

Im folgenden Beispiel erstellen wir ein vertikales Thermometer, mit dem der Benutzer die Raumtemperatur einstellen kann:

<div>
  <div id="temperatureLabel">Temperature</div>
  <div id="temperatureValue">20°C</div>
  <div id="temperatureSlider">
    <div
      id="temperatureSliderThumb"
      role="slider"
      aria-labelledby="temperatureLabel"
      aria-orientation="vertical"
      tabindex="0"
      aria-valuemin="15.0"
      aria-valuemax="25.0"
      aria-valuenow="20.0"
      aria-valuetext="20 degrees Celsius"
      style="top: calc((25 - 20)*2rem - 0.5rem)"></div>
  </div>
</div>

Die Position des Daumens ist der Höchstwert minus den aktuellen Wert mal die Höhe eines Grades, minus die Hälfte der Höhe des Daumens, um ihn zu zentrieren. Die restlichen Stile sind statisch.

[id="temperatureSlider"] {
  position: relative;
  height: 20rem;
  width: 1rem;
  outline: 1px solid;
  margin: 3rem;
}

[id="temperatureSliderThumb"] {
  position: absolute;
  height: 1rem;
  width: 2rem;
  background-color: currentColor;
  left: -0.5rem;
}

Damit dieses Beispiel funktioniert, müssen wir ein Skript schreiben, um alle Tastatur- und Zeigerereignisse zu verarbeiten, einschließlich Event-Listener für pointermove, pointerup, focus, blur und keydown, und Stile für den Standardzustand und wenn der Daumen und der Schieberegler den Fokus erhalten. Die Position des Daumens, die aria-valuenow- und aria-valuetext-Werte und der innere Text des Elements mit der id "temperatureValue" müssen jedes Mal aktualisiert werden, wenn die Tasten Pfeil nach links, Pfeil nach unten, Pfeil nach rechts, Pfeil nach oben, Home, Ende und optional Bild Ab und Bild Auf losgelassen werden und wenn der Benutzer den Daumen zieht oder anderweitig auf den Temperaturschieberegler klickt.

Mit semantischem HTML hätte dies folgendermaßen geschrieben werden können:

<label for="temperature"> Temperature </label>
<output id="temperatureValue">20°C</output>
<input
  type="range"
  id="temperatureSlider"
  min="15"
  max="25"
  step="0.1"
  value="20"
  aria-valuetext="20 degrees celsius" />

#temperatureSlider {
  transform: rotate(-90deg);
}

Durch die Verwendung von <input> erhalten wir ein bereits gestyltes Bereichseingabewidget mit Tastaturfokus, Fokus-Styling, Tastaturinteraktionen und value, das bei Benutzerinteraktionen kostenlos aktualisiert wird. Wir müssen jedoch weiterhin JavaScript verwenden, um das aria-valuetext und den Wert des <output>-Elements zu ändern.

Es gibt einige Möglichkeiten, um eine Bereichseingabe vertikal zu machen. In diesem Beispiel haben wir CSS-Transformationen verwendet.

Beste Praktiken

Wenn der Schieberegler den Ladefortschritt eines bestimmten Bereichs einer Seite beschreibt, fügen Sie das Attribut aria-describedby hinzu, um auf den Schiebereglerstatus zu verweisen, und setzen das Attribut aria-busy auf true im Bereich, bis der Ladevorgang abgeschlossen ist.

HTML's <input type="range"> hat implizit die role von slider. Verwenden Sie nicht die Attribute aria-valuemax oder aria-valuemin auf <input type="range">-Elementen; verwenden Sie stattdessen min und max. Andernfalls gelten alle globalen aria-*-Attribute und alle anderen aria-*-Attribute, die für die slider-Rolle anwendbar sind.

Bevorzugen Sie HTML

Es wird empfohlen, einen nativen <input> vom Typ range, <input type="range">, anstelle der slider-Rolle zu verwenden.

Spezifikationen

Siehe auch

• <input type="range">,
• HTML <progress>-Element
• HTML <meter>-Element
• Andere Bereichs-Widgets umfassen:
  • meter
  • scrollbar
  • separator (wenn fokussierbar)
  • progressbar
  • spinbutton
• W3C-WAI-ARIA-Praxisbeispiele:
  • Horizontaler Multi-Daumen-Schieberegler
  • Farbbetrachter-Schieberegler
  • Bewertungs-Schieberegler
  • Mediendurchlauf-Schieberegler
  • Vertikaler Temperatur-Schieberegler