Zahlen- & Schrittgeber-System

Numerisches Eingabe- & Schrittgeber-System

Zweck

Das Numerische Eingabe- & Schrittgeber-System bietet ein standardisiertes Framework zum Entwerfen, Strukturieren und Implementieren von Steuerelementen zur Auswahl, Anpassung oder Eingabe diskreter numerischer Werte. Die präzise numerische Eingabe – wie Mengen im Warenkorb, SaaS-Sitzplatzanzahlen, Preisstufeneinheiten, Budgetbereiche oder Dimensionsangaben – erfordert eine Balance zwischen schnellen Mikroanpassungen und direkter Texteingabe, klaren Min-/Max-Grenzzuständen, berührungsfreundlichen Trefferflächen sowie vollständiger Tastatur- und Screenreader-Zugänglichkeit.

Standardmäßige <input type="number">-Steuerelemente werden browserübergreifend inkonsistent dargestellt, bieten oft winzige, nicht anpassbare native Pfeiltasten, die gegen Touch-Target-Richtlinien verstoßen (WCAG 2.2 SC 2.5.8) und versehentliche Scroll-Anpassungen auslösen. Dieses Skill definiert explizite UI-Muster, räumliche Layoutregeln, Interaktionszustände und Barrierefreiheitsstandards für benutzerdefinierte numerische Schrittgeber und einheitenbegrenzte Felder.

Anwendungsfälle

• E-Commerce-Warenkorb-Mengenauswahl: Ermöglicht Käufern das einfache Erhöhen, Verringern oder Eingeben von Produktmengen auf Produktdetailseiten (PDPs), in Warenkorb-Overlays und in Checkout-Zusammenfassungstabellen.
• SaaS-Plan-Sitz- und Lizenzsteuerung: Provisionierung von Benutzersitzen, Serverinstanzen oder Speichergigabyte auf Preisseiten oder in Abonnementverwaltungseinstellungen.
• Formular-Eingaben mit Einheitenbegrenzung: Erfassung eingeschränkter Metriken wie Prozentwerte (0–100%), Altersgrenzen, Artikelabmessungen (Länge/Breite/Höhe) oder Geldbeträge.
• Finanz- & Rechnersteuerungen: Auswahl von Kreditlaufzeiten, Einzahlungsbeträgen oder Investitionsschritten in interaktiven Rechnern.
• Dashboard- & Filtersteuerungen: Anpassung numerischer Schwellenwerte, Paginierungszeilenlimits oder metrischer Bereichsfilter in datenintensiven Desktop-Umgebungen.

Wann NICHT verwendet werden sollte

• Kontinuierliche Bereichsauswahl: Für breite, unspezifische numerische Bereichserkundungen, bei denen exakte Werte zweitrangig sind gegenüber relativen Positionen, verwenden Sie accessible-range-slider-implementation oder Dual-Thumb-Schieberegler.
• Große beliebige Zahlen: Für die Eingabe von Kreditkartennummern, Telefonnummern, Postleitzahlen oder Sozialversicherungsnummern, bei denen Erhöhungs-/Verringerungsoperationen keinen Sinn ergeben, verwenden Sie standardmäßiges <input type="text" inputmode="numeric"> mit form-design-system.
• Datum- & Uhrzeitauswahl: Für die Auswahl von Kalendertagen, Monaten oder Uhrzeiten verwenden Sie calendar-and-date-system.
• Große diskrete Optionsmengen: Bei der Auswahl vorkonfigurierter Bulk-Mengen (z. B. 25, 50, 100, 500) verwenden Sie segmented-control-system oder custom-select-and-combobox-system.

Eingaben

1. Wertgrenzen: Minimum (min), Maximum (max) und Schrittweite (step) Einschränkungen.
2. Kontext & Dichte: Verfügbarer Layout-Platz (kompakte Inline-Tabellenzeile vs. prominenter PDP-Kaufblock).
3. Eingabeformat & Einheit: Zugehörige physikalische oder monetäre Einheit (z. B. $, %, Artikel, kg, Sitze).
4. Interaktionsmodus: Ob direkte manuelle Texteingabe erlaubt ist oder die Anpassung nur über Schrittgeber-Tasten erfolgt.
5. Marken- & Oberflächentokens: Palettentokens für Hintergrund, aktive Ränder, deaktivierte Zustände, Fokusringe und Symbolglyphen.

Ausgaben

1. Schrittgeber-Komponentenspezifikation: Visuelle Anatomie mit Verringerungs-Taste, Numerischer Anzeige/Eingabe, Erhöhungs-Taste und Einheiten-Label.
2. Grenz- & Zustandsmatrix: Visuelle Behandlungen für die Zustände Standard, Hover, Fokus, Deaktiviert (bei Min/Max), Laden und Fehler.
3. Responsives räumliches Layout-Spezifikation: Touch-Target-Maße (mindestens 44x44px für Touch, 24x24px für kompaktes Desktop), Abstände und Schriftmetriken über Breakpoints hinweg.
4. Barrierefreiheit & Tastaturbelegung: ARIA-Attribute (role="spinbutton", aria-valuenow, aria-valuemin, aria-valuemax), Live-Region-Konfigurationen und Spezifikationen für Tastaturkürzel-Handler.

---

Arbeitsablauf

1. Schrittgeber-Variante auswählen

Wählen Sie die passende strukturelle Variante basierend auf Kontext und Interaktionsabsicht:

• Standard Horizontaler Schrittgeber (3-teilig segmentiert): Verringerungs-Taste (-) links, zentrales Texteingabefeld, Erhöhungs-Taste (+) rechts. Am besten geeignet für E-Commerce-PDPs, Warenkorbartikel und SaaS-Sitzzähler.
• Kompakter Inline-Schrittgeber (gestapelte Pfeile): Texteingabefeld mit vertikal gestapelten Mikro-Tasten auf der rechten Seite. Am besten geeignet für hochdichte Desktop-Datentabellen, Symbolleisten und SaaS-Einstellungs-Seitenleisten.
• Einheiten-gebundene Eingabe: Textfeld mit festem Präfix/Suffix-Einheiten-Label (z. B. $, USD, px, %) und optionalen Schrittgeber-Tasten. Am besten geeignet für Finanzeingaben und Systemkonfigurationsformulare.
• Standalone-Button-Zähler: Vollständig klickbare Pille, bei deren Antippen ein Inline-Modal/Popover geöffnet wird oder die sich bei Fokus in einen aktiven Schrittgeber verwandelt.

2. Visuelle Anatomie und Touch-Target-Regeln festlegen

Strukturieren Sie die Komponente mit klaren geometrischen Parametern:

• Touch-Target-Maße: Stellen Sie sicher, dass alle interaktiven Erhöhungs-/Verringerungs-Tasten eine minimale Trefferfläche von 44x44px auf mobilen/Touch-Oberflächen haben (WCAG 2.5.5 / 2.5.8). Auf reinen Desktop-kompakten UIs halten Sie mindestens 24x24px mit ausreichendem Klick-Padding ein.
• Eingabefeld-Größe: Stellen Sie die Breite dynamisch mit CSS ch-Einheiten basierend auf der erwarteten maximalen Ziffernlänge ein (z. B. width: calc(3ch + 2rem) für zweistellige Mengen).
• Typografie & Ausrichtung: Zentrieren Sie den numerischen Wert im Eingabefeld. Verwenden Sie tabellarische Monospace-Zahlen (font-variant-numeric: tabular-nums;), um Layoutverschiebungen bei schnellen Wertübergängen zu vermeiden.
• Visuelle Gruppierung: Schließen Sie Tasten und Eingabe in einen gemeinsamen Rahmencontainer oder eine durchgehende segmentierte Pille ein, um eine einheitliche Funktionalität zu signalisieren.

3. Grenzverhalten und deaktivierte Zustände definieren

Kommunizieren Sie Minimum- und Maximum-Limits klar, um Benutzerfrustration zu vermeiden:

• Bei Minimalgrenze (value <= min):
  • Deaktivieren Sie die Verringerungs-Taste (disabled-Attribut und aria-disabled="true").
  • Wenden Sie ein deaktiviertes Styling mit geringem Kontrast an (z. B. opacity: 0.4; cursor: not-allowed;).
  • Wenn min === 1 im E-Commerce-Warenkorbkontext, wandeln Sie die Verringerungs-Taste optional in ein "Papierkorb/Löschen"-Symbol um, wenn der Wert 1 ist, um das Entfernen der Position zu ermöglichen.
• Bei Maximalgrenze (value >= max):
  • Deaktivieren Sie die Erhöhungs-Taste (disabled-Attribut und aria-disabled="true").
  • Zeigen Sie einen Inline-Hilfetext (z. B. "Maximal 10 Artikel pro Bestellung") oder einen subtilen Tooltip an, wenn der Benutzer versucht, weiter zu erhöhen.
• Direkte Eingabevalidierung:
  • Begrenzen Sie bei blur außerhalb des gültigen Bereichs eingegebene Werte automatisch auf den nächstgelegenen gültigen Grenzwert (z. B. wird die Eingabe von 99 in ein Max-10-Feld auf 10 begrenzt).
  • Wenn die Schrittweite nicht ganzzahlig ist (z. B. step="0.5"), runden Sie eingegebene Werte bei blur auf den nächstgelegenen gültigen Schritt.

4. Tastaturnavigation & Touch-Feedback implementieren

Stellen Sie eine nahtlose Steuerung über verschiedene Eingabegeräte hinweg sicher:

• Tastenkombinationen:
  • Pfeil hoch / Pfeil rechts: Wert um step erhöhen.
  • Pfeil runter / Pfeil links: Wert um step verringern.
  • Bild auf: Wert um step * 10 (oder eine größere Schritt-Delta) erhöhen.
  • Bild ab: Wert um step * 10 verringern.
  • Pos1: Wert auf min setzen (falls definiert).
  • Ende: Wert auf max setzen (falls definiert).
• Gedrückt halten & Auto-Wiederholung: Wenn der Benutzer eine Erhöhungs-/Verringerungs-Taste gedrückt hält (per Zeiger oder Tastatur), starten Sie die Auto-Wiederholung des Werts nach einer anfänglichen Verzögerung von 500 ms, die alle 100 ms wiederholt wird.
• Touch / Mobile Tastatur: Setzen Sie inputmode="numeric" oder inputmode="decimal" und pattern="[0-9]*" auf dem <input>-Element, um die numerische Tastatur auf mobilen Geräten zu öffnen, ohne native Browser-Spinner zu erzwingen.

5. Barrierefreiheit und Screenreader-Semantik konfigurieren

Liefern Sie eine WCAG 2.1 / 2.2 AA-konforme Erfahrung:

• Semantische HTML-Optionen:
  • Option A (Natives Eingabefeld mit Schrittgeber-Tasten): Verwenden Sie <input type="text" inputmode="numeric"> in Verbindung mit explizitem <label>. Kennzeichnen Sie Verringerungs-/Erhöhungs-Tasten mit <button type="button" aria-label="Menge verringern"> und aria-controls="input-id".
  • Option B (ARIA-Spinbutton-Rolle): Wenden Sie role="spinbutton", aria-valuenow="3", aria-valuemin="1", aria-valuemax="10", aria-valuetext="3 Sitze" und aria-label="Anzahl der Sitze auswählen" auf den Container oder das Eingabefeld an.
• Fokusring-Verwaltung: Halten Sie sichtbare, kontrastreiche Fokusringe (outline: 2px solid var(--focus-ring); outline-offset: 2px;) um aktive Tasten und Texteingaben sichtbar. Fokusringe dürfen niemals durch übergeordnete Container-Grenzen verdeckt oder abgeschnitten werden.
• Live-Region-Ankündigungen: Verwenden Sie aria-live="polite" oder aktualisieren Sie aria-valuenow dynamisch, sodass assistive Technologien Wertänderungen sofort nach Tastendruck ankündigen.

---

Entscheidungsregeln

Komponentenmuster-Matrix

Anwendungsfall	Empfohlene Variante	Tastenplatzierung	Min/Max-Strategie
E-Commerce-PDP	Standard Horizontal	Flankierend (- links, + rechts)	Min = 1 (oder Papierkorb bei 1), Max = Lagerbestand
Warenkorb-Position	Kompakt Horizontal / Papierkorb-Hybrid	Flankierend (-/Papierkorb links, + rechts)	Min = 0 (entfernt Artikel), Max = Verfügbarer Bestand
SaaS-Abrechnungssitze	Horizontal mit Einheiten-Suffix	Flankierend (- links, + rechts)	Min = Mindest-Tarifstufe, Max = Konto-Limit
Desktop-Datentabelle	Gestapelter Inline-Schrittgeber	Rechts gestapelt (▲ oben, ▼ unten)	Min/Max bei blur begrenzen
Finanzbetrag	Einheiten-gebundene Eingabe ($)	Optional flankierend oder nur manuell	Min = 0, Max = Limit mit Validierungsmeldung

Regel: Direkte Eingabe vs. Nur-Tasten

• Direkte Eingabe erlauben (Standard): Für Mengen > 5 oder wenn Benutzer große Zahlen direkt eingeben können (z. B. Bestellung von 50 Artikeln oder Festlegen eines Budgets von 500 $).
• Auf Tasten beschränken (readonly-Eingabe): Nur wenn der Wertebereich sehr klein ist (z. B. 1 bis 5) und die Freitexteingabe auf kleinen Touch-Geräten unnötigen Validierungsaufwand verursacht.

---

Einschränkungen

• Barrierefreiheit (WCAG 2.1 / 2.2 AA):
  • Tasten müssen ein explizites aria-label-Attribut mit Beschreibung der Aktion bereitstellen (z. B. "Artikelmenge verringern").
  • Erhöhungs- und Verringerungs-Tasten müssen eine Mindest-Touch-Zielgröße von 44x44px auf Touch-Viewports einhalten (SC 2.5.8).
  • Aktive Fokus-Indikatoren müssen WCAG 2.4.11 (Fokus nicht verdeckt) und SC 2.4.13 (Fokus-Erscheinungsbild) erfüllen.
• Zahlenformatierung:
  • Lassen Sie niemals leere oder NaN-Werte bei blur im Eingabefeld stehen. Fallback auf min oder vorherigen gültigen Wert.
  • Zahlen müssen mit font-variant-numeric: tabular-nums; dargestellt werden, um Layout-Reflow während Erhöhungen zu verhindern.
• Mobile Soft-Tastaturen:
  • Setzen Sie immer inputmode="numeric" (oder decimal), um die Standard-Zahlen-Tastatur auf iOS/Android zu öffnen. Vermeiden Sie native <input type="number">-Standardsymbolpfeile, indem Sie native Spinner in CSS deaktivieren (::-webkit-inner-spin-button).

---

Häufige Fehlermuster

• Winzige, nicht standardkonforme Touch-Ziele: Verwendung von 18x18px-Chevron-Tasten auf Mobilgeräten, was zu Fehltipps und Benutzerfrustration führt.
• Verwendung des nativen <input type="number"> des Browsers: Zulassen, dass browser-eigene Spinner inkonsistent dargestellt werden, benutzerdefinierte Textabstände überlappen oder versehentliche Scroll-Anpassungen auslösen.
• Fehlende Grenz-Deaktivierungshinweise: Die Verringerungs-Taste visuell aktiv lassen, wenn value === min, was zu Klicks ohne Feedback führt.
• Unbegrenzte Freitexteingabe: Benutzern erlauben, ungültige Werte (z. B. -5 oder 999999) ohne Begrenzung oder Fehlerfeedback bei blur einzugeben.
• Fehlende Tastaturunterstützung: Entwerfen von benutzerdefinierten <div>-Tasten, denen die Tab-Fokussierbarkeit und die Ereignisbehandlung für Pfeil hoch/Pfeil runter fehlt.

---

Validierungskriterien

• Verringerungs- und Erhöhungs-Tasten erfüllen die Mindest-Touch-Zielgröße von 44x44px auf Touch-Viewports.
• Tabellarische Monospace-Typografie (tabular-nums) wird verwendet, um Layout-Jitter während Aktualisierungen zu verhindern.
• An den Grenzen Minimum und Maximum wechseln die jeweiligen Tasten in den deaktivierten Zustand (aria-disabled="true").
• Die mobile Eingabe verwendet inputmode="numeric" oder inputmode="decimal".
• Die Komponente behandelt die Tasten Pfeil hoch, Pfeil runter, Bild auf, Bild ab, Pos1 und Ende korrekt.
• Programmatische Labels (aria-label oder <label>) und ARIA-Rollen (role="spinbutton" oder explizite aria-controls-Tasten) sind konfiguriert.
• Außerhalb des gültigen Bereichs eingegebene Werte werden bei blur automatisch begrenzt oder lösen Validierungsfehlermeldungen aus.
• Hochkontrast-Fokus-Indikatoren sind sichtbar und nicht verdeckt.