aria-checked-state-mismatch

ネイティブのチェックボックスやラジオボタンのaria-checkedは実際の状態と一致させることが推奨されます

manualWCAG 4.1.2 (A)確度:medium重大度:moderaterobust

明示的なaria-checkedの値が実際のchecked/indeterminateの状態と食い違っているネイティブの<input type="checkbox">/<input type="radio">を、手動レビューの対象として報告します。

適用範囲:明示的なaria-checked属性を持つ、ネイティブの<input type="checkbox">/<input type="radio">要素。

期待される結果:ネイティブのチェックボックスやラジオボタンではaria-checkedは冗長です(ロールのチェック状態はネイティブにすでに公開されている)。それでも作成者が明示的に指定する場合は、要素の実際の状態と一致させるべきです。一致しないと、晴眼のユーザーが目にしている状態とは異なる情報が支援技術に伝わります。

検出結果が報告する内容:

  • ariaChecked:aria-checkedが伝える状態で、true、false、mixed(チェックボックスのみ)のいずれかです。これら以外の値はfalseとみなします。
  • actualState:コントロールの実際の状態で、true、false、または中間状態のチェックボックスではmixedです。
  • type:checkboxまたはradioです。

これらのdata.detailsのフィールドは、検出結果を読み解き、再現するのに役立ちます。reasonCodeと、出力スキーマで安定と明記された一部のフィールドを除き、安定した契約ではありません。マイナーリリースで名前が変わったり、なくなったりすることがあるため、これらに依存した実装はしないでください。

例

pass
<input type="checkbox" checked aria-checked="true">

aria-checkedがコントロールの実際のチェック状態と一致しています。

can't tell
<input type="checkbox" checked aria-checked="false">

チェックボックスは実際にはチェックされていますが、aria-checked="false"が支援技術に逆の状態を伝えています。

確認方法

このルールが判断できない場合はcantTellを報告し、判断を人に委ねます。ルールが投げかける各質問を、理由コードごとに、答えるための手順とともにここに示します。検出結果にも同じ手順がhowToCheckとして、スキャンの言語で含まれます。出力スキーマを参照してください。

ARIA_CHECKED_STATE_MISMATCH

  1. ページが完全に読み込まれるまで待ってから、レポートに示されたチェックボックスまたはラジオボタンを見つけ、チェックされているように見えるかを控えてください。
  2. アクセシビリティペインを開き、そのチェック状態を読んでください。
  3. クリックするかSpaceを押し、見た目とアクセシビリティペインの状態の両方が一緒に変わることを確認するか、スクリーンリーダーで聞いて確認してください。

満たす場合:変更の前後で、支援技術が伝える状態がコントロールの表示と一致しています。

満たさない場合:支援技術が表示とは異なる状態を伝えるため、WCAG 4.1.2を満たしません。

ソースコードを見る