可访问性 错误

为什么

每个人都会犯错。当我们犯错时，我们需要理解我们失败的原因，才能纠正自己。一个可访问的表单需要错误消息，这些消息对于色盲、盲人或低视力人士以及认知能力有限的人来说是可感知和可理解的。

什么

一个可访问的错误消息是

• 以文本形式编写。可以使用颜色和图标，但不能单独使用。
• 靠近出错的元素。
• 提供信息，帮助 用户。
• 关联 到代码中出错的元素。

此外，将焦点移动到出错的表单控件也很有帮助。

在这个注册表单中，用户输入了数字而不是字符。

如何

您将学习五种创建可访问错误消息的技术。

以文本形式编写

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

紧密排列

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

在本例中，错误消息靠近出错的字段。结合字段之间较大的边距，很容易理解错误消息属于哪个字段。

提供信息

信息越丰富越好。

在我们的第一个示例中，错误“您的名字必须至少包含两个字母，并且不包含任何特殊字符”提供了信息。它用人类语言编写。可以对其进行改进，写得更准确。

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

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

与表单控件关联

但是代码呢？

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

<p id="firstName-length-error" role="alert">您的名字必须至少包含两个字母，并且不包含任何特殊字符</p>

错误具有角色 alert。这很好。即使错误消息没有焦点，它也会让屏幕阅读器读出内容。

错误消息未与字段关联。这可以通过使用aria-describedby 属性来实现。其值为错误消息的 ID。

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

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

移动焦点

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

在本例中，所有三个字段都无效。焦点移动到了第一个字段“名字”。当用户开始输入时，错误将被移除。