ARIA: spinbutton-Rolle

Die spinbutton-Rolle zeigt an, dass das Element ein Eingabe-Widget ist, das seinen Wert auf eine Menge oder einen Bereich diskreter Werte beschränkt. Die Rolle bietet zudem Funktionen zum Erhöhen und Verringern. Zum Beispiel kann in einem Widget, das es Benutzern ermöglicht, im Texas Holdem-Spiel einen Einsatz zu wählen, die spinbutton-Rolle es den Benutzern erlauben, eine Zahl zwischen dem minimalen und maximalen Einsatz in zulässigen Inkrementen, gemäß den aktuellen Spielregeln, zu wählen.

Das Spin-Button repräsentiert den Bereich möglicher Werte. Der Wert des Eingabe-Widgets für das Spin-Button repräsentiert den aktuellen Wert.

Spin-Buttons haben oft drei Komponenten, einschließlich eines Textfeldes, das den aktuellen Wert anzeigt, einer Taste zum Erhöhen und einer Taste zum Verringern. Das Textfeld ist in der Regel die einzige fokussierbare Komponente, da die Funktionen zum Erhöhen und Verringern über die Pfeiltasten auf der Tastatur zugänglich sind. Typischerweise ermöglicht das Textfeld den Benutzern auch, den Wert direkt zu bearbeiten.

Zusätzlich zur Angabe des tabindex-Attributs, um den Fokus auf das Spin-Button zu setzen, müssen Tastatur- und Zeigegeräte-Unterstützung implementiert werden. Richtungstasten wie die Pfeiltasten müssen für Tastaturbenutzer unterstützt werden. Das Ändern des Wertes bei Klick auf die Erhöhen- und Verringern-Tasten muss für Zeigegeräte unterstützt werden. Siehe Tastatur-Interaktionen unten.

ARIA bietet Entwicklern sechs verschiedene Bereichs-Widget-Rollen, darunter progressbar, meter, slider und spinbutton.

Die progressbar-Rolle, ähnlich dem <progress>-Element von HTML, ist ein schreibgeschützter Bereich. Sie zeigt den Fortschritt beim Abschluss einer Aufgabe an, der in eine einzige Richtung erfolgt, wie beispielsweise eine Ladefortschrittsanzeige beim Hochladen einer Datei, die bei vollständiger Ladung schließlich 100% erreicht.

Die meter-Rolle, ähnlich dem <meter>-Element von HTML, ist ein schreibgeschützter Anzeiger. Sie gibt die Menge von etwas innerhalb eines bekannten Bereichs an, wie beispielsweise die Anzeige des Akkus eines Computers oder die Tankanzeige eines Autos.

Die slider-Rolle, ähnlich einem HTML-input vom Typ range, <input type="range">, ist ein schreibgeschützter Eingabebereich. Slider erlauben es Benutzern, einen Wert zwischen vordefinierten Minimal- und Maximalwerten auszuwählen. Der Benutzer wählt einen Wert aus, indem er einen Slider-Thumb entlang eines horizontalen oder vertikalen Sliders bewegt, um einen Wert auszuwählen.

Während alle drei dieser Bereiche die gleichen ARIA-Zustände und -Eigenschaften haben, ist die spinbutton-Rolle der einzige schreibgeschützte Bereich: es ist der einzige, dessen Wert sich durch Benutzerinteraktion ändert. Daher muss es in der Lage sein, den Fokus zu erhalten. Zusätzlich muss die Tastaturinteraktion, Mausklicks und die Touch-Interaktion unterstützt werden.

Gemeinsame Attribute

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

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

Der Wert des aria-valuenow-Attributs muss zwischen dem Minimal- und Maximalwert liegen, einschließlich beider Werte. Dieses Attribut ist für spinbutton und meter erforderlich und optional für progressbar.

Für spinbutton, außer bei Verwendung von semantischen HTML-Elementen wie <input type="number">, muss der Wert des aria-valuenow-Attributs auch programmatisch aktualisiert werden, wenn der Wert aktualisiert wird.

Das optionale aria-valuetext-Attribut wird verwendet, wenn der numerische Wert des aria-valuenow-Attributs nicht den gewünschten Wert des Spin-Buttons widerspiegelt. Die optionalen Minimal-, Maximal- und aktuellen Werte sollten numerisch sein. Wenn die von diesen Zahlen repräsentierten Werte nicht numerisch sind, sollte das aria-valuetext-Attribut mit einem Zeichenwert einbezogen werden, der den numerischen Wert spezifiziert. Zum Beispiel, wenn ein Spin-Button für T-Shirt-Größen verwendet wird, sollte das aria-valuetext-Attribut von XX-Small bis XX-Large wechseln, wenn das aria-valuenow zunimmt.

Der Wert des aria-valuetext-Attributs muss aktualisiert werden, sobald der Wert oder das aria-valuenow-Attribut aktualisiert wird. ARIA-Attribute werden auf semantische HTML-Elemente angewendet. Auch wenn es kein entsprechendes HTML-Attribut für <input> gibt, können Sie aria-valuetext in jedem <input>-Typ einbeziehen. Wenn aria-valuetext ein wichtiges Merkmal für einen Spin-Button ist, ziehen Sie in Betracht, <select> mit <option>-Elementen zu verwenden.

Ein zugänglicher Name ist erforderlich. Wenn die spinbutton-Rolle auf ein HTML-<input>-Element angewendet wird, kann der zugängliche Name aus dem zugeordneten <label> stammen. Andernfalls verwenden Sie 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 Ihr Spin-Button zu erstellen, fügen Sie das tabindex-Attribut ein, um das Spin-Button fokusierbar zu machen. Die spinbutton-Rolle ist interaktiv, und erfordert daher die Fähigkeit, den Fokus zu empfangen. Der Fokus sollte auf das Eingabefeld des Spin-Buttons und nicht auf die zugehörigen Tasten gesetzt werden, die den Spin-Button-Wert erhöhen und verringern.

Es gibt einige Arten von Benutzeroberflächenkomponenten, die, wenn sie in einer Plattform-Barrierefreiheits-API dargestellt werden, nur spezifische Inhalte enthalten können. Die Kinder oder enthaltenen Elemente des spinbutton sind auf ein Textfeld und zwei Tasten beschränkt. Alternativ kann die spinbutton-Rolle auf ein text-Eingabefeld angewendet werden und Nachbarschaftstasten können verwendet werden, um die Erhöhungs- und Verringerungsfunktionen zu unterstützen.

aria-valuenow (erforderlich)

Auf einen Dezimalwert gesetzt, der zwischen aria-valuemin und aria-valuemax liegt, gibt er den aktuellen Wert des Spin-Buttons an. Wenn nicht vorhanden, gibt es keinen Standardwert.

aria-valuetext

Unterstützungstechnologien präsentieren oft den Wert von aria-valuenow als Zahl. Wenn aria-valuenow nicht genau sein kann, verwenden Sie aria-valuetext, um dem Spin-Button einen verständlicheren Wert zu bieten.

aria-valuemin

Auf einen Dezimalwert gesetzt, der den minimalen Wert darstellt und kleiner als aria-valuemax ist. Wenn nicht vorhanden, gibt es keinen Standardwert.

aria-valuemax

Auf einen Dezimalwert gesetzt, der den maximalen Wert darstellt und größer als aria-valuemin ist. Wenn nicht vorhanden, gibt es keinen Standardwert.

aria-labelledby

Definiert den Zeichenwert oder identifiziert das Element (oder die Elemente), die das Spin-Button-Element benennen und einen zugänglichen Namen bereitstellen. Ein zugänglicher Name ist erforderlich.

aria-label

Definiert einen Zeichenwert, der das Spin-Button-Element beschreibt. Dies stellt dem Element einen zugänglichen Namen zur Verfügung, wenn kein sichtbares Label vorhanden ist, um den erforderlichen zugänglichen Namen über <label> oder aria-labelledby bereitzustellen.

Im folgenden Beispiel wurde eine spinbutton-Rolle definiert, um Benutzern zu ermöglichen, einen Tag des Monats auszuwählen.

<p id="day">Enter the day of the month</p>
<button type="button" tabindex="-1" aria-label="previous day">˱</button>
<div
  role="spinbutton"
  tabindex="0"
  aria-valuenow="1"
  aria-valuetext="first"
  aria-valuemin="1"
  aria-valuemax="31"
  aria-labelledby="day">
  1
</div>
<button type="button" tabindex="-1" aria-label="next day">˲</button>

In diesem Beispiel haben wir einem negativen tabindex hinzugefügt, um die Tasten aus der Standard-Tabulatorreihenfolge zu entfernen. Wir haben auch tabindex zu einem normalerweise nicht interaktiven <div> hinzugefügt, um das Spin-Button selbst in die Tabulatorreihenfolge aufzunehmen. Dieses Beispiel erfordert JavaScript, um Tastaturaktionen zu bearbeiten, wenn das Spin-Button den Fokus hat, und wenn ein Mausbenutzer auf die Tasten klickt.

Dies könnte auch unter Verwendung von semantischem HTML geschrieben werden, wodurch die Notwendigkeit für CSS oder JavaScript entfällt und auch die Notwendigkeit, zusätzliche Schaltflächen zur Erhöhung und Verringerung einzuschließen und deren Funktionalität bereitzustellen. Der folgende Code-Schnipsel zeigt das vorherige Beispiel ohne die spinbutton-Rolle und unter Verwendung von semantischem HTML.

<label for="day">Enter the day of the month</label>
<input
  type="number"
  value="1"
  aria-valuetext="first"
  min="1"
  max="31"
  id="day" />

In diesem Fall wäre das einzige erforderliche JavaScript die Aktualisierung des aria-valuetext, wenn sich der Eingabewert ändert, was in diesem Fall wirklich eine optionale Funktion ist.

Für die optionalen Bild-auf und Bild-ab-Tasten sollte die Änderung des Spin-Button-Werts vorzugsweise um einen Betrag größer als die Schrittänderungen, die durch Auf- und Abwärtspfeiltasten durchgeführt werden, erfolgen.

Das HTML-Element <input type="number"> hat implizit die role von spinbutton. Das HTML-Element <input type="date"> hat 3 verschachtelte Spin-Buttons, eines für Monat, Tag und Jahr. Bei der Verwendung von semantischen HTML-Formularelementen für deren beabsichtigte Zwecke, verwenden Sie nicht die Attribute aria-valuemax oder aria-valuemin; verwenden Sie stattdessen min und max. Andernfalls sind alle globalen aria-*-Attribute und alle anderen aria-*-Attribute auf die spinbutton-Rolle anwendbar.

Es wird empfohlen, das native <input>-Element vom Typ number, <input type="number">, anstelle der spinbutton-Rolle zu verwenden.

• <input type="number">
• <input type="date">
• <input type="time">
• Weitere Bereichs-Widgets umfassen:
  • meter
  • scrollbar
  • separator (wenn fokussierbar)
  • progressbar
  • slider
• Funktionierende Beispiele:
  • Datumsauswahl Spin-Button Beispiel
  • Symbolleistenbeispiel: Schriftgrößenauswahl