input type=range und input type=number verbinden

[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