屏幕阅读器应该如何处理错误消息?

How should error messages should be handled for screen readers?

我正在进行一些可访问性测试。在网站上,他们有一个注册表并使用表单验证技术。错误文本显示在表单域下方,其中表单域中插入的数据无效。目前,错误文本会即时出现,而不是在表单提交时出现。当您在表单中切换时,会出现错误。

根据设计,表单提交按钮在表单字段数据有效之前是不可见的。因此,目前无法对表单提交进行错误检查。

在这种情况下,"best practice" 被认为是什么?我觉得他们需要更改此表单的设计方式以满足 WCAG。

在字段上使用 aria-describedby 并与错误消息相关联似乎没有什么意义,因为在错误出现时,用户已移动到新字段。他们是否应该希望显示提交按钮,然后允许在表单提交失败时宣布错误?或者是否存在另一个问题,即屏幕上的错误文本发生变化而没有任何变化提醒屏幕 reader?

Internet 上有很多关于可访问的表单验证和错误通知的文献。 以下是您可以进行搜索的一些提示:

  • 使用 aria-required 通知必填字段。按 T​​ab 键进入字段时,屏幕 reader 显示 "required"。
  • 使用 aria-invalid 通知当前无效的字段。按 T​​ab 键进入字段时,屏幕 reader 显示 "invalid"。
  • Link 字段使用 aria-describedby 的错误消息。屏幕 reader 提供了一种在错误字段中阅读描述的方法
  • 使用 aria-live 通知屏幕 reader 出现或消失的文本。屏幕会尽快阅读文本 reader。它非常适合错误。

如您所见,使用可访问性即时验证并没有错。

我只想说一句:当输入不正确时,提交按钮最好是禁用的,而不是不可见的。 一个不可见的按钮可能会完全阻止输入密钥提交。如果按钮被禁用,则按 enter 提交表单将产生警告。 使用回车键提交对于屏幕 reader 用户来说非常重要,因为它避免了他们搜索提交按钮的痛苦。

在表单上使用 onsubmit 事件,而不是 onclick 提交按钮,以确保在发送表单数据之前 JavaScript 验证码是 运行,无论表单如何已提交(点击提交或输入密钥)。

很有帮助。就其价值而言,您不应该有不可见或不活动的按钮。非活动按钮是两者中最糟糕的一个,因为它们不会告知用户它们为何处于非活动状态。最好有一个活动按钮,然后在用户尝试提交时突出显示问题。

根据您的通知,role=alertaria-live 可能会解决您的问题。

role=alert "警报角色用于向用户传达重要且通常是时间敏感的消息。当将此角色添加到元素时,浏览器将发出可访问的警报事件以辅助然后可以通知用户的技术产品。警报角色对于需要用户立即注意的信息最有用”- 摘自 MDN, Using the alert role

aria-live “aria-live 属性允许我们所有人在页面特定区域的内容更新时通知屏幕 reader 用户。” - 摘自 CCCAccessibility