html - HTML5 表单验证真的可以访问吗?
问题描述
所以我读了很多文章说 HTML 5 表单验证是可访问的(required
阻止表单提交的东西属性是一个字段留空),但是当我在 Chrome 上的 NVDA 和 Android 上的 BackTalk 上测试我的表单时,如果我没有填写输入,它会重新关注输入字段(这很好!)但是两个屏幕阅读器都会宣布“请填写此字段”,这对用户来说是无用的,因为他们没有宣布标签领域的。
所以单独的 HTML5 验证是不可访问的?另外,你能把 HTML5 验证和自定义 JS 结合起来吗?
您是否必须编写自定义客户端站点验证才能使表单可访问?
解决方案
简答
是的,标准的 HTML5 验证是可访问的,并且将通过 WCAG2.1 AA,但您可以使用一些 JavaScript做得更好。
长答案
如果您需要支持 Internet Explorer 9 或更低版本,那么您将需要使用 JavaScript(根据WebAim 调查- “浏览器”部分仍然涵盖大约 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 的情况下进行后备。
正如您可以想象的那样,如果您找不到可在几乎任何形式上重复使用的现成库,那么您可以编写一个库。
推荐阅读
- c# - 无法在 Listview 虚拟模式中获得我的价值
- typescript - 元素隐含地具有“任何”类型,而类型被显式设置
- html - 在移动设备上使用 bootstrap 4 排序列
- swift - 我可以在指针取消初始化后使用内存吗?
- processing - 当按下非空格键时,如何确保导弹停留在屏幕上?
- java - 为什么 2 个相似的循环代码在 java 中花费不同的时间
- r - 根据另一列的值更改列的值
- c# - CS0051:可访问性不一致
- amazon-web-services - Fargate 任务在没有 aws configure 的情况下不调用 aws 服务
- c# - 一起使用 Mssql Cascade 和 Setnull