input type=range und input type=number verbinden

[JürgenB]

Hallo,

ich bin der Meinung, dass in vielen Fällen zu einem <input type=range> ein input type=number> gehört. Mit dem Schieber kann schnell den Wert einstellen, aber nur grob, fürs Genaue dient die Zahleingabe. Im jetzigen Entwurf mache ich das so:

<label>Rot<br>
  <input type="range" min="0" max="255" step="1" value="0"><br>
  <input type="number" min="0" max="255" step="1" value="0">
</label>

Die value werden dann durch ein Javascript gekoppelt.

Jetzt darf man natürlich ein Label nicht zwei Inputs zuordnen. Gibt es irgendeine „best practice“ hierfür? Oder muss ich da ein Custom-Element für basteln?

Gruß
Jürgen

[Rolf B]

Hallo Jürgen,

sowas hab ich auch im HSL-Visualisierer. Um der Label-Falle zu entkommen, habe ich auf ein Number-Input verzichtet und zeige nur den Wert als output an. Dem müsste ich eigentlich noch role="presentation" geben, glaube ich, denn der Slider dürfte ja für Assistenzbedürftige alle nötigen Informationen abgeben.

Ist es wichtig, den Wert in einem Number-Input ebenfalls verändern zu können? Wie wär's mit aria-label? (Selfwiki-Artikel und MDN-Artikel).

Alternativ kannst Du ein zweites Label "Zahlenwert für rot" machen und das visuell verstecken. Ob das in jedem Fall das gleiche ist wie ein aria-label Attribut, weiß ich nicht, sowas müsste im Wiki stehen, aber Aria ist dort unterrepräsentiert.

Rolf

[JürgenB]

Hallo Rolf,

du meinst so etwas?

<div role="group" aria-labelledby="groupLabel">
  <span id="groupLabel">Work Phone</span>
  +<input type="number" aria-label="country code">
  <input type="number" aria-label="area code">
  <input type="number" aria-label="subscriber number">
</div>

(Aus: https://www.w3.org/TR/WCAG20-TECHS/ARIA14.html)

Mich stört da, dass ich dann 18 Ids vergeben muss.

Gruß
Jürgen

[Rolf B]

Hallo Jürgen,

Elemente mit aria-label haben kein Label-Element, das Du per ID verknüpfen müsstest.

Und die Verbindung von <label> zu <input> musst Du eh mit ID machen, wenn Du es genau nimmst, weil bestimmte Narratoren mit <label><input></label> – also die ID-freie Konstruktion - nicht klar kommen. Sagt Gunnar.

Rolf

[Gunnar Bittersmann]

@@JürgenB

<div role="group" aria-labelledby="groupLabel">
  <span id="groupLabel">Work Phone</span>
  +<input type="number" aria-label="country code">
  <input type="number" aria-label="area code">
  <input type="number" aria-label="subscriber number">
</div>

(Aus: https://www.w3.org/TR/WCAG20-TECHS/ARIA14.html)

Mich stört da, dass ich dann 18 Ids vergeben muss.

Mich stört da, dass ich drei Felder ausfüllen muss, um eine Telefonnummer anzugeben. Wer denkt sich solch einen Unsinn aus?

---

type="number" für Telefonnummern ist wohl auch Unsinn.

Und warum verstoßen die WCAG gegen die erste Direktive? Es gibt ein HTML-Element zum Gruppieren von Eingabefeldern:

<fieldset>
  <legend>Work Phone</legend>
  +<input aria-label="country code">
  <input aria-label="area code">
  <input aria-label="subscriber number">
</fieldset>

Aber wenn man’s richtig macht, gibt’s da nichts zu gruppieren:

<label for="work-phone">Work Phone</label>
<input type="tel" id="work-phone">

Kwakoni Yiquan

[JürgenB]

Hallo Gunnar,

das Beispiel mit der Telefonnummer hat nichts mit meinem Problem zu tun, außer dass es mehrere Inputs mit einem Label verknüpft. Zu meinem Problem: du meinst, ich könnte es so lösen?

<fieldset>
  <legend>Rot</legend>
  <input type="range" min="0" max="255" step="1" value="0">
  <input type="number" min="0" max="255" step="1" value="0">
</fieldset>

Brauche ich da noch ein aria-label an den Inputs?

Gruß
Jürgen

[Gunnar Bittersmann]

@@JürgenB

<fieldset>
  <legend>Rot</legend>
  <input type="range" min="0" max="255" step="1" value="0">
  <input type="number" min="0" max="255" step="1" value="0">
</fieldset>

Brauche ich da noch ein aria-label an den Inputs?

Nicht, wenn du labels dafür vorsiehst. 😏

Aber ja, man sollte die Eingabe-Elemente unterscheiden können. S.a. andere Antwort.

Kwakoni Yiquan

[Gunnar Bittersmann]

@@JürgenB

ich bin der Meinung, dass in vielen Fällen zu einem <input type=range> ein input type=number> gehört.

Ich nicht.

Bei einer Bewertung von ganz mies bis tip-top kann man <input type=range> einsetzen. Die Defaults min="0" max="100" step="1" sind feinstufig genug, um eine stufenlose Bewertungsmöglichkeit vorzugaukeln. Ob dann nun 67, 71 oder 73^[1] eingestellt wird, ist unerheblich. Hier ist ein Schieberegler eine gute Eingabemöglichkeit.

Anders sieht es aus, wenn Genauigkeit gefragt ist. Die wäre nur bei einer Eingabe per Schieberegler nur mit Fummelei hinzubekommen. Da sollte es kein Schieberegler, sondern ein Eingabefeld sein.

Aber beides? In vielen Fällen? Wohl nicht. Man sollte sich für eins entscheiden.

Es mag Spezialfälle geben, wo beides angebracht ist. Wie Wirbel und Feinstimmer bei einer Fiedel. Aber eher die Ausnahme als die Regel.

Die value werden dann durch ein Javascript gekoppelt.

Und man muss den Nutzern irgendwie verklickern, dass mit beiden Eingabe-Elementen derselbe Wert eingestellt wird.

<label>Rot<br>
  <input type="range" min="0" max="255" step="1" value="0"><br>
  <input type="number" min="0" max="255" step="1" value="0">
</label>

„Du Henry! Henry! HENRY! Da ist so ein Geräusch!“^[2]

Jetzt darf man natürlich ein Label nicht zwei Inputs zuordnen.

Hm …^[3]

<span id="red">Rot</span>
<input type="range" aria-labelledby="red"/>
<input type="number" aria-labelledby="red"/>

Aber gut ist das nicht, wenn man den Unterschied der Eingabe-Elemente nicht mitgeteilt bekommt.

<span id="rough" hidden="">Grobeinstellung</span>
<span id="fine" hidden="">Feineinstellung</span>

<span id="red">Rot</span>
<input type="range" aria-labelledby="red rough"/>
<input type="number" aria-labelledby="red fine"/>

(#rough und #fine werden natürlich bei Grün und Blau wiederverwendet.)

Aber wohl besser so mit label und gruppierten Eingabe-Elementen:

<fieldset>
  <legend>Rot</legend>
  <label for="red-rough">Grobeinstellung</label>
  <input type="range" id="red-rough"/>
  <label for="red-fine">Feineinstellung</label>
  <input type="number" id="red-fine"/>
</fieldset>

Kwakoni Yiquan

---

1. Die Zahlen bilden den größten Primzahldrilling ≤100. ↩︎

2. Jan und Henry ↩︎

3. Warum muss ich jedesmal aufs Neues nachschlagen, ob sich labelled mit zwei oder mit drei L schreibt? ↩︎

[JürgenB]

Hallo Gunnar,

ich glaube, die Funktion der Eingaben ist zu erkennen, so etwas wie „rough/fine“ oder „coarse/fine“ muss da nicht drangeschrieben werden, zumal es ja auch nicht stimmt. Es sind zwei Eingaben für den gleichen Zweck, nur eine schnell und eine präzise. Und wie sieht es bei Schiebereglern mit der Tastaturbedienbarkeit aus?

So sieht es momentan aus: https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:Oklch-2.html

Gruß
Jürgen

[Gunnar Bittersmann]

@@JürgenB

ich glaube, die Funktion der Eingaben ist zu erkennen

Für Sehende, ja. Die Label grob/fein kann man visuell verstecken, sodass sie bei nicht-visueller Bedienung zur Verfügung stehen.

so etwas wie „rough/fine“ oder „coarse/fine“ muss da nicht drangeschrieben werden, zumal es ja auch nicht stimmt.

Nicht?

Es sind zwei Eingaben für den gleichen Zweck, nur eine schnell und eine präzise.

Ob du das nun coarse, rough oder quick and dirty nennst …

Und wie sieht es bei Schiebereglern mit der Tastaturbedienbarkeit aus?

Geht mit Pfeiltasten. Bei 100 Stufen dauert’s schon eine Weile; bei 1000 Stufen eine Unendlichkeit. Warum sollte man als Tastaturbediener überhaupt den Schieberegler betätigen? Per Tastatur ist doch nichts einfacher als den Zahlenwert direkt in ein Eingabefeld zu tippen – oder beim Eingabefeld type="number" mit den Pfeiltasten inkrementieren/dekrementieren.

Möglicherweise ist es eine gute Idee, den Schieberegler vor Tastaturbedienern und assistiven Technologien zu verstecken‽ Er ist eine zusätzliche Eingabemöglichkeit (progressive enhancement) für Mausschubser. Dann hätte sich auch die Frage nach dem Label erledigt:

<label for="red">Rot</label>
<input type="range" tabindex="-1" aria-hidden="true"/>
<input type="number" id="red"/>

Sehende Tastaturbediener werden sich vielleicht wundern, warum sie an den Schieberegler nicht herankommen, dann aber doch einsehen, dass sie das auch gar nicht wollen.

Für Mausschubser ist es eine Qual, die winzigen Schaltflächen zum Inkrementieren/Dekrementieren zu treffen. Da ist es ja fast einfacher, den genauen Wert mit dem Schieberegler einzustellen. Hier vielleicht noch zwei Buttons hinzufügen?

Kwakoni Yiquan

[JürgenB]

Hallo Gunnar,

ich habe es jetzt so:

<fieldset>
  <legend>Rot</legend>
  <input type="range" tabindex="-1" aria-hidden="true" min="0" max="255" step="1" value="0">
  <input type="number" min="0" max="255" step="1" value="0">
</fieldset>

reicht da das legend? Oder muss ich das durch ein label ersetzen? Beim Label stört mich das for und die Id fürs input. Ich muss dann 18 Ids vergeben, die ich sonst nicht brauche.

Gruß
Jürgen

[Matthias Scharwies]

Servus!

Hallo Gunnar,

ich habe es jetzt so:

<fieldset>
  <legend>Rot</legend>
  <input type="range" tabindex="-1" aria-hidden="true" min="0" max="255" step="1" value="0">
  <input type="number" min="0" max="255" step="1" value="0">
</fieldset>

reicht da das legend? Oder muss ich das durch ein label ersetzen? Beim Label stört mich das for und die Id fürs input. Ich muss dann 18 Ids vergeben, die ich sonst nicht brauche.

Es geht ja auch das label ohne Angabe eines for-Attributs um das (oder die) input-Element(e) zu legen.

Das würde ich hier machen. (Und nie vergessen, dass es um einen Farbwähler geht, den man mit der Tastatur bedienen können soll, aber eben ohne Bildschirm eh nicht verlgeichen kann.)

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

Und nie vergessen, dass es um einen Farbwähler geht

Das ging aus Jürgens Frage nicht hervor. Die war für alle möglichen Einsätze von Schieberegler + Eingabefeld, und das ist auch gut so.

den man mit der Tastatur bedienen können soll, aber eben ohne Bildschirm eh nicht verlgeichen kann.)

Oh, Vorsicht mit solchen Annahmen! Es gibt auch sehende Screenreader-Nutzer.

Kwakoni Yiquan

[JürgenB]

Hallo Mathias, hallo Gunnar,

Und nie vergessen, dass es um einen Farbwähler geht

Das ging aus Jürgens Frage nicht hervor. Die war für alle möglichen Einsätze von Schieberegler + Eingabefeld, und das ist auch gut so.

deswegen ja auch ein eigener Thread. Wenn da von euch keine Bedenken kommen, werde ich es jetzt so umsetzen:

<fieldset>
  <legend><label for="rgb_l_r">Rot</label></legend>
  <input type="range" tabindex="-1" aria-hidden="true" min="0" max="255" step="1" value="0">
  <input type="number" id="rgb_l_r" min="0" max="255" step="1" value="0">
 </fieldset>

Die IDs sind da lästig, da man den Block nicht einfach umkopieren kann (und das links nicht durch ein rechts ersetzt), aber das ist dann eben so.

Oh, Vorsicht mit solchen Annahmen! Es gibt auch sehende Screenreader-Nutzer.

aber auf dieser Seite gibt es nichts zu lesen, nur gucken.

Gruß
Jürgen

[Gunnar Bittersmann]

@@JürgenB

Wenn da von euch keine Bedenken kommen, werde ich es jetzt so umsetzen:

Da melde ich mal Bedenken an.

<fieldset>
  <legend><label for="rgb_l_r">Rot</label></legend>

label in legend? Halte ich für gewagt.

legend braucht man hier nicht.

---

Oh, Vorsicht mit solchen Annahmen! Es gibt auch sehende Screenreader-Nutzer.

aber auf dieser Seite gibt es nichts zu lesen, nur gucken.

Ja, und manche Screenreader-Nutzer wollen auch gucken. Und auch die Eingabe-Elemente richtig angesagt bekommen.

Kwakoni Yiquan

[Gunnar Bittersmann]

@@JürgenB

<fieldset>
  <legend>Rot</legend>
  <input type="range" tabindex="-1" aria-hidden="true" min="0" max="255" step="1" value="0">
  <input type="number" min="0" max="255" step="1" value="0">
</fieldset>

reicht da das legend?

Der Inhalt von legend wird bei Eingabefeldern zusätzlich zum label angesagt. Wie sich Browser/Screenreader-Paare verhalten und ob sie das alle gleich tun, wenn gar kein label vorhanden ist, kann ich nicht sagen.

Oder muss ich das durch ein label ersetzen?

Was spricht gegen

<fieldset>
  <input type="range" tabindex="-1" aria-hidden="true" min="0" max="255" step="1" value="0">
  <label>
    Rot
    <input type="number" min="0" max="255" step="1" value="0">
  </label>
</fieldset>

Das geht wohl nicht

<label>
  Rot
  <input type="range" tabindex="-1" aria-hidden="true" min="0" max="255" step="1" value="0">
  <input type="number" min="0" max="255" step="1" value="0">
</label>

wegen “no descendant labelable elements unless it is the element's labeled control”. [Spec]

Beim Label stört mich das for und die Id fürs input. Ich muss dann 18 Ids vergeben, die ich sonst nicht brauche.

QA ist dankbar für IDs für automatisierte Tests. Ach so, QA gibt’s bei dir nicht. 😏

Kwakoni Yiquan

[JürgenB]

Hallo Gunnar,

Was spricht gegen

<fieldset>
  <input type="range" tabindex="-1" aria-hidden="true" min="0" max="255" step="1" value="0">
  <label>
    Rot
    <input type="number" min="0" max="255" step="1" value="0">
  </label>
</fieldset>

fast nichts. Ich hätte nur das Javascript für das Synchronisieren der beiden Inputs ändern müssen, und das „Rot“ soll über beiden Inputs stehen. Daher habe ich es jetzt so gelöst:

<fieldset>
  <label for="rgb_r_r">Rot</label>
  <input type="range" tabindex="-1" aria-hidden="true" min="0" max="255" step="1" value="0">
  <input type="number" id="rgb_r_r" min="0" max="255" step="1" value="0">
</fieldset>

Vielen Dank für die Anregungen.

Gruß
Jürgen

[Der Martin]

Hallo Gunnar,

weil's untypisch ist. Keywords in der IT sind meist an amerikanisches Englishc angelehnt, die Verdopplung des 'l' ist aber eine britische Regel (ähnlich bei referer).

Auch das Schlüsselwort gray war ja ursprünglich amerikanisch, die britische Schreibweise grey wurde AFAIR erst später in die Spec aufgenommen.

Einen schönen Tag noch
 Martin

[Auge]

Hallo

Warum muss ich jedesmal aufs Neues nachschlagen, ob sich labelled mit zwei oder mit drei L schreibt?

Aber das sieht man doch, Herr Professor. Labelled mit drei L, eins vor dem ABE und zwei dahinter. 😆

Tschö, Auge