Checkbox im HTML
Ein Kästchen braucht seinen Namen
Kästchen, Beschriftung, Gruppe: drei Stellen in jedem Auswahlformular.
Checkbox im HTML
Vier Verbindungen machen aus Kästchen ein Formular.
Gruppe, Name, Wert und Zustand erfüllen jeweils eine andere Aufgabe.
Die kurze Gruppenüberschrift ergänzt jede einzelne Option.
for und id müssen exakt übereinstimmen.
Alle Kanal-Checkboxen verwenden denselben Schlüssel.
Nur angehakte Checkboxen senden ihren jeweiligen Wert.
fieldset und legend bilden den Rahmen. Das native input type="checkbox" bringt Rolle, Zustand, Leertaste und Formularübertragung bereits mit. „Alle auswählen“ liest die Kinder
Der sichtbare dritte Zustand heißt indeterminate.
checked = falseindeterminate = truechecked = trueindeterminate verändert nur die Darstellung. Ob ein Wert gesendet wird, entscheidet weiterhin checked.
Was im Request ankommt
SMS ist nicht angehakt und fehlt deshalb. „Alle auswählen“ hat keinen name und wird ebenfalls nicht übertragen.
Die vollständige Gruppe
<form action="/einstellungen" method="post">
<fieldset>
<legend>Benachrichtigungen</legend>
<p>
<input id="alle" type="checkbox">
<label for="alle">Alle auswählen</label>
</p>
<p>
<input id="mail" type="checkbox"
name="kanal" value="mail" checked>
<label for="mail">E-Mail</label>
</p>
<p>
<input id="sms" type="checkbox"
name="kanal" value="sms">
<label for="sms">SMS</label>
</p>
<p>
<input id="post" type="checkbox"
name="kanal" value="post" checked>
<label for="post">Brief</label>
</p>
</fieldset>
<button type="submit">Speichern</button>
</form>Auswahl und Mischzustand
const alle = document.querySelector('#alle');
const kanaele = [
...document.querySelectorAll(
'input[name="kanal"]'
)
];
function aktualisieren() {
const anzahl = kanaele.filter(
(feld) => feld.checked
).length;
alle.checked = anzahl === kanaele.length;
alle.indeterminate =
anzahl > 0 && anzahl < kanaele.length;
}
alle.addEventListener('change', () => {
kanaele.forEach((feld) => {
feld.checked = alle.checked;
});
aktualisieren();
});
kanaele.forEach((feld) => {
feld.addEventListener('change', aktualisieren);
});
aktualisieren();So prüfen Sie es
Vier Beobachtungen reichen
- Text
Klicken Sie auf „SMS“. Das Kästchen muss mit dem sichtbaren Text umschalten.
- Leertaste
Fokussieren Sie eine Checkbox. Die Leertaste muss ihren Zustand ändern.
- Gruppe
Prüfen Sie die Ansage: erst „Benachrichtigungen“, dann Option und Zustand.
- Request
Kontrollieren Sie, dass nur angehakte Kanal-Werte übertragen werden.
Aus dem Prüfbericht
Zwei Bauarten, zwei Befunde
Kritisch Kästchen und Text sind nur benachbart Regel label
Der Text steht daneben, gehört aber technisch nicht zum Kästchen. Ein label mit for verbindet beide.
Kritisch Das nachgebaute Kästchen hat keinen Namen Regel aria-toggle-field-name
Ein div mit role="checkbox" meldet nur seinen Zustand. aria-label sagt, welche Option es bezeichnet.
Zum Mitnehmen
Die Checkbox, korrigiert
Natives Kästchen mit label, nachgebautes mit aria-label.
Korrektur in 2 Schritten ansehen
Kästchen und Beschriftung verbinden
Ein label mit for auf die id des Kästchens macht den Text zum Namen. Er wird zugleich zur größeren Klickfläche.
KorrekturvergleichSchritt 1 · HTML Vorher
<span>Rechnung per Post</span> <input id="post" type="checkbox" name="versand" value="post">Nachher
<label for="post">Rechnung per Post</label> <input id="post" type="checkbox" name="versand" value="post">Markierte Zeilen wurden geändert
So prüfen Sie es Klicken Sie auf den Text. Das Kästchen wechselt seinen Zustand.
Das nachgebaute Kästchen benennen
Ein eigenes Auswahlfeld meldet Rolle und Zustand, aber keinen Zweck. aria-label ergänzt die Option; Darstellung und Bedienung bleiben gleich.
KorrekturvergleichSchritt 2 · ARIA Vorher
<div role="checkbox" aria-checked="false" tabindex="0"> <span aria-hidden="true">◇</span> </div>Nachher
<div role="checkbox" aria-checked="false" tabindex="0" aria-label="Rechnung per Post"> <span aria-hidden="true">◇</span> </div>Markierte Zeilen wurden geändert
So prüfen Sie es Gehen Sie mit der Tab-Taste auf das Kästchen. Es sagt „Rechnung per Post, Kontrollkästchen“.