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

【问题标题】：How should error messages should be handled for screen readers?应该如何处理屏幕阅读器的错误消息？
【发布时间】：2019-11-16 21:49:24
【问题描述】：

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

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

在这种情况下，什么被认为是“最佳做法”？我觉得他们需要改变这种形式的设计方式以满足 WCAG。

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

【问题讨论】：

【解决方案1】：

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

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

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

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

【讨论】：

谢谢，这很有帮助。（很抱歉，如果您有多个通知我的回复，我一直按 Enter 而不是 shift enter）。
aria-required 正在使用中，我打算建议使用 aria- describeby。我主要担心的是用户不会将错误读给他们，因为榕树会移动到下一个字段，使字段 1 出现错误和相关的 aria- describeby 标签，但用户不会意识到错误。由于验证未完成，因此没有表单提交按钮，用户需要循环浏览表单，寻找表单未按预期运行的证据。
这样设计可以接受吗？我的印象是 WCAG 要求用户收到更改通知。
这正是 aria-live 的用途：读取没有焦点的元素中的文本变化。如果您在前一个字段中的错误消息也是 aria-live=polite，那么屏幕阅读器会在它出现时读取它。对于提交按钮，当它完全不存在时，首先想到的是“它不起作用”而不是“我错过了一些东西”。禁用按钮旁边带有非常简单的消息“某些字段不正确”会好得多。

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

非常有帮助。对于它的价值，你不应该有不可见或不活动的按钮。非活动按钮是两者中最差的一个，因为它们不会通知用户他们为什么不活动。最好有一个活动按钮，然后在用户尝试提交时突出显示问题。

【讨论】：