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

时间:2019-11-16 21:49:24

标签: accessibility wcag2.0

我正在进行一些辅助功能测试。在网站上,他们拥有注册表并使用表单验证技术。错误文本显示在表单字段下,其中在表单字段中插入的数据无效。当前,错误文本会即时显示,而不是在表单提交中显示。当您浏览表单时,会出现错误。

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

在这种情况下,什么是“最佳实践”?我觉得他们需要更改此表单满足WCAG的方式。

在字段上使用aria- describeby并与错误消息相关联似乎没有什么意义,因为在错误出现时,用户已移至新字段。他们是否应该显示提交按钮,然后又允许表单提交失败时宣布错误?还是出现错误文本在屏幕上更改而没有任何变化提醒屏幕阅读器的问题?

3 个答案:

答案 0 :(得分:2)

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

  • 使用aria-require来通知必填字段。进入该字段时,屏幕阅读器会显示“ required”。
  • 使用aria-invalid通知当前无效的字段。进入该字段时,屏幕阅读器会显示“无效”。
  • 使用aria- describeby将错误消息链接到该字段。屏幕阅读器提供了一种在错误字段内阅读说明的方法
  • 使用aria-live通知屏幕阅读器出现或消失的文本。屏幕阅读器会尽快读取文本。非常适合错误。

如您所见,通过可访问性即时验证没有错。

我只想说一句:输入错误时,最好应禁用“提交”按钮,而不是使其不可见。 一个不可见的按钮可能会阻止您完全输入密钥提交。如果禁用按钮,则按Enter提交表单将产生警告。 使用Enter键提交对于屏幕阅读器用户来说非常重要,因为它避免了搜索提交按钮的麻烦。

使用表单上的onsubmit事件(而不是单击“提交”按钮)来确保在发送表单数据之前运行JavaScript验证代码,而不管表单是如何提交的(单击“提交”或Enter键)

答案 1 :(得分:0)

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

答案 2 :(得分:0)

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

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

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