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

Question

所以我读了很多文章说 HTML 5 表单验证是可访问的(阻止提交表单的 required 属性是一个字段留空)，但是当我在 Chrome 和 BackTalk 上的 NVDA 上测试我的表单时在 Android 上，如果我没有填写输入，它会重新聚焦到输入字段(这很好!)但是两个屏幕阅读器都会宣布“请填写此字段”，这对用户来说是无用的，因为他们没有宣布该领域的标签。

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

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

Answer 1

简答
是的，标准 HTML5 验证是可访问的，并将通过 WCAG2.1 AA，但你可以做得更好使用一些 JavaScript。
长答案
如果您需要支持 Internet Explorer 9 或更低版本，那么您将需要使用 JavaScript(根据 WebAim survey - “浏览器”部分仍然涵盖大约 3.6% 的屏幕阅读器用户)。
原生 HTML5 验证是一个很好的起点，但有一些限制(您在评论中给出了一个，一些屏幕阅读器 (NVDA) 不会再次宣布标签，这意味着用户必须亲自要求通过控件读取标签)。
另一件事是，一旦你离开一个字段，它通常不会告诉你你犯了一个错误，直到你提交了表单(它的意思是，但情况并非总是如此，这取决于你的宣布速度、设置和浏览器) .
例如更新 aria-invalid对于即时反馈很有用(并为旧版浏览器提供支持，同时使用“不寻常”的屏幕阅读器更加强大)。
使用 aria-live地区提供即时反馈onblur (或节流/去抖动)也很有用，是更好的解决方案。
另一件事是 native 验证实际上并不是很有效。例如，fff@fff 显示为有效的电子邮件，并允许在 type="email" 上提交表单。字段，与 type="url" 相同它将允许 https://fff提交(至少在 Chrome 中)。
我可以继续做其他事情，例如提供有关如何修复错误的更好说明(尤其是对于电话号码之类的问题)，但您明白了。
基本上，尽可能多地使用原生 HTML5 功能 为 JavaScript 错误/不使用 JavaScript 的人提供坚实的基础和良好的后备。然后使用 CSS 和 JS 来改善每个人的体验。

Also, can you combine HTML5 validation and custom JS?

你可以而且你应该知道你最终会加倍验证(这不是一件坏事，正如我所说的后备)。
美妙之处在于您可以在 JavaScript 中使用伪选择器按类型定位字段，从而无需添加不必要的类等。
例如 document.querySelectorAll('input[type=email]')可用于选择任何电子邮件输入进行验证或 document.querySelectorAll('input[required]')查找所有必填字段。
你也可以使用 max="100" 之类的东西。在 slider /数字输入上“即时”设置您的验证范围，并且仍然有一个没有 JavaScript 的后备。
正如您可以想象的那样，如果您找不到可在几乎任何形式上重复使用的现成库，那么您可以编写一个库。