Gunnar Bittersmann: link generierung aus formularelementen

Beitrag lesen

@@Matthias Apsel

Dein HTML sollte verbessert werden

<label>Anreise</label>
<input class="w3-input w3-border w3-round-large w3-white" type="text" name="" id="Anreise" placeholder="Anreise">
  • Das label-Element ist keinem Input-Element zugeordnet. Screenreadernutzer erkennen nicht, was sie eingeben sollen.

Also mit for-Attribut, was sich auf die ID des Eingabefelds bezieht:

<label for="Anreise">Anreise</label>
<input class="w3-input w3-border w3-round-large w3-white" type="date" name="Anreise" id="Anreise">
  • Du möchtest ein Datum haben. Dafür gibt es type=date.
  • Das placeholder-Attribut sollte im Zweifelsfall Beispieldaten enthalten, nicht das Label wiederholen.

Meistens ist ein Placeholder eher schädlich als nützlich. Weglassen.

Die ganzen präsentationsbezogenen Klassennamen hab ich jetzt mal übersehen.

<label>Gäste</label><br>
        <input class="w3-radio" type="radio" name="" value="1" id="Gaeste0">&nbsp;1<br>
        <input class="w3-radio" type="radio" name="" value="2" id="Gaeste1">&nbsp;2<br>
        <input class="w3-radio" type="radio" name="" value="3" id="Gaeste2">&nbsp;3<br>
        <input class="w3-radio" type="radio" name="" value="4" id="Gaeste3">&nbsp;4<br>

  • br-Elemente sind für den Zeilenumbruch bei Gedichten gedacht.
  • Das label ist in dem Fall wohl eine Überschrift, fieldset bietet sich auch an.

Wie meistens bei einer Gruppe von Radiobuttons:

<fieldset>
	<legend>Gäste</legend>
	<input ></fieldset>
  • den input-Elementen fehlt die Beschriftung

Auch der name. Sonst ist ja gar keine Gruppe von Radiobuttons.

z.B. <input ... id="Gaeste0"><label for="Gaeste0"> 1</label>

Oder auch <label><input ... id="Gaeste0"> 1</label>, wodurch man bei Radiobuttons (Checkboxen) auch auf den Leerraum zwischen Radiobutton (Checkbox) und Beschriftung clicken kann, um das Ding zu setzen. (Ansonsten müsste man da mit CSS ran: { margin-left: -1em; padding-left: 1em }.)

LLAP 🖖

--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory