ARIA: slider-Rolle

Die slider-Rolle wird für Widgets zur Bereichseingabe verwendet, bei denen der Benutzer einen Wert innerhalb gegebener Minimal- und Maximalwerte auswählt.

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

Die progressbar-Rolle, ähnlich dem <progress>-Element in HTML, ist ein schreibgeschützter Bereich, der den Fortschritt einer Aufgabe in eine Richtung anzeigt, wie z. B. die Ladefortschrittsanzeige beim Hochladen einer Datei, die letztendlich 100% erreicht, wenn sie vollständig geladen ist.

Die meter-Rolle, ähnlich dem <meter>-Element in HTML, ist ein schreibgeschütztes Messgerät, das die Menge von etwas innerhalb eines bekannten Bereichs anzeigt, wie z. B. den Batteriestand eines Computers oder die Tankanzeige eines Autos.

Die slider-Rolle, ähnlich einem HTML-input vom Typ range, <input type="range">, ist eine beschreibbare Eingabebereichsrolle. Schieberegler ermöglichen es Benutzern, einen Wert zwischen festgelegten Minimal- und Maximalwerten auszuwählen. Der Benutzer wählt einen Wert aus, indem er einen Schieberegler, entweder horizontal oder vertikal, bewegt, um einen Wert auszuwählen.

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

Das aria-valuemin-Attribut legt den Minimalwert fest. Wenn es weggelassen oder keine Zahl ist, wird standardmäßig 0 (null) angenommen.

Das aria-valuemax-Attribut definiert den Maximalwert. Wenn es fehlt oder keine Zahl ist, wird standardmäßig 100 angenommen.

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

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

Das optionale aria-valuetext-Attribut wird verwendet, wenn der numerische Wert von aria-valuenow nicht den beabsichtigten Wert des Sliders wiedergibt. Da die Minimal-, Maximal- und aktuellen Werte alle numerisch sind, sollte das aria-valuetext-Attribut mit einem Zeichenfolgenwert enthalten sein, wenn die von diesen Zahlen repräsentierten Werte nicht numerisch sind. Wenn beispielsweise ein Slider für T-Shirt-Größen verwendet wird, sollte das aria-valuetext-Attribut von XX-klein bis XX-groß wechseln, während aria-valuenow erhöht wird.

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

Wenn aria-valuetext eine wichtige Funktion für einen Slider ist, ziehen Sie in Betracht, <select> mit <option>-Elementen zu verwenden. Obwohl nicht visuell ein Bereich, ist der Wert jeder Option für alle Benutzer zugänglicher, nicht nur für Benutzer von unterstützenden Technologien.

Ein barrierefreier Name ist erforderlich. Wenn die Rolle des Bereichs auf ein HTML-<input>-Element (oder ein <meter>- oder <progress>-Element) angewendet wird, kann der barrierefreie Name vom 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 das HTML-<input>-Element nicht verwenden, 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 erfordert daher die Fähigkeit, den Fokus zu erhalten. Der Fokus sollte auf das Slider-Daumen gelegt werden.

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

Im Gegensatz zu den schreibgeschützten meter- und progressbar-Rollen akzeptiert ein slider Benutzerinteraktionen. Zusätzlich zum Einschließen des tabindex-Attributs, um den Slider fokussierbar zu machen, muss auch Tastatur- und Pointer-Geräteunterstützung implementiert werden.

Der Slider stellt den Bereich der möglichen Werte dar. Die Position des Slider-Daumens entlang des Sliders stellt den aktuellen Wert dar. Unterstützte Benutzeraktionen umfassen das Ändern des Wertes durch Ziehen des Daumens oder Klicken auf den Slider für Zeigegeräte und die Verwendung von Richtungstasten wie Pfeiltasten für Tastaturbenutzer. Siehe Tastaturinteraktionen weiter unten.

Ein Mehrfach-Daumen-Slider ist ein Slider mit zwei oder mehr Daumen, die jeweils einen Wert in einer Gruppe verwandter Werte festlegen. Beispielsweise könnte ein Zwei-Daumen-Slider in einer Produktsuche verwendet werden, um es Benutzern zu ermöglichen, die minimalen und maximalen Preislimits für die Suche festzulegen.

In vielen Zwei-Daumen-Slidern dürfen die Daumen sich gegenseitig nicht überschreiten, wie z. B. wenn der Slider die Minimal- und Maximalwerte für einen Bereich festlegt. Zum Beispiel ist im Preisbereichsselektor der Maximalwert des Daumens, der das untere Ende des Bereichs festlegt, durch den aktuellen Wert des Daumens begrenzt, der das obere Ende des Bereichs festlegt. Der Minimalwert des Daumens für das obere Ende ist ebenfalls durch den aktuellen Wert des Daumens für das untere Ende begrenzt.

Es ist nicht erforderlich, dass die Daumen in Mehrfach-Daumen-Slidern von den anderen Daumenwerten abhängen, aber eine intuitive Benutzererfahrung ist erforderlich, daher wird empfohlen, dieses Anti-Muster zu vermeiden.

Es gibt einige Arten von Benutzeroberflächenkomponenten, die, wenn sie in einer Plattform-Barrierefreiheits-API dargestellt werden, nur Text enthalten können. Barrierefreiheits-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 Nachkommen eines beliebigen slider-Elements an, da es sich um eine Rolle handelt, 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 des slider darstellend sind, ist der folgende Code äquivalent:

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

Aus der Perspektive des Benutzers assistiver Technologien existiert die Überschrift nicht, da die vorherigen Codebeispiele dem folgenden im Barrierefreiheitsbaum entsprechen:

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

aria-valuenow (erforderlich)

Wird auf einen Dezimalwert zwischen aria-valuemin und aria-valuemax gesetzt, der den aktuellen Wert des Sliders angibt.

aria-valuetext

Oft präsentieren unterstützende Technologien den Wert von aria-valuenow als Zahl. Wenn dies nicht korrekt wäre, verwenden Sie aria-valuetext, um dem Slider einen verständlicheren Wert zu geben.

aria-valuemin

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

aria-valuemax

Wird auf einen Dezimalwert eingestellt, der den Maximalwert darstellt und größer als aria-valuemin ist. 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 labeln und einen barrierefreien Namen bereitstellen. Ein barrierefreier 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 es einen impliziten Wert hat, ist die Slider-Ausrichtung nie mehrdeutig.

Für die optionalen Bild auf und Bild ab-Tasten sollte die Änderung des Slider-Wertes um einen Betrag erfolgen, der größer ist als die mit Aufwärts- und Abwärtspfeilen vorgenommenen Schrittänderungen.

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 Maximalwert minus der aktuelle Wert mal die Höhe eines Grads, minus die halbe Höhe des Daumens, um ihn zu zentrieren. Der Rest der Stile ist 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 handhaben, einschließlich Ereignislistener für pointermove, pointerup, focus, blur und keydown, und Stile für den Standardzustand bereitstellen, wenn der Daumen und der Slider 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 ArrowLeft, ArrowDown, ArrowRight, ArrowUp, Home, End und, optional, PageDown und PageUp losgelassen werden und wenn der Benutzer den Daumen zieht oder den Temperatur-Slider anderweitig anklickt.

Mit semantischem HTML könnte dies geschrieben werden als:

<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"
  style="transform: rotate(-90deg);" />

Durch die Verwendung von <input> erhalten wir ein bereits gestyltes Bereichseingabe-Widget mit Tastaturfokus, Fokusstyling, Tastaturinteraktionen und value, das bei Benutzerinteraktion automatisch aktualisiert wird. Wir müssen jedoch immer noch 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.

Wenn der Slider den Ladefortschritt eines bestimmten Bereichs einer Seite beschreibt, fügen Sie das aria-describedby-Attribut hinzu, um den Slider-Status zu referenzieren, und setzen Sie das aria-busy-Attribut auf true auf dem Bereich, bis er fertig geladen ist.

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

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

• <input type="range">,
• HTML <progress>-Element
• HTML <meter>-Element
• Andere Bereichs-Widgets umfassen:
  • meter
  • scrollbar
  • separator (falls fokussierbar)
  • progressbar
  • spinbutton
• W3C WAI-ARIA Praxisbeispiele:
  • Horizontaler Mehrfach-Daumen-Slider
  • Farbansicht-Slider
  • Bewertungs-Slider
  • Medien-Such-Slider
  • Vertikaler Temperatur-Slider