wie kann ich optisch eine checkbox verstecken? (oder code auf radiobuttons anpassen)

[Gunnar Bittersmann]

@@Felix Riesterer

Die Bedienbarkeit von Checkboxen ist an sich schon eine haklige Sache (pun intended)

😀✔️

daher sind Beschriftungen unverzichtbar.

Das unbedingt.

nimm eine Liste!

Das nicht unbedingt.

Muss ein Screereader denn vorlesen „Item 1 von 49: 1, Checkbox; Item 2 von 49: 2, Checkbox; Item 3 von 49: 3, Checkbox; …“? Oder liegt die Würze hier in der Kürze: „1, Checkbox; 2, Checkbox; 3, Checkbox; …“?

      <li><label><input type="checkbox"><em>1</em></label></li>
      <li><label><input type="checkbox"><em>2</em></label></li>
      <li><label><input type="checkbox"><em>3</em></label></li>
      ...

Wieso em? Wird da was besonders hervorgehoben? Manchmal ist ein span einfach nur ein span.

Und wenn das Formular abgeschickt und ausgewertet werden soll, müssen die Eingabefelder namen haben.

...? Sind wir da faul? 😉 Ja, sind wir. Deshalb generieren wir die Eingabefelder mit einer Schleife. Kann man serverseitig machen. Oder mit JavaScript, wenn das sowieso nur mit JavaScript richtig funktioniert.

Natürlich funktioniert das auch ohne JavaScript richtig: Man kann Zahlen ankreuzen und das Formular abschicken. Die Prüfung, ob genau 6 Zahlen angekreuzt wurden, muss man serverseitig sowieso machen. Die clientseitige Prüfung ist progressive enhancement.

Mit dieser Struktur haben wir die Möglichkeit, die Checkboxen zu verstecken und trotzdem ein visuelles Feedback zu erhalten. Die Bedienbarkeit ist dadurch gegeben

Leider nein. Du hast das visuelle Feedback vergessen, welche Checkbox bei Tastaturbedienung gerade fokussiert ist. Auch dafür der Trick mit dem Nachbarkombinator – und der Pseudoklasse :focus bzw. :focus-visible.

Dein Eventhandler wird auf das form-Element registriert. Er muss wissen, von welchem Element er ausgelöst wurde (event.target).

Muss er nicht, wenn man das etwas anders implementiert: Beim Erreichen von 6 angekreuzten Zahlen setzt man alle Eingabefelder bis auf die angekreuzten auf disabled. Das kann man sich dann auch zunutze machen für ein visuelles Feedback, dass nichts weiter angekreuzt werden kann. Die schon angekreuzten Felder müssen natürlich weiterhin bedienbar bleiben, damit man sie wieder zurücksetzen kann. Sobald man das bei einem tut, werden wieder alle Eingabefelder freigegeben.

Sieht dann so aus. (Ja, ich habe die Schleife zum Erzeugen der Einagbefelder mit JavaScript gemacht. Buh! Und ja, die Meldung mit alert() auszugeben ist auch buh.)

Die 6 und die 49 stehen in Konstanten; so kann man das leicht auf 5 aus 35 ändern.

😷 LLAP