Element: ariaInvalid プロパティ

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.

ariaInvalid は Element インターフェイスのプロパティで、 aria-invalid の値を反映します。application、checkbox、combobox、gridcell、listbox、radiogroup、slider、spinbutton、textbox、tree ロールの場合、入力値がアプリケーションが期待する書式に適合していないことをアクセシビリティ API に示します。

この属性が存在しない場合、または空の文字列に設定されている場合、支援技術は値が false に設定されているかのように扱います。属性が存在するが、false、grammar、spelling、または空文字列 ("") 以外の値に設定されている場合、支援技術は値を true として扱います。このプロパティは、支援技術によって処理された値ではなく、設定された属性の値を反映します。

値

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

"true": この要素は不正な状態です。
"false" （既定値）: この要素は不正な状態にありません。
"grammar": この要素は、文法的なエラーが検出されたため不正な状態です。
"spelling": この要素は、綴りエラーがは検出されたため不正な状態です。

例

この例では、要素の aria-invalid 属性が、ID が quote の要素においては省略され、null を返し、false として扱われます。ariaInvalid を使用し、値を grammar に更新します（エラーが 2 つあるため）。

html

<div id="quote" role="textbox" contenteditable>you are your best thing..</div>

<hr />
<pre id="log"></pre>

const logElement = document.querySelector("#log");
function log(text) {
  logElement.innerText = `${logElement.innerText}${text}\n`;
  logElement.scrollTop = logElement.scrollHeight;
}

const el = document.getElementById("quote");
log(`Initial value: ${el.ariaInvalid}`);
el.ariaInvalid = "grammar";
log(`Updated value: ${el.ariaInvalid}`);