input type=range und input type=number verbinden
JürgenB
- html
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
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
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
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
@@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
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
@@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 label
s dafür vorsiehst. 😏
Aber ja, man sollte die Eingabe-Elemente unterscheiden können. S.a. andere Antwort.
Kwakoni Yiquan
@@JürgenB
ich bin der Meinung, dass in vielen Fällen zu einem
<input type=range>
eininput 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
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
@@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
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
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 einlabel
ersetzen? Beim Label stört mich das for und die Id fürsinput
. 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
@@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
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
@@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
@@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
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
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
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