ARIA: Slider-Rolle

Die slider-Rolle definiert ein Eingabefeld, bei dem der Benutzer einen Wert aus einem gegebenen Bereich auswählt.

Beschreibung

Die slider-Rolle ist für Bereiche von Eingabewidgets, bei denen der Benutzer einen Wert aus vorgegebenen minimalen und maximalen Werten auswählt.

Die slider-Rolle im Vergleich zu anderen Bereichsoptionen

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

Die progressbar-Rolle, ähnlich dem HTML-Element <progress>, ist ein schreibgeschützter Bereich, der den Fortschritt einer Aufgabe in einer Richtung anzeigt, zum Beispiel die Ladefortschrittsanzeige eines Datei-Uploads, die schließlich 100 % erreicht, wenn sie vollständig geladen ist.

Die meter-Rolle, ähnlich dem HTML-Element <meter>, ist ein schreibgeschützter Anzeiger, der die Menge von etwas innerhalb eines bekannten Bereichs anzeigt, beispielsweise eine Akkuanzeige eines Computers oder eine Tankanzeige eines Autos.

Die slider-Rolle, ähnlich einem HTML-input vom Typ range, <input type="range">, ist ein beschreib- und veränderbarer Eingabebereich. 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 Schiebergriff entlang einer horizontalen oder vertikalen Schiene bewegt.

Obwohl alle drei dieser Bereiche dieselben ARIA-Zustände und -Eigenschaften haben, ist die slider-Rolle der einzige veränderliche Bereich: Sie ist der einzige, bei dem sich der Wert durch Benutzerinteraktion ändern kann. Daher muss sie in der Lage sein, den Fokus zu erhalten. Darüber hinaus müssen Tastatursteuerung, Mausklicks und Touch-Interaktionen unterstützt werden.

Gemeinsame Attribute

Das aria-valuemin-Attribut legt den Mindestwert fest. Wenn es weggelassen oder keine Zahl ist, beträgt der Standardwert 0 (Null).

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

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

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

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

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

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

Ein barrierefreier Name ist erforderlich. Wenn die Rolle des Bereiches auf ein HTML-<input>-Element (oder <meter> oder <progress>-Element) angewendet wird, kann der zugängliche Name aus dem zugehörigen <label> stammen. Andernfalls verwenden Sie aria-labelledby, wenn ein sichtbares Etikett vorhanden ist, oder aria-label, wenn kein sichtbares Etikett 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 interaktiv für den Benutzer und daher der einzige, der den Fokus erhalten muss. Der Fokus sollte auf den Slidergriff gelegt werden.

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

Benutzerinteraktionen

Im Gegensatz zu den schreibgeschützten meter- und progressbar-Rollen ist ein slider eine Eingabe, die Benutzerinteraktionen akzeptiert. Zusätzlich zur Einfügung des tabindex-Attributs zur Ermöglichung des Sliderfokus, müssen Tastatur- und Zeigereingabegeräte unterstützt werden.

Der Slider repräsentiert den Bereich der möglichen Werte. Die Position des Slidergriffs entlang des Sliders repräsentiert den aktuellen Wert. Benutzeraktionen, die unterstützt werden müssen, umfassen das Ändern des Wertes durch Ziehen des Griffs 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 Griffen

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

In vielen Zwei-Griff-Slidern dürfen sich die Griffe nicht gegenseitig passieren, wie etwa beim Festlegen der minimalen und maximalen Werte für einen Bereich. Zum Beispiel wird in einem Preisspannenselektor der maximale Wert des Griffs, der das untere Ende des Bereichs festlegt, durch den aktuellen Wert des Griffs begrenzt, der das obere Ende des Bereichs festlegt. Der minimale Wert des oberen Endgriffs ist ebenfalls durch den aktuellen Wert des unteren Endgriffs begrenzt.

Es ist keine Voraussetzung, dass die Griffe in Multi-Griff-Slidern von den anderen Griffwerten abhängig sind, dennoch ist eine intuitive Benutzererfahrung eine Anforderung, daher wird empfohlen, dieses Anti-Pattern zu vermeiden.

Alle Nachfahren sind präsentational

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

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

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

Da Nachfahren eines slider präsentational sind, ist der folgende Code gleichwertig:

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

Aus der Sicht eines Benutzers einer unterstützenden Technologie existiert die Überschrift nicht, da die vorherigen Codeausschnitte dem folgenden im Accessibility-Tree gleichwertig sind:

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

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

aria-valuenow (erforderlich)

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

aria-valuetext

Unterstützende Technologien präsentieren oft den Wert von aria-valuenow als Zahl. Wenn dies nicht zutreffend ist, verwenden Sie aria-valuetext, um dem Slider einen verständlicheren Wert zu geben.

aria-valuemin

Festgelegt auf einen Dezimalwert, der den Minimalwert darstellt und kleiner ist als aria-valuemax. Wenn nicht vorhanden, beträgt der Standardwert 0.

aria-valuemax

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

aria-label oder aria-labelledby

Definiert den Zeichenfolgenwert oder identifiziert das Element (oder die Elemente), die das Slider-Element mit einem barrierefreien Namen versehen. Ein barrierefreier Name ist erforderlich.

aria-orientation

Gibt an, ob die Orientierung 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-Orientierung niemals mehrdeutig.

Tastaturinteraktionen

Für die optionalen Bild-Auf und Bild-Ab-Tasten sollte die Änderung im Slider-Wert um einen Betrag größer sein als die Schrittänderungen, die durch die 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 Schiebergriffs ist der Maximalwert minus der aktuelle Wert multipliziert mit der Höhe eines Grades, minus der halben Höhe des Griffs, 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, das alle Tastatur- und Zeigereignisse verarbeitet, einschließlich Ereignislistener für pointermove, pointerup, focus, blur und keydown, und Stile für den Standardzustand und wenn der Griff und der Slider den Fokus erhalten, bereitstellen. Die Position des Griffs, 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 PfeilLinks, PfeilUnten, PfeilRechts, PfeilOben, Pos1, Ende, und optional die Tasten BildAb und BildAuf losgelassen werden und wenn der Benutzer den Griff zieht oder anderweitig auf den Temperaturslider klickt.

Unter Verwendung semantischen HTMLs 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 Bereichseingabewidget mit Tastaturfokus, Fokus-Styling, Tastaturinteraktionen und value, die bei Benutzerinteraktion automatisch aktualisiert werden. Wir müssen immer noch JavaScript verwenden, um aria-valuetext und den Wert des <output>-Elements zu ändern.

Es gibt einige Möglichkeiten, ein Bereichseingabefeld vertikal zu gestalten. 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 Status des Sliders zu referenzieren, und setzen Sie das aria-busy-Attribut auf true auf dem Bereich, bis das Laden abgeschlossen ist.

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

Bevorzugen Sie HTML

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

Spezifikationen

• Accessible Rich Internet Applications (WAI-ARIA)
  # slider

Siehe auch

• <input type="range">,
• HTML <progress>-Element
• HTML <meter>-Element
• Weitere Bereichswidgets sind:
  • meter
  • scrollbar
  • separator (wenn fokussierbar)
  • progressbar
  • spinbutton
• W3C WAI-ARIA Praxisbeispiele:
  • Horizontaler Slider mit mehreren Griffen
  • Farbbetrachter-Slider
  • Bewertungs-Slider
  • Medien-Such-Slider
  • Vertikaler Temperaturslider