Element: ariaChecked プロパティ

Baseline 2023

Newly available

Since October 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

ariaCheckedElement インターフェイスプロパティで、チェックボックスやラジオボタン、その他のチェック状態のあるウィジェットの現在の "checked" 状態を示す aria-checked 属性の値を反映します。

メモ: 可能な限り、HTML の <input> 要素で type="checkbox" を使用してください。この要素には意味づけがあり、ARIA 属性は必要ありません。

以下のいずれかの値を持つ文字列です。

"true"

要素がチェックされています。

"mixed"

3 状態チェックボックスまたは menuitemcheckbox の混在モードの値を示します。

"false"

要素はチェックに対応していますが、現在はチェックされていません。

"undefined"

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

この例では、ID が checkBoxInput の要素の aria-checked 属性は "false" に設定されており、この入力は現在チェックされていないことを示しています。ariaChecked を使用して、値を "true" に更新します。

html
<span
  role="checkbox"
  id="checkBoxInput"
  aria-checked="false"
  tabindex="0"
  aria-labelledby="chk1-label">
</span>
<label id="chk1-label">Remember my preferences</label>
js
let el = document.getElementById("checkBoxInput");
console.log(el.ariaChecked); // "false"
el.ariaChecked = "true";
console.log(el.ariaChecked); // "true"

仕様書

Specification
Accessible Rich Internet Applications (WAI-ARIA)
# dom-ariamixin-ariachecked

ブラウザーの互換性

BCD tables only load in the browser

関連情報