aria-checked-state-mismatch
aria-checked einer nativen Checkbox/eines nativen Radiobuttons sollte dem tatsächlichen Zustand entsprechen
Markiert ein natives <input type="checkbox">/<input type="radio">, dessen expliziter aria-checked-Wert vom tatsächlichen checked-/indeterminate-Zustand abweicht, zur manuellen Prüfung.
Anwendbarkeit. Native <input type="checkbox">- / <input type="radio">-Elemente mit einem expliziten aria-checked-Attribut.
Erwartung. aria-checked ist auf einer nativen Checkbox bzw. einem nativen Radiobutton redundant (der checked-Zustand der Rolle wird bereits nativ bereitgestellt). Setzt ein Autor es dennoch explizit, sollte es mit dem tatsächlichen Zustand des Elements übereinstimmen, sonst wird assistiven Technologien etwas anderes mitgeteilt, als sehende Nutzende wahrnehmen.
Was ein Befund meldet.
ariaChecked: der Zustand, denaria-checkedangibt:true,falseodermixed(nur bei einer Checkbox). Ein anderer Wert gilt alsfalse.actualState: der Zustand, in dem sich das Bedienelement tatsächlich befindet:true,falseodermixedbei einer Checkbox im unbestimmten Zustand.type:checkboxoderradio.
Diese Felder in data.details helfen, einen Befund zu lesen und zu reproduzieren. Außer reasonCode und den wenigen Feldern, die Ausgabeschema als stabil nennt, sind sie kein stabiler Vertrag: Ein Feld kann in einer Minor-Version umbenannt werden oder wegfallen, bauen Sie also nicht darauf auf.
Beispiele
<input type="checkbox" checked aria-checked="true">
aria-checked entspricht dem tatsächlichen checked-Zustand des Steuerelements.
<input type="checkbox" checked aria-checked="false">
Die Checkbox ist tatsächlich aktiviert, aber aria-checked="false" teilt assistiven Technologien das Gegenteil mit.
So prüfen Sie es
Wenn diese Regel nicht entscheiden kann, meldet sie cantTell und überlässt die Frage einer Person. Jede Frage, die sie stellen kann, steht hier unter ihrem Reason-Code, mit den Schritten, um sie zu beantworten. Ein Befund enthält dieselben Schritte in howToCheck, in der Sprache des Scans. Siehe Ausgabeschema.
ARIA_CHECKED_STATE_MISMATCH
- Warten Sie, bis die Seite vollständig geladen ist, suchen Sie dann das im Bericht genannte Kontrollkästchen oder Optionsfeld und notieren Sie, ob es aktiviert aussieht.
- Öffnen Sie den Bereich „Barrierefreiheit“ und lesen Sie seinen checked-Zustand.
- Klicken Sie darauf oder drücken Sie die Leertaste und prüfen Sie, ob sich Aussehen und Zustand im Bereich „Barrierefreiheit“ gemeinsam ändern, oder hören Sie mit einem Screenreader hin.
Bestanden. Der Zustand, den assistive Technologien melden, entspricht dem, was das Bedienelement zeigt, vor und nach der Änderung.
Nicht bestanden. Assistive Technologien melden einen anderen Zustand als den angezeigten; das verstößt gegen WCAG 4.1.2.