Element: ariaInvalid 属性

Baseline 2023

新推出

自 ⁨2023 年 10 月⁩ 以来，此功能已在最新设备和浏览器版本中得到支持。此功能可能无法在旧设备或浏览器上运行。

Element 接口的 ariaInvalid 属性反映了 aria-invalid 属性的值。对于 application、checkbox、combobox、gridcell、listbox、radiogroup、slider、spinbutton、textbox 和 tree 角色相关，它向辅助技术 API 指示输入的值是否不符合应用程序期望的格式。

如果该属性不存在，或者设置为 **空字符串**，辅助技术会将该值视为 false。如果该属性存在但设置为 false、grammar、spelling 或空字符串 ("") 以外的值，则辅助技术会将该值视为 true。该属性反映的是设置的属性值，而不是由辅助技术处理后的值。

值

一个字符串，其值可能为以下之一：

"true": 该元素无效。
"false" (默认): 该元素未处于无效状态。
"grammar": 该元素处于无效状态，因为检测到语法错误。
"spelling": 该元素处于无效状态，因为检测到拼写错误。

示例

在此示例中，ID 为 quote 的元素的 aria-invalid 属性被省略，返回 null 并被视为 false。使用 ariaInvalid，我们将值更新为 grammar (因为有两个错误)。

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

规范

规范
无障碍富互联网应用程序 (WAI-ARIA) # dom-ariamixin-ariainvalid

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面最后修改于 ⁨2025年4月19日⁩，由 MDN 贡献者修改。

在 GitHub 上查看此页面 • 报告此内容的错误