aria-checked
aria-checked 属性は、チェックボックスやラジオボタン、その他のウィジェットの現在の「チェックされている」状態を示します。
メモ:
可能な場合は、HTML の type="checkbox" もしくは type="radio" の <input> 要素を使用してください。これらにはセマンティクスが組み込まれており、ARIA 属性が必要ありません。
解説
aria-checked 属性は、要素がチェックされているか (true)、チェックされていないか (false)、またはチェック状態が未決定 (mixed)（チェックされている状態でもチェックされていない状態でもない）であるかどうかを示します。mixed の値は 3 状態入力ロールである checkbox と menuitemcheckbox によってサポートされています。
mixed の値は、radio や menuitemradio、 switch などのロール、およびこれらを継承する要素ではサポートされていません。サポートされていないときに mixed が設定されている場合、値は false になります。
<span
role="checkbox"
id="checkBoxInput"
aria-checked="false"
tabindex="0"
aria-labelledby="chk15-label"></span>
<label id="chk15-label">Subscribe to the newsletter</label>
フォーカスを有効にするには、tabindex 属性が必要です。aria-checked 状態を切り替えるには、JavaScript が必要です。また、このチェックボックスが送信可能なフォームの一部である場合は、名前と値を設定するために、さらに JavaScript が必要です。
上記は次のように記述することもできます:
<input type="checkbox" id="chk15-label" name="Subscribe" />
<label for="chk15-label">Subscribe to the newsletter</label>
type="checkbox" の <input> 要素を ARIA の代わりに使用すると、JavaScript は必要ありません。
値
- false
-
要素はチェックをサポートしていますが、現在はチェックされていません。
- true
-
要素はチェックされています。
- mixed
-
checkboxおよびmenuitemcheckboxの場合のみ、indeterminateと同等であり、チェックもチェック解除もされていない混合モードの値を示します。 - undefined (デフォルト)
-
要素はチェックに対応していません。
関連ロール
以下のロールで使用されます:
関連インターフェイス
Element.ariaChecked-
Elementインターフェイスの一部であるariaCheckedプロパティは、aria-checked属性の値を反映します。 ElementInternals.ariaChecked-
ElementInternalsインターフェイスの一部であるariaCheckedプロパティは、aria-checked属性の値を反映します。
myHTMLElement.ariaChecked = true;
仕様書
| Specification |
|---|
| Accessible Rich Internet Applications (WAI-ARIA) # aria-checked |
| Unknown specification |