accessibility - 屏幕阅读器应该如何处理错误消息？

Question

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

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

在这种情况下，什么被认为是“最佳实践”？我觉得他们需要改变这个表格的设计方式来满足 WCAG。

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

Answer 1

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

使用 aria-required 来通知必填字段。进入该字段时，屏幕阅读器会显示“需要”。

使用 aria-invalid 通知当前无效的字段。进入该字段时，屏幕阅读器会显示“无效”。

使用 aria-describeby 将错误消息与字段联系起来。屏幕阅读器提供了一种在错误字段内阅读描述的方法

使用 aria-live 通知屏幕阅读器出现或消失的文本。屏幕阅读器会尽快阅读文本。它非常适合错误。

如您所见，使用可访问性进行动态验证并没有错。

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

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