Verständnisfrage zu Regex in JS und HTML

[Gunnar Bittersmann]

@@Nico R.

Die Erklärung zu aria-describedby="hint" auf https://developer.mozilla.org hab ich beim Überfliegen jetzt nicht verstanden, ich werd mir das nochmal ansehen. Ist das essentiell oder eher optional?

Das ist essentiell.

Screenreader-Nutzer navigieren per Tab-Taste von einem interaktiven Element (Formularfeld) zum nächsten. Bei einem Eingabefeld wird dann die zugehörige Beschriftung angesagt (das label, dessen for-Attribut mit der id des input-Elements übereinstimmt oder das ein Vorfahrenelement des input-Elements ist).

Zusätzlich wird die Beschreibung angesagt, die in dem Element steht, dessen id mit dem aria-describedby übereinstimmt. In dem Fall also: „Eingabe – Bitte nur Ziffern sowie Komma oder Punkt angeben“

Dasselbe lässt sich auch erreichen durch

<label for="input">
  Eingabe
  <span class="hint">Bitte nur Ziffern sowie , oder . angeben</span>
</label>
<input id="input" …/>

Das span.hint kann dann anderes gestylt werden als der andere Text im label.

Siehe Form Design Patterns S. 23–25. Und wer das Buch noch nicht hat, sollte es sich zulegen.

---

Aber wenn das Eingabefeld nur für Zahlen ist, sollte es auch den entsprechenden Typ haben, womit Nutzer von virtuellen Keyboards auch nur Ziffern und Dezimaltrennzeichen (evtl. auch Minus) vorgesetzt bekommen:

<input id="input" aria-describedby="hint" type="number" pattern="…"/>

Das war Quatsch von mir; pattern kann nicht mit type="number" kombiniert werden.

Mit input type="number" kann je nach Browser kein Komma eingegeben werden.

Es sollte das Dezimaltrennzeichen erscheinen, das der Sprache des Systems entspricht. Also für den jeweiligen Nutzer das richtige.

daher hab ich mich für type="text" und inputmode="numeric" entschieden.

Falsche Entscheidung. Dadurch kann auf Systemen mit virtueller Tastatur kein Komma eingegeben werden. "decimal" wäre die richtige Entscheidung. [MDN]

---

Statt let sollte hier überall const stehen.

Jetzt mal doof gefragt. Ist das wichtig?

Ja, sonst kannst du ja gleich beim alten var bleiben. Wenn sich Werte später nicht mehr ändern sollen, dann const.

🖖 Живіть довго і процвітайте