无障碍访问 错误

为什么

每个人都会犯错。当我们犯错时，我们需要理解我们为什么失败，以便能够纠正自己。可访问的表单需要有可感知且可理解的错误消息，供色盲、失明或视力低下者以及有认知能力限制的人使用。

什么

可访问的错误消息是

• 以文本形式写出。可以使用颜色和图标，但不能单独使用。
• 靠近导致失败的元素。
• 信息丰富，帮助用户。
• 在代码中与失败的元素相关联。

此外，将焦点移动到出现故障的表单控件上会很有帮助。

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

如何操作

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

以文本形式书写

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

近距离

彼此靠近的设计元素被感知为相关的，而分开的元素则被感知为属于不同的组。

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

信息丰富

信息越丰富越好。

在我们第一个示例中，“您的名字必须至少包含两个字母，不能包含特殊字符”这个错误消息信息量很丰富。它是用人类语言写的。可以改进，写得更精确

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

越精确越好。这意味着系统需要更多的错误消息来处理不同的情况。在决定要创建多少种不同的错误消息和情况时，要务实。询问用户他们是否明白出了什么问题。如果他们不明白，请更精确地撰写错误消息。

与表单控件关联

但代码呢？

<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">

移动焦点

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

在此示例中，所有三个字段都无效。焦点移动到了第一个字段“名字”。当用户开始键入时，错误会消失。