辅助功能错误

为什么

每个人都会犯错。 当我们这样做时，我们需要了解我们失败的原因，以便能够纠正自己。 可访问的表单需要色盲、盲人或视力低下的人以及认知能力有限的人可以感知和理解的错误消息。

什么

可访问的错误消息是

• 写成文本。 可以使用颜色和图标，但不能单独使用。
• 关闭失败的元素。
• 信息丰富，帮助用户。
• 关联 到代码中的失败元素。

此外，有助于将焦点移至失败的表单控件。

在此注册表单中，用户键入了一个数字而不是字符。

如何

您将学习五种创建易于访问的错误消息的技巧。

写在文字中

除警告图标和红色边框外，错误消息以文本形式书写。 三个不同的指示器使用户清楚地了解这种错误情况。 只有图标和红色边框不足以让所有用户理解。

靠在一起

彼此靠近的设计元素被认为是相关的，而间隔开的元素被认为属于不同的组。

在此示例中，错误接近失败字段。 结合字段之间的较大间距，很容易理解错误消息属于何处。

信息性

信息越多越好。

在我们的第一个例子中，错误 "你的名字必须至少有两个字母并且没有不寻常的字符"是提供信息的。 它是用人类语言写成的。 它可以改进，写得更精确:

"您的名字只能包含字母，不能包含数字。"

越精确越好。 这意味着系统需要针对不同情况的更多错误消息。 在决定要创建多少种不同的错误消息和情况时要务实。 询问用户是否了解问题所在。 如果不是，请更准确地写下错误。

与表单控件关联

但是代码呢?

<input name="firstName" id="firstNameInput" type="text" pattern="[^.]*?">

<p id="firstName-length-error" role="alert">Your first name must have at least two letters and no unusual characters</p>

该错误具有警报角色。 这很好。 它会让屏幕阅读器读出内容，即使它没有聚焦。

错误信息与字段无关。 这可以使用 aria-describedby 属性来完成。 该值是错误消息的 ID。

此外，我们应该在无效的表单控件上添加 aria-invalid="true" 以告诉屏幕阅读器表单控件已失败。 输入字段的改进版本:

<input name="firstName" id="firstNameInput" type="text" pattern="[^.]*?" aria-describedby="firstName-length-error" aria-invalid="true">

移动焦点

与客户端验证相比，这对于服务器端验证更为重要。 当用户提交表单时，焦点移动到第一个无效字段。

在此示例中，所有三个字段都无效。 焦点已移至第一个字段 First name。 当用户开始输入时错误被删除。