Element: ariaInvalid プロパティ

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2023年10月以降、すべてのブラウザーで利用可能です。

もっと詳しく
完全な互換性情報を見る

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}`);

[フレーム]