ARIA：aria-errormessage 属性

描述

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

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

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

通常，您会希望包含错误消息的元素成为一个 ARIA live region，例如当用户提供了无效值后显示错误消息时。错误消息应描述问题所在，并告知用户使对象有效的必要操作。将错误消息添加为 ARIA live region 会通知辅助技术，即使错误消息不会以其他方式传达给用户，用户也能从中受益。

如果故障明显可见，并且需要对错误进行明确描述，请包含可见的错误消息，并通过 aria-errormessage 属性将无效对象与其关联。

示例

我们创建了一些样式来

隐藏所有错误消息，
使无效对象显示为无效，以及
显示紧跟在无效对象之后的同级错误消息。

我们使用 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 属性或使用 live region 角色，例如 alert。