无法在<input />上使用“ required”。是否有一种简单的方法使其可访问（JS），还是我必须放弃它？

Question

我的表单有几个输入字段（电子邮件，名字，姓氏等），全部使用“ required”属性。

<input required></input>

这会在每个浏览器中显示一条不错的通用错误消息，并使浏览器为我验证输入。

但是，根据Accessible360，屏幕阅读器无法读取这些错误消息。

有没有一种解决方法，不不涉及添加大量额外的标签，属性，aria属性，文本和Javascript？也许只是一个Javascript会将浏览器内的错误转换为警报？我正在尝试保持代码干净。

感谢您的帮助。

Answer 1

问题不是应该鼓励使用required属性。早在2012年，Using the required attribute to indicate a required input field已添加有关屏幕阅读器支持的注释。那是7年前的事，现在新的屏幕阅读器提供了很好的支持。

现在的问题是，您必须对所需字段有直观的指示： H90: Indicating required form controls using label or legend 并且您必须指出带有错误的字段 G83: Providing text descriptions to identify required fields that were not completed

Paciello小组有一个很好的有关该主题的最新页面： Required attribute requirements，其中提供了有关屏幕阅读器/浏览器支持的更多信息（“ ”，但将话语提示与Firefox和Android上的Chrome一起使用。”）以及使用aria-invalid或{{1} }如果字段有错误。

Answer 2

我想您可以使用jQuery将需要的标签动态添加到所有需要的输入中。对于HTML5之前的必需文件，我认为它是aria必需的...

$(':input[required]').prop('aria-required',true);

根据Mozilla要求使用咏叹调的屏幕阅读器，应按要求宣布该字段。

对于警报，您可以使用脚本检查是否所有必需的输入都具有onSubmit值。