Auswahlfelder in Form kleiner Schaltflächen sind ein verbreitetes Muster. Gebaut werden sie meist so: ein Textelement mit einem Datenattribut, eine Formatvorlage für den ausgewählten Zustand, ein Skript, das beim Klick die Klasse umschaltet und ein verstecktes Feld füllt.

Was passiert, wenn das Skript fehlt

Aus einer Wartung, an einem tatsächlichen System: Das Skript existierte nicht – weder in der Vorlage noch in der ausgelieferten Skriptdatei. Die Folgen bauten aufeinander auf.

Erstens ließ sich nichts auswählen. Sichtbar war nur der Zustand beim Überfahren mit der Maus, was aussah, als wäre etwas ausgewählt.

Zweitens – und das war der eigentliche Schaden – blieb das versteckte Feld leer. Es war als Pflichtfeld ausgezeichnet. Ein leeres Pflichtfeld, das nicht sichtbar ist, kann der Browser nicht anspringen, um eine Meldung anzuzeigen: Er bricht das Absenden ab und schreibt eine Meldung in die Entwicklerkonsole. Für den Besucher tut der Absenden-Knopf nichts. Kein Hinweis, keine Markierung, keine Erklärung.

Drittens fiel das lange nicht auf, weil im Verwaltungsbereich dasselbe Muster mit Skript umgesetzt war und dort funktionierte.

Die Fassung ohne Skript

<input type="checkbox" class="chip-input" id="c3" name="leistungen[]" value="SEO">
<label class="chip-toggle" for="c3">SEO</label>

Das Aussehen entsteht über den Nachbarselektor auf den angekreuzten Zustand. Dasselbe Bild, aber: bedienbar mit der Tastatur, angesagt als Ankreuzfeld, funktionsfähig ohne Skript, und der Zustand bleibt nach einem abgelehnten Absenden erhalten.

Wichtig dabei: Das Ankreuzfeld darf nicht mit display: none versteckt werden – dann ist es nicht mehr fokussierbar. Es wird aus der Anzeige genommen und bleibt im Dokument.

Die allgemeine Regel

Ein nachgebautes Bedienelement muss alles nachbauen, was das echte mitbringt: Fokus, Tastaturbedienung, Rollenansage, Zustand. In der Praxis wird davon meist das Aussehen umgesetzt und der Rest vergessen. Wo ein natives Element dieselbe Aufgabe erfüllt, ist es die günstigere Wahl – nicht aus Prinzip, sondern weil es weniger Stellen gibt, an denen etwas fehlen kann.

Was man daraus für Prüfungen lernt

Ein Formular ist erst geprüft, wenn es einmal vollständig abgeschickt wurde. Eine Sichtprüfung hätte diesen Fehler nie gefunden – die Seite sah vollkommen in Ordnung aus.