ARIA: spinbutton-Rolle

Beschreibung

Die spinbutton-Rolle zeigt an, dass das Element ein Eingabe-Widget ist, das seinen Wert auf eine festgelegte oder einen diskreten Wertebereich beschränkt. Die Rolle bietet auch eine Funktion zur Erhöhung und Verringerung. Beispielsweise kann in einem Widget, das es den Benutzern ermöglicht, einen Betrag für ein Texas Holdem-Spiel zu setzen, die spinbutton-Rolle es den Benutzern erlauben, eine Zahl zwischen dem minimalen und maximalen Einsatz in zulässigen Schritten zu wählen, wie es die aktuellen Spielregeln vorsehen.

Das Spinbutton repräsentiert den Bereich möglicher Werte. Der Wert der Spinbutton-Eingabe stellt den aktuellen Wert dar.

Spinbuttons haben oft drei Komponenten, darunter ein Textfeld, das den aktuellen Wert anzeigt, eine Erhöhungsschaltfläche und eine Verringerungsschaltfläche. Das Textfeld ist in der Regel die einzige fokussierbare Komponente, da die Erhöhungs- und Verringerungsfunktionen über Tastaturpfeile zugänglich sind. Normalerweise erlaubt das Textfeld den Benutzern auch, den Wert direkt zu bearbeiten.

Zusätzlich zur Einbeziehung des tabindex-Attributs zur Aktivierung des Spinbutton-Fokus müssen Tastatur- und Zeigegeräteunterstützung implementiert werden. Richtungstasten wie die Pfeiltasten müssen für Tastaturbenutzer unterstützt werden. Die Änderung des Wertes bei Klicks auf Erhöhungs- und Verringerungsschaltflächen muss für Zeigegeräte unterstützt werden. Siehe Tastaturinteraktionen unten.

ARIA Bereichs-Widget-Optionen

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

Die progressbar-Rolle, ähnlich dem <progress>-Element von HTML, ist ein schreibgeschützter Bereich. Sie zeigt den Abschlussanteil einer Aufgabe an, die in eine Richtung fortschreitet, wie beispielsweise die Ladefortschrittsleiste beim Hochladen einer Datei, die bei voller Ladung 100 % erreicht.

Die meter-Rolle, ähnlich dem <meter>-Element von HTML, ist ein schreibgeschütztes Messgerät. Sie zeigt die Menge von etwas innerhalb eines bekannten Bereichs an, wie z. B. die Batterieanzeige eines Computers oder eine Tankanzeige eines Autos.

Die slider-Rolle, ähnlich dem range-input-Typ von HTML, <input type="range">, ist ein les- und schreibbarer Eingabebereich. Schieberegler ermöglichen es Benutzern, einen Wert zwischen den vordefinierten minimalen und maximalen Werten auszuwählen. Der Benutzer wählt einen Wert, indem er einen Schiebegriff entlang eines horizontalen oder vertikalen Schiebereglers bewegt.

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

Gemeinsame Attribute

Das aria-valuemin-Attribut setzt den Mindestwert. Wenn es weggelassen wird oder keine Zahl ist, wird es standardmäßig auf 0 (null) gesetzt.

Das aria-valuemax-Attribut definiert den Höchstwert. Wenn es fehlt oder keine Zahl ist, wird es standardmäßig auf 100 gesetzt.

Der Wert des aria-valuenow-Attributs muss zwischen dem Mindest- und Höchstwert liegen, einschließlich beider. Dieses Attribut ist für meter erforderlich und optional für progressbar.

Für spinbutton, sofern keine semantischen HTML-Elemente wie <input type="number"> verwendet werden, muss der aria-valuenow-Wert bei einer Wertänderung programmatisch aktualisiert werden.

Das optionale aria-valuetext-Attribut wird verwendet, wenn der numerische aria-valuenow-Wert nicht den beabsichtigten Wert des Spinbuttons widerspiegelt. Die optionalen minimalen, maximalen und aktuellen Werte sollten numerisch sein. Wenn die Zahlen, die diese Werte darstellen, nicht numerisch sind, sollte das aria-valuetext-Attribut mit einem Zeichenfolgenwert, der den numerischen Wert definiert, einbezogen werden. Beispielsweise sollte beim Einsatz eines Spinbuttons für T-Shirt-Größen das aria-valuetext-Attribut von XX-Small bis XX-Large wechseln, während aria-valuenow zunimmt.

Der aria-valuetext-Wert muss aktualisiert werden, wenn der Wert oder aria-valuenow aktualisiert wird. ARIA-Attribute werden auf semantischen HTML-Elementen unterstützt. Obwohl es kein entsprechendes HTML-Attribut für <input> gibt, kann aria-valuetext auf jedem <input>-Typ einbezogen werden. Wenn aria-valuetext ein wichtiges Merkmal für ein Spinbutton ist, sollten Sie in Erwägung ziehen, <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 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 Ihr Spinbutton zu erstellen, fügen Sie das tabindex-Attribut hinzu, um den Spinbutton fokussierbar zu machen. Die spinbutton-Rolle ist benutzerinteraktiv und erfordert daher, den Fokus erhalten zu können. Der Fokus sollte auf die Spinbutton-Eingabe gelegt werden, nicht auf die zugehörigen Schaltflächen, die den Spinbutton-Wert erhöhen und verringern.

Nachkommen beschränkt auf Tasten oder Text

Es gibt einige Typen von Benutzeroberflächenkomponenten, die, wenn sie in einer Plattform-Zugänglichkeits-API dargestellt werden, nur bestimmten Inhalt enthalten können. Die Kinder oder zugeordneten Elemente von spinbutton sind auf ein Textfeld und zwei Tasten beschränkt. Alternativ kann die spinbutton-Rolle auf eine text-Eingabe angewendet werden, und benachbarte Tasten können verwendet werden, um die Funktionen zur Erhöhung und Verringerung zu unterstützen.

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

aria-valuenow

Auf einen Dezimalwert zwischen aria-valuemin und aria-valuemax gesetzt, der den aktuellen Wert des Spinbuttons anzeigt. Wenn nicht vorhanden, hat das Spinbutton-Element keinen aktuellen Wert.

aria-valuetext

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

aria-valuemin

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

aria-valuemax

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

aria-labelledby

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

aria-label

Definiert einen Zeichenfolgenwert, der das Spinbutton-Element beschriftet. Dies gibt dem Element einen zugänglichen Namen, wenn kein sichtbares Label verfügbar ist, das den erforderlichen zugänglichen Namen über <label> oder aria-labelledby bereitstellt.

Tastaturinteraktionen

Für die optionalen Tasten Bild auf und Bild ab sollte die Änderung des Spinbutton-Werts vorzugsweise um einen Betrag größer als die Schrittänderungen von Pfeiltasten nach oben und unten erfolgen.

Beispiele

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 einen negativen tabindex eingeschlossen, um die Schaltflächen aus der Standard-Tab-Reihenfolge zu entfernen. Wir haben auch tabindex hinzugefügt zu einem normalerweise nicht interaktiven <div>, um dem Spinbutton selbst zur Tab-Reihenfolge hinzuzufügen. Dieses Beispiel erfordert JavaScript, um Tastaturaktionen zu bearbeiten, wenn der Spinbutton im Fokus ist und wenn ein Mausbenutzer auf die Schaltflächen klickt.

Mit semantischem HTML

Dies könnte auch mit semantischem HTML geschrieben werden, wodurch die Notwendigkeit für CSS oder JavaScript entfällt und die Notwendigkeit, zusätzliche Erhöhungs- und Verringerungstasten einzuschließen und Funktionalitäten bereitzustellen, entfällt. Der folgende Codeausschnitt 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 benötigte JavaScript, um das aria-valuetext zu aktualisieren, wenn sich der Eingabewert ändert, was in diesem Fall wirklich ein optionales Merkmal ist.

Beste Praktiken

HTML's <input type="number"> hat implizit die role von spinbutton. HTML's <input type="date"> hat 3 verschachtelte Spinbuttons, eines für Monat, Tag und Jahr. Wenn semantische HTML-Formularelemente für ihre beabsichtigten Zwecke verwendet werden, verwenden Sie nicht aria-valuemax oder aria-valuemin-Attribute; verwenden Sie stattdessen min und max. Andernfalls sind alle globalen aria-* Attribute und alle anderen aria-* Attribute für die spinbutton-Rolle anwendbar.

Bevorzugen Sie semantisches HTML

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

Spezifikationen

Siehe auch

• <input type="number">
• <input type="date">
• <input type="time">
• Andere Bereichs-Widgets umfassen:
  • meter
  • scrollbar
  • separator (wenn fokussierbar)
  • progressbar
  • slider
• Arbeitsbeispiele:
  • Datumswähler Spinbutton Beispiel
  • Toolbar Beispiel: Schriftgrößenwähler