简答
是的,标准 HTML5 验证可访问并将通过 WCAG2.1 AA,但你可以做得更好与一些JavaScript。
长答案
如果您需要支持 Internet Explorer 9 或更低版本,那么您将需要使用 JavaScript(根据WebAim 调查 https://webaim.org/projects/screenreadersurvey8/- “浏览器”部分仍覆盖约 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 的后备方案。
正如您可以想象的那样,如果您找不到可以在几乎任何形式上重用的现成库,那么您可以编写一个库。