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

【问题标题】：Is HTML5 form validation truly accessible?HTML5 表单验证真的可以访问吗？
【发布时间】：2020-01-23 21:53:52
【问题描述】：

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

所以单独的 HTML5 验证无法访问？另外，可以结合 HTML5 验证和自定义 JS 吗？

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

【问题讨论】：

HTML 验证，假设您指的是 W3C 验证器，用于通过正确使用 HTML 元素和属性来确保存在正确的文档结构。它不能确保您的文档如您所愿。
对不起，我编辑了我的问题。
你能把你用于测试的表格的源代码展示出来吗？
paciellogroup.com/contact@NineBerry

标签： html validation accessibility

【解决方案1】：

简答

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

长答案

如果您需要支持 Internet Explorer 9 或更低版本，那么您将需要使用 JavaScript（根据 WebAim survey - “浏览器”部分仍然涵盖大约 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 中使用伪选择器按类型定位字段，从而无需添加不必要的类等。

例如document.querySelectorAll('input[type=email]') 可用于选择任何电子邮件输入进行验证或document.querySelectorAll('input[required]') 可用于查找所有必填字段。

您还可以在滑块/数字输入上使用 max="100" 之类的东西来“即时”设置您的验证范围，并且仍然可以在没有 JavaScript 的情况下进行后备。

您可以想象，如果您找不到可在几乎任何形式上重复使用的现成库，让我们编写一个库。

【讨论】：