屏幕阅读器和 HTML5 验证

【问题标题】：Screen Reader and HTML5 validation屏幕阅读器和 HTML5 验证
【发布时间】：2019-05-16 03:00:19
【问题描述】：

使用 HTML5 验证和屏幕阅读器，有没有办法让屏幕阅读器阅读 HTML5 验证消息？

<form>
    <input type="email" required="required">
</form>

如果输入了无效的电子邮件，我们会收到 HTML5 验证消息

我们的问题是屏幕阅读器从不阅读此验证消息，有没有办法让它这样做？

【问题讨论】：

可以试试加aria-required="true"
@IvanS95 - 我还要添加什么？无法定位此消息
到输入栏<input type="email" aria-required="true">
@IvanS595 仅适用于输入元素
你测试了吗？ <input type="text" required aria-required="true"> 这可能会读取显示的消息

标签： html screen-readers html5-validation

【解决方案1】：

看看我对Must I use aria-invalid when I invalidate a field using the HTML5 constraint validation API?的回复

起初它可能看起来无关，但它与使用内置的“constraint validation”API 有关，听起来你正在使用它。总之，设置了内部object.validity.valid 属性，但只有一些屏幕阅读器支持该属性（屏幕阅读器将宣布该字段有错误），即使它被接受，错误消息也没有正确地与中的字段相关联错误，因此您不会听到错误消息。

所以目前的答案是“不”，你不能强迫屏幕阅读器阅读内置的错误信息，这是不幸的。

要将错误消息与字段正确关联，请参阅上述答案。

【讨论】：

感谢您的回复，是我自己还是这看起来像是浏览器的过度网站？
我不确定问题出在哪里。如果浏览器没有将错误消息显示到可访问性树，那么这是浏览器/用户代理问题。如果它浮出水面，那么这是一个辅助技术问题。不管怎样，我同意这是一个疏忽。