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

Question

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

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

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

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

Answer 1

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

• 使用 aria-required 来通知必填字段。进入该字段时，屏幕阅读器会显示“需要”。
• 使用 aria-invalid 通知当前无效的字段。进入该字段时，屏幕阅读器会显示“无效”。
• 使用 aria-describeby 将错误消息与字段联系起来。屏幕阅读器提供了一种在错误字段内阅读描述的方法
• 使用 aria-live 通知屏幕阅读器出现或消失的文本。屏幕阅读器会尽快阅读文本。它非常适合错误。

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

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

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