aria-checked

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 (デフォルト)

要素はチェックに対応していません。

以下のロールで使用されます:

• checkbox
• menuitemcheckbox
• menuitemradio
• option
• radio
• switch

Element.ariaChecked

Element インターフェースの一部である ariaChecked プロパティは、aria-checked 属性の値を反映します。

ElementInternals.ariaChecked

ElementInternals インターフェースの一部である ariaChecked プロパティは、aria-checked 属性の値を反映します。

myHTMLElement.ariaChecked = true;

• <input type="checkbox">
• <input type="radio">
• aria-pressed
• aria-selected
• Two state checkbox example - w3.org
• Mix-state checkbox example - w3.org