HTML5表单验证真的可以访问吗？

所以我读了很多文章，说HTML5表单验证是可访问的（things

required

属性将阻止表单提交，但一个字段是空的），然而当我在Chrome上的NVDA和Android上的BackTalk上测试我的表单时，如果我没有填写输入，它会将焦点放回输入字段（这很好！）但两个屏幕阅读器都会宣布“请填写此字段”，这对用户来说是无用的，因为它们不会宣布字段的标签

所以HTML5验证本身是不可访问的？另外，你能将HTML5验证和自定义JS结合起来吗

您是否必须编写自定义客户端站点验证才能访问表单？

简短回答 是的，标准HTML5验证是可访问的，并且将通过WCAG2.1 AA，但是使用一些JavaScript可以做得更好

长话短说 如果您需要支持InternetExplorer9或更低版本，那么您将需要使用JavaScript（根据“浏览器”一节，JavaScript仍然覆盖了大约3.6%的屏幕阅读器用户）

原生HTML5验证是一个很好的起点，但也有一些限制（您在评论中给出了一个限制，一些屏幕阅读器（NVDA）不会再次宣布标签，这意味着用户必须通过控件实际请求读取标签）

另一件事是，一旦你离开一个字段，它通常不会告诉你你犯了一个错误，直到你提交了表单（这是有意的，但这并不总是取决于你的公布速度、设置和浏览器）

例如，更新

aria invalid

对于即时反馈非常有用（并为较旧的浏览器提供支持，同时对“不寻常”的屏幕阅读器更加健壮）

使用

aria-live

区域提供即时反馈

onblur

（或节流/去抖动）也是很有用的，也是更好的解决方案

另一件事是本机验证实际上不是很有效fff@fff显示为有效电子邮件，并允许在

type=“email”

字段中提交表单，与

type=“url”

相同，它将允许

https://fff

待提交（至少使用Chrome）

我可以继续做其他事情，比如提供更好的关于如何修复错误的说明（特别是对于电话号码之类的事情），但你明白了

基本上，使用尽可能多的本地HTML5功能为JavaScript错误/不使用JavaScript的人提供坚实的基础和良好的回退。然后使用CSS和JS改善每个人的体验

另外，你能结合HTML5验证和定制JS吗

您可以而且应该知道，您最终会加倍验证（正如我在回退中所说的，这并不是一件坏事）

其优点在于，您可以在JavaScript中使用伪选择器按类型将字段作为目标，从而省去了添加不必要的类等的需要

e、 g.

document.querySelectorAll（'input[type=email]'）

可用于选择任何电子邮件输入进行验证，或

document.querySelectorAll（'input[required]'）

可用于查找所有必填字段

您还可以在滑块/数字输入上使用类似于

max=“100”

的功能来“动态”设置验证范围，并且仍然有一个无JavaScript的回退

---

正如您所想象的，如果您找不到现成的、几乎可以在任何形式上重复使用的库，那么就编写一个库。

HTML验证（假设您是指W3C验证程序）用于通过正确使用HTML元素和属性来确保有适当的文档结构。它不是用来确保您的文档能够正常工作的你愿意。对不起，我编辑了我的问题。你能展示一下你用来测试的表单的源代码吗？@NineBerry