aria-errormessage

对象上的 aria-errormessage 属性标识提供该对象错误消息的元素。

描述

当出现用户创建的错误时，您需要让用户知道错误存在，并告诉他们如何修复它。您需要使用两个属性：设置 aria-invalid="true" 将对象定义为处于错误状态，然后添加 aria-errormessage 属性，其值为包含该对象错误消息文本的元素的 id。

aria-errormessage 属性应仅在对象的值无效时使用；当 aria-invalid 设置为 true 时。如果对象有效，并且您包含 aria-errormessage 属性，请确保引用的元素处于隐藏状态，因为其中包含的消息不相关。

当 aria-errormessage 相关时，它引用的元素必须可见，以便用户可以看到或听到错误消息。

通常，您希望包含错误消息的元素成为 ARIA 实时区域，例如当在用户提供无效值后向用户显示错误消息时。错误消息应描述错误所在，并告知用户需要采取哪些措施来使对象有效。将错误消息添加为 ARIA 实时区域可通知辅助技术用户可能会从错误消息内容中受益，即使该错误消息不会以其他方式传达给用户。

如果错误在视觉上明显，并且需要对错误进行明确说明，则应包含可见的错误消息，并使用 aria-errormessage 属性将无效对象与错误消息关联起来。

示例

我们创建一些样式来

  1. 隐藏所有错误消息，
  2. 使无效对象看起来无效，并
  3. 显示位于无效对象之后的兄弟错误消息。

我们使用 aria-invalid="true" 来识别无效对象

css
.errormessage {
  visibility: hidden;
}

[aria-invalid="true"] {
  outline: 2px solid red;
}

[aria-invalid="true"] ~ .errormessage {
  visibility: visible;
}

当对象无效时，我们使用 JavaScript 添加 aria-invalid="true"。上面的 CSS 使位于无效对象之后的 .errormessage 变为可见。

html
<p>
  <label for="email">Email address:</label>
  <input
    type="email"
    name="email"
    id="email"
    aria-invalid="true"
    aria-errormessage="err1" />
  <span id="err1" class="errormessage">Error: Enter a valid email address</span>
</p>

当我们从有效状态变为无效状态时，此示例中唯一的 JavaScript 更改是更新了电子邮件输入对象上的 aria-invalid。由于错误消息位于输入之后，并且在辅助技术树中变得可见和可用，因此我们可以使示例保持简单。我们也可以应用 aria-live 属性，或使用诸如 alert 之类的实时区域角色。

值

id 引用

包含当前元素错误消息的元素的 id 值

关联角色

在角色中使用

从角色继承

规范

规范
可访问的富互联网应用程序 (WAI-ARIA)
# aria-errormessage

另请参阅