HTML5表单验证真的可以访问吗? [英] Is HTML5 form validation truly accessible?

问题描述

所以我读了很多文章，说HTML 5表单验证是可以访问的( required 属性，该属性将阻止提交表单，而字段是空白)，但是当我进行测试时我在Chrome上的NVDA和Android上的BackTalk上的表单，如果我没有填写输入内容，它将集中回到输入字段(这很好！)，但是两个屏幕阅读器都宣布请填写此字段"，这对用户，因为他们不会宣布该字段的标签.

So I read a lot of articles that say that HTML 5 form validation is accessible (things required attribute which will prevent the form from being submitted is a field is left blank), yet when I tested my form on NVDA on Chrome and BackTalk on Android, if I hadn't filled in the input, it focuses back to the input field (which is good!) but both screen readers announce "Please fill in this field" which is useless to the user, since they don't announce the label of the field.

因此无法单独访问HTML5验证吗?另外，您可以结合使用HTML5验证和自定义JS吗?

So HTML5 validation alone isn't accessible? Also, can you combine HTML5 validation and custom JS?

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

Do you have to write custom client site validation in order to make forms accessible?

推荐答案

简短回答

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

如果您需要支持Internet Explorer 9或更低版本，则需要使用JavaScript(根据 WebAim调查-浏览器"部分仍覆盖了屏幕阅读器用户的3.6％.

If you need to support Internet Explorer 9 or below then you will need to use JavaScript (which according to WebAim survey - section "Browsers" still covers around 3.6% of screen reader users).

原生HTML5验证是一个很好的起点，但是有局限性(您在注释中给了一个，一些屏幕阅读器(NVDA)不会再次宣布该标签，这意味着用户必须亲自要求该标签为通过控件读取).

Native HTML5 validation is a very good starting point, but there are limitations (you gave one in a comment, some screen readers (NVDA) do not announce the label again, meaning a user has to physically ask for the label to be read via controls).

另一件事是，一旦您离开一个字段，通常不会告诉您您在提交表单之前犯了一个错误(这是要这样做的，但这并不总是这种情况，具体取决于您的宣布速度，设置和浏览器).

The other thing is that once you leave a field it doesn't normally tell you you have made a mistake until you have submitted the form (it is meant to but this is not always the case depending on your announce speed, settings and browser).

例如更新 aria-invalid 对于立即反馈很有用(并提供对较旧浏览器的支持，同时对不寻常"的屏幕阅读器更强大).

For example updating aria-invalid is useful for immediate feedback (and provides support for older browsers, while being more robust with 'unusual' screen readers).

使用 aria-live 区域提供即时反馈 onblur (或抑制/去抖动)也是有用的，也是一种更好的解决方案.

Using an aria-live region to provide immediate feedback onblur (or throttled / debounced) is also useful and a better solution.

另一件事是，本机验证实际上并不十分有效.例如，fff @ fff显示为有效电子邮件，并将允许表单在 type ="email" 字段上提交，与 type ="url" 相同将允许(至少在Chrome中)提交 https://fff .

One other thing is that the native validation is not actually very effective. For example fff@fff shows as a valid email and will allow a form to submit on a type="email" field, same with type="url" it will allow https://fff to be submitted (in Chrome at least).

我可以继续进行其他事情，例如提供有关如何更正错误的更好的说明(尤其是电话号码之类的问题)，但是您明白了.

I could go on with other things such as providing better instructions on how to fix errors (especially for things like phone numbers) but you get the idea.

基本上，使用尽可能多的HTML5本机功能来为扎实的JavaScript错误和不使用JavaScript的用户提供扎实的基础和良好的备用.然后使用CSS和JS改善每个人的体验.

Basically, use as many native HTML5 features as possible to give a solid grounding and a good fallback for JavaScript errors / people not using JavaScript. Then use CSS and JS to improve the experience for everyone.

还可以将HTML5验证与自定义JS相结合吗?

Also, can you combine HTML5 validation and custom JS?

您可以并且应该注意，但是最终您将使验证加倍(这对我来说是一个不错的选择，不是一件坏事).

You can and you should but be aware that you end up doubling up validation (which isn't a bad thing as I stated for fallback).

好处是您可以在JavaScript中使用伪选择器按类型定位字段，从而省去了添加不必要类的需要.

The beauty is you can use pseudo selectors in your JavaScript to target fields by type, saving the need for adding unnecessary classes etc.

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

e.g. document.querySelectorAll('input[type=email]') could be used to select any email input for validation or document.querySelectorAll('input[required]') to find all required fields.

您还可以在滑块/数字输入上使用类似 max ="100" 之类的东西来实时"设置您的验证范围，并且仍然具有不支持JavaScript的后备功能.

You can also use things like max="100" on slider / numeric inputs to set your validation ranges 'on the fly' and still have a fallback for no JavaScript.

您可以想象，如果找不到找不到可以在任何形式上重用的现成产品，那么就可以编写一个库.

As you can imagine this let's you write a library if you can't find an off the shelf one that is reusable on nearly any form.

这篇关于HTML5表单验证真的可以访问吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！