ARIA: aria-invalid 属性

描述

aria-invalid 属性用于指示输入字段中输入的值不符合应用程序将接受的格式或值。这可能包括电子邮件地址或电话号码等格式。aria-invalid 也可用于指示必填字段为空。

aria-invalid 属性可与任何典型的 HTML 表单元素一起使用，并且不限于已分配 ARIA 角色的元素。

该属性应由 JavaScript 在验证过程结束后设置。如果确定某个值无效或超出范围，请设置 aria-invalid="true" **并**告知用户存在错误。为了获得更好的用户体验，请提供如何纠正错误的建议。在用户尝试提交表单之前，请勿在空必填元素上设置 aria-invalid="true"。用户可能仍在填写。

注意：当 aria-invalid 与 aria-required 属性一起使用时，在表单提交之前不应将 aria-invalid 设置为 true - 仅作为验证的响应。

目前有四种值：除了 true 和 false 外，我们还有 grammar，当检测到语法错误时可以使用；以及 spelling，用于拼写错误。如果属性不存在，或者其值为 false，或者其值为空字符串，则适用默认值 false。任何其他值都将被视为设置了 true。

原生 HTML 验证

HTML 具有原生表单验证。当用户提交包含错误控件的表单时，第一个具有无效值的表单控件会以原生方式显示错误消息。

如果表单控件上有一个未填写的 required 属性，表单将不会提交，并会显示一条错误消息，内容为“请填写此字段”或类似内容。原生验证的消息因浏览器而异，且无法自定义样式。

html

<input type="number" step="2" min="0" max="100" required />

如果用户在前面的输入示例中输入的值超过最大值、低于最小值或与步进值不匹配，则会显示错误消息。如果用户输入了“3”，原生错误消息将类似于“请输入有效值”。

如果您正在创建自己的表单验证脚本，请确保在无效的表单控件上包含 aria-invalid，同时包含样式（使用 [aria-invalid="true"] 属性选择器）和消息（使用 aria-errormessage），以帮助用户理解错误所在以及如何修复它。

值

grammar: 检测到语法错误。
false（默认）: 值中未检测到错误。
spelling: 检测到拼写错误。
true: 用户输入的值验证失败。

此列表中的任何值都将被视为 true。

示例

以下代码片段展示了一个简化的版本，包含两个带有附加到 blur 事件的验证函数的表单字段。请注意，由于 aria-invalid 的默认值为 false，因此添加此属性到 input 元素并非严格必需。

html

<ul>
  <li>
    <label for="name">Full Name</label>
    <input
      type="text"
      name="name"
      id="name"
      aria-required="true"
      aria-invalid="false" />
  </li>
  <li>
    <label for="email">Email Address</label>
    <input
      type="email"
      name="email"
      id="email"
      aria-required="true"
      aria-invalid="false" />
  </li>
</ul>

document.getElementById("name").addEventListener("blur", () => {
  checkValidity(
    "name",
    " ",
    "Invalid name entered (requires both first and last name)",
  );
});

document.getElementById("email").addEventListener("blur", () => {
  checkValidity("email", "@", "Invalid email address");
});

请注意，并非必须立即在 blur 事件时验证字段；应用程序可以等到表单提交时再验证（尽管这不一定推荐）。

以下代码片段展示了一个验证函数，它只检查特定字符是否存在（在实际应用中，验证可能会更复杂）。

function checkValidity(id, searchTerm, msg) {
  const elem = document.getElementById(id);
  if (elem.value.includes(searchTerm)) {
    elem.setAttribute("aria-invalid", "false");
    updateAlert();
  } else {
    elem.setAttribute("aria-invalid", "true");
    updateAlert(msg);
  }
}

以下代码片段展示了 alert 函数，这些函数添加（或移除）错误消息。

function updateAlert(msg) {
  const oldAlert = document.getElementById("alert");
  if (oldAlert) {
    oldAlert.remove();
  }

  if (msg) {
    const newAlert = document.createElement("div");
    newAlert.setAttribute("role", "alert");
    newAlert.setAttribute("id", "alert");
    const content = document.createTextNode(msg);
    newAlert.appendChild(content);
    document.body.appendChild(newAlert);
  }
}

请注意，alert 具有 ARIA 角色属性设置为 alert。