ARIA Checkbox
Was aria-checked wirklich meldet
Name, Pflichtattribut, gültiger Wert: drei Dinge, die eine ARIA-Checkbox braucht.
Zustandsmodell
Drei Werte müssen dasselbe sagen
Attribut, sichtbare Form und Ansage wechseln immer gemeinsam.
ARIA-Checkbox
Statische ZustandsansichtNicht gewählt
- DOM
aria-checked="false"- Bild
- Leerer Kasten
- Ansage
- „nicht aktiviert“
Teilweise gewählt
- DOM
aria-checked="mixed"- Bild
- Waagerechter Balken
- Ansage
- „teilweise aktiviert“
Gewählt
- DOM
aria-checked="true"- Bild
- Haken
- Ansage
- „aktiviert“
Alle auswählenaria-checked="mixed"
- E-Mail
true - SMS
false - Push
true
Wenn HTML reicht
Die native Checkbox ist die Vorgabe
<input id="mail" name="mail" type="checkbox">
<label for="mail">E-Mail</label>- Der Browser liefert Rolle, Zustand und Leertaste.
- Das Label vergrößert zugleich die anklickbare Fläche.
- Für den dritten Zustand setzen Sie
element.indeterminate = true.
indeterminate ändert die Darstellung. Für Formulardaten zählt weiterhin allein der Wert von checked.
Wenn ein eigenes Widget nötig ist
ARIA ergänzt Semantik, nicht Verhalten
<fieldset>
<legend>Benachrichtigungen</legend>
<div class="master" role="checkbox" id="alle" tabindex="0"
aria-checked="mixed" aria-controls="mail sms push">
Alle auswählen
</div>
<label><input id="mail" type="checkbox" checked> E-Mail</label>
<label><input id="sms" type="checkbox"> SMS</label>
<label><input id="push" type="checkbox" checked> Push</label>
</fieldset>.master {
display: flex;
gap: 0.5rem;
align-items: center;
}
.master::before {
display: grid;
inline-size: 1rem;
block-size: 1rem;
place-items: center;
border: 2px solid currentColor;
content: "";
}
.master[aria-checked="true"]::before { content: "✓"; }
.master[aria-checked="mixed"]::before { content: "−"; }
.master:focus-visible { outline: 3px solid currentColor; }const master = document.getElementById('alle');
const boxes = ['mail', 'sms', 'push']
.map((id) => document.getElementById(id));
function syncMaster() {
const count = boxes.filter((box) => box.checked).length;
const state = count === 0
? 'false'
: count === boxes.length ? 'true' : 'mixed';
master.setAttribute('aria-checked', state);
}
function toggleAll() {
const next = master.getAttribute('aria-checked') !== 'true';
boxes.forEach((box) => { box.checked = next; });
syncMaster();
}
master.addEventListener('click', toggleAll);
master.addEventListener('keydown', (event) => {
if (event.key !== ' ') return;
event.preventDefault();
toggleAll();
});
boxes.forEach((box) => box.addEventListener('change', syncMaster));
syncMaster();Aus dem Prüfbericht
Drei Stellen, drei Befunde
Kritisch Die Checkbox hat keinen Namen Regel aria-toggle-field-name
role="checkbox" ohne Text oder aria-labelledby sagt nur „Kontrollkästchen“. Das Wort daneben wird verbunden.
Kritisch aria-checked fehlt Regel aria-required-attr
Eine ARIA-Checkbox ohne aria-checked hat keinen Zustand. false, true oder mixed ist Pflicht.
Kritisch aria-checked="checked" ist kein Wert Regel aria-valid-attr-value
Ein erfundener Wert fällt auf false zurück. Sichtbar angehakt, vorgelesen leer.
Zum Mitnehmen
Die Checkboxen, korrigiert
Name, Zustand, Leertaste. Oder gleich ein natives input.
Korrektur in 2 Schritten ansehen
Name und Zustand an die ARIA-Checkbox
aria-labelledby nimmt den Text daneben als Namen. aria-checked trägt den echten Zustand.
KorrekturvergleichSchritt 1 · HTML Vorher
<div role="checkbox" tabindex="0" class="box"></div> <span id="nl">Newsletter</span> <div role="checkbox" tabindex="0" aria-checked="checked"></div> <span>Angebote</span>Nachher
<div role="checkbox" tabindex="0" class="box" aria-checked="false" aria-labelledby="nl"></div> <span id="nl">Newsletter</span> <div role="checkbox" tabindex="0" aria-checked="true" aria-labelledby="ang"></div> <span id="ang">Angebote</span>Markierte Zeilen wurden geändert
So prüfen Sie es Tab auf die zweite Box. Ein Vorleseprogramm sagt „Angebote, Kontrollkästchen, aktiviert“.
Oder das native Kontrollkästchen nehmen
input type="checkbox" mit label bringt Name, Zustand und Leertaste ohne eine Zeile ARIA.
KorrekturvergleichSchritt 2 · HTML Vorher
<div role="checkbox" tabindex="0" aria-checked="false" aria-labelledby="nl"></div> <span id="nl">Newsletter</span>Nachher
<input id="nl" type="checkbox" name="newsletter"> <label for="nl">Newsletter</label>Markierte Zeilen wurden geändert
So prüfen Sie es Leertaste auf dem Feld. Der Haken erscheint, das Vorleseprogramm sagt „aktiviert“.