html - 屏幕阅读器和 HTML5 验证

Question

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

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

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

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

标签： htmlscreen-readershtml5-validation

Answer 1

查看我对使用 HTML5 约束验证 API 使字段无效时必须使用 aria-invalid 的答案吗？

起初它可能看起来无关，但它与使用内置的“约束验证”API有关，听起来你正在使用它。总之，object.validity.valid设置了内部属性，但只有一些屏幕阅读器尊重该属性（屏幕阅读器将宣布该字段错误），即使它被尊重，错误消息也没有与错误字段正确关联，所以你不会听到错误信息。

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

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