ARIA: Slider-Rolle

Beschreibung

Die slider-Rolle ist für Bereicheingabe-Widgets gedacht, bei denen der Benutzer einen Wert innerhalb vorgegebener minimaler und maximaler Werte auswählt.

Die slider-Rolle im Vergleich zu anderen Bereichsoptionen

ARIA bietet Entwicklern sechs verschiedene Widget-Rollen für Bereiche, darunter progressbar, meter und slider.

Die progressbar-Rolle, ähnlich dem HTML-Element <progress>, ist ein schreibgeschützter Bereich, der den Fortschritt einer Aufgabe anzeigt, der in eine Richtung verläuft, wie beispielsweise eine Ladefortschrittsleiste für Datei-Uploads, die schließlich 100 % erreicht, wenn sie vollständig geladen ist.

Die meter-Rolle, ähnlich dem HTML-Element <meter>, ist ein schreibgeschütztes Messgerät, das die Menge von etwas innerhalb eines bekannten Bereichs anzeigt, wie beispielsweise einen Batteriezustandsanzeiger eines Computers oder eine Tankanzeige eines Autos.

Die slider-Rolle, ähnlich einem HTML-input vom Typ range, <input type="range">, ist eine Lese-/Schreib-Bereicheingabe. Slider ermöglichen es Benutzern, einen Wert zwischen festgelegten minimalen und maximalen Werten auszuwählen. Der Benutzer wählt einen Wert aus, indem er einen Schiebereglerknopf entlang eines horizontalen oder vertikalen Sliders bewegt.

Obwohl alle drei dieser Bereiche die gleichen ARIA-Zustände und -Eigenschaften haben, ist die slider-Rolle der einzige Lese-/Schreib-Bereich: Es ist der einzige, dessen Wert durch Benutzerinteraktion geändert wird. Daher muss er in der Lage sein, den Fokus zu erhalten. Darüber hinaus müssen Tastaturinteraktion, Mausklicks und Berührungsinteraktion unterstützt werden.

Gemeinsame Attribute

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

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

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

Für slider, sofern nicht das <input type="range">-Element verwendet wird, muss der aria-valuenow-Wert programmgesteuert aktualisiert werden, wenn der Benutzer den Wert aktualisiert.

Das optionale aria-valuetext-Attribut wird mit einbezogen, wenn der aria-valuenow-Zahlenwert den beabsichtigten Wert des Sliders nicht widerspiegelt. Da die minimalen, maximalen und aktuellen Werte alle numerisch sind, sollte das aria-valuetext-Attribut mit einem String-Wert einbezogen werden, der den numerischen Wert definiert, wenn die Zahlenwerte, die diese Zahlen darstellen, nicht numerisch sind. Zum Beispiel, wenn ein Slider für T-Shirt-Größen verwendet wird, sollte das aria-valuetext-Attribut von xx-small bis zu XX-large wechseln, während aria-valuenow zunimmt.

Der Wert von aria-valuetext muss aktualisiert werden, wenn der value oder aria-valuenow aktualisiert wird. Obwohl es kein äquivalentes HTML-Attribut für <input type="range"> gibt, können Sie aria-valuetext für jedes <input>-Typ-Element einbeziehen. ARIA-Attribute werden auf semantischen HTML-Elementen unterstützt.

Wenn aria-valuetext ein wichtiges Merkmal für einen Slider ist, sollten Sie in Betracht ziehen, <select> mit <option>-Elementen zu verwenden. Auch wenn es optisch kein Bereich ist, ist der Wert jeder Option für alle Benutzer besser zugänglich, nicht nur für Benutzer von Hilfstechnologien.

Ein zugänglicher Name ist erforderlich. Wenn die Bereichsrolle auf ein HTML-<input>-Element (oder <meter>- oder <progress>-Element) angewendet wird, kann der zugängliche Name vom zugehörigen <label> stammen. Verwenden Sie andernfalls aria-labelledby, wenn ein sichtbares Label vorhanden ist oder aria-label, wenn kein sichtbares Label vorhanden ist.

Wenn das HTML-<input>-Element nicht verwendet wird, um Ihren Slider zu erstellen, fügen Sie das tabindex-Attribut hinzu, um den Slider 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 Slider-Knopf gelegt werden.

Slider 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 akzeptiert. Zusätzlich zur Einbeziehung des tabindex-Attributs, um den Slider fokussierbar zu machen, muss Unterstützung für Tastatur- und Zeigegeräte implementiert werden.

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

Bereich mit mehreren Knöpfen

Ein Multi-Knopf-Slider ist ein Slider mit zwei oder mehr Knöpfen, die jeweils einen Wert in einer Gruppe verwandter Werte festlegen. Zum Beispiel könnte ein Zwei-Knopf-Slider in einer Produktsuche verwendet werden, um Benutzern zu ermöglichen, die minimalen und maximalen Preisgrenzen für die Suche festzulegen.

In vielen Zwei-Knopf-Slidern dürfen die Knöpfe nicht aneinander vorbeigleiten, wie zum Beispiel, wenn der Slider die minimalen und maximalen Werte für einen Bereich festlegt. Zum Beispiel bei einem Preisbereichsselektor ist der Maximalwert des Knopfs, der das untere Ende des Bereichs festlegt, durch den aktuellen Wert des Knopfs, der das obere Ende des Bereichs festlegt, begrenzt. Der Minimalwert des oberen Knopfs ist ebenfalls durch den aktuellen Wert des unteren Knopfs begrenzt.

Es ist keine Anforderung, dass die Knöpfe in Multi-Knopf-Slidern von den Werten der anderen Knöpfe abhängig sind, aber eine intuitive Benutzererfahrung ist eine Anforderung, daher wird empfohlen, dieses Anti-Muster zu vermeiden.

Alle Nachkommen sind präsentativ

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

Betrachten Sie zum Beispiel das folgende slider-Element, das eine Überschrift enthält.

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

Da Nachkommen von slider präsentativ sind, ist der folgende Code äquivalent:

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

Aus der Perspektive eines Benutzers von Hilfstechnologie existiert die Überschrift nicht, da die vorherigen Code-Auszüge äquivalent zu den folgenden im Accessibility-Tree sind:

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

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

aria-valuenow (erforderlich)

Setzen Sie auf einen Dezimalwert zwischen aria-valuemin und aria-valuemax, der den aktuellen Wert des Sliders anzeigt.

aria-valuetext

Hilfstechnologien präsentieren häufig den Wert von aria-valuenow als Zahl. Wenn dies nicht zutreffend wäre, verwenden Sie aria-valuetext, um dem Slider einen verständlicheren Wert zu geben.

aria-valuemin

Setzen Sie auf einen Dezimalwert, der den Minimalwert darstellt und kleiner ist als aria-valuemax. Wenn nicht vorhanden, ist der Standardwert 0.

aria-valuemax

Setzen Sie auf einen Dezimalwert, der den Maximalwert darstellt und größer ist als aria-valuemin. Wenn nicht vorhanden, ist der Standardwert 100.

aria-label oder aria-labelledby

Definiert den Zeichenfolgenwert oder identifiziert das Element (oder die Elemente), die das Slider-Element beschriften und einen zugänglichen Namen bereitstellen. Ein zugänglicher Name ist erforderlich.

aria-orientation

Gibt an, ob die Ausrichtung des Elements horizontal, vertikal oder unbekannt/mehrdeutig ist. Bei einem Slider ist der implizite Wert horizontal, kann jedoch auf vertical gesetzt werden. Da er einen impliziten Wert hat, ist die Slider-Ausrichtung niemals mehrdeutig.

Tastaturinteraktionen

Für die optionalen Page Up und Page Down-Tasten sollte die Änderung des Slider-Werts um einen Betrag größer sein als die Schrittänderungen, die von den Aufwärts- und Abwärtspfeiltasten 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 Knopfs ist der maximale Wert minus den aktuellen Wert multipliziert mit der Höhe eines Grades, minus die Hälfte der Höhe des Knopfs, um ihn zu zentrieren. Die restlichen Styles 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 Zeigegeräteereignisse zu behandeln, einschließlich Ereignislistener für pointermove, pointerup, focus, blur und keydown. Außerdem müssen wir Stile für den Standardzustand und wenn der Knopf und der Slider den Fokus erhalten, bereitstellen. Die Position des Knopfs, 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 Links, Pfeil Unten, Pfeil Rechts, Pfeil Oben, Home, End und, optional, Page Down und Page Up losgelassen werden und wenn der Benutzer den Knopf zieht oder anderweitig auf den Temperaturslider 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 Bereichseingabeelement mit Tastaturfokus, Fokusstyling, Tastaturinteraktionen und value, das bei Benutzerinteraktion aktualisiert wird, kostenlos dazu. Wir müssen dennoch JavaScript verwenden, um aria-valuetext und den Wert des <output>-Elements zu ändern.

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

Beste Praktiken

Wenn der Slider den Ladefortschritt eines bestimmten Bereichs einer Seite beschreibt, fügen Sie das aria-describedby-Attribut hinzu, um den Sliderstatus zu referenzieren, und setzen Sie das aria-busy-Attribut auf true für den Bereich, bis das Laden abgeschlossen ist.

Das HTML-Element <input type="range"> hat implizit die role-Rolle slider. Verwenden Sie nicht die Attribute aria-valuemax oder aria-valuemin für <input type="range">-Elemente; verwenden Sie stattdessen min und max. Andernfalls sind alle globalen aria-*-Attribute und andere aria-*-Attribute, die für die Slider-Rolle anwendbar sind, zu verwenden.

Bevorzugen Sie HTML

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

Spezifikationen

Siehe auch

• <input type="range">,
• HTML-<progress>-Element
• HTML-<meter>-Element
• Andere Bereichs-Widgets beinhalten:
  • meter
  • scrollbar
  • separator (wenn fokussierbar)
  • progressbar
  • spinbutton
• W3C WAI-ARIA Praktiken-Beispiele:
  • Horizontale Multi-Knopf-Slider
  • Farbbetrachter-Slider
  • Bewertungs-Slider
  • Medien-Such-Slider
  • Vertikaler Temperatur-Slider