使用HTML5约束验证API使字段无效时，我必须使用aria-invalid吗? [英] Must I use aria-invalid when I invalidate a field using the HTML5 constraint validation API?
问题描述
据我所知，不建议在元素中添加重复的角色:
As I understand it's not recommended to add duplicate roles to an element:
<nav role="navigation"></nav>
这是多余的，因为nav告诉屏幕阅读器内容的语义是什么.到目前为止一切顺利.
This is redundant because nav tells the screen reader what the semantics of content is already. So far so good.
现在，我要使表单字段无效.我了解古典我应该对此进行改造:
Now I want to invalid a form field. I understand that classical I should transform this:
<input type="text" name="username">
…进入
<input type="text" name="username" aria-invalid="true">
…提交表单后.
但是，我们正在使用JavaScript和 HTML5约束验证API 在将输入发送到API之前先对其进行检查.是的，再次在服务器端测试了输入.
However, we are using JavaScript and the HTML5 constraint validation API to check the input before sending it to an API. And yes, the input is again tested on the server side.
因此，假设我使该字段无效:
So, let's say I invalidate the field:
input.setCustomValidity('This value is invalid');
我还需要在输入中添加aria-invalid="true"吗?
我会拒绝，因为这对于引擎已经知道的内容是多余的.但是我找不到任何明确描述这种情况的消息来源.
I'd say no, because it is redundant to what the engine already knows. But I can't find any source describing this scenario explicitly.
推荐答案
aria-invalid 可以向屏幕阅读器提示该字段错误.当屏幕阅读器用户通过<input>字段进行制表时，如果该字段无效，则会收到通知.
aria-invalid is a hint to screen readers that the field is in error. As a screen reader user tabs through the <input> fields, they will be notified if the field is invalid.
也应结合使用aria-invalid和将错误消息与字段相关联(通过 aria-describedby ).如果您在该字段下显示错误而未将该错误与该字段相关联，则屏幕阅读器用户将不知道该错误.如果您单独使用aria-invalid，则用户将不知道为什么该字段有误.
Using aria-invalid should be used in conjunction with associating an error message with the field too (via aria-describedby). If you display an error below the field without associating that error with the field, the screen reader user won't know about it. If you use aria-invalid by itself, the user would not know why the field is in error.
所以您应该有类似的东西:
So you should have something like:
<input type="text" name="username" aria-invalid="true" aria-describedby="errmsg">
<span id="errmsg">The name you entered cannot be found in our system</span>
更新:
经过进一步澄清后，我了解了OP现在的要求，以及关于不使用重复信息(例如<nav role="navigation>)的参考.
Update:
After further clarification, I see what the OP is asking for now, and the reference to not using duplicate information, such as <nav role="navigation>.
使用验证api设置了伪类(例如:invalid)，但是屏幕阅读器(通常(*))不了解CSS，也不关心CSS，也不知道关于伪类的任何事情.
With the validation api, the pseudo classes (such as :invalid) are set, but screen readers, in general (*), do not know or care about CSS and don't know anything about the pseudo classes.
((*)唯一的例外是:before/:after，可以将其用于可访问名称计算，如
((*) The only exception is :before/:after, which can be used in the accessible name calculation as noted in step 2.F.ii of https://www.w3.org/TR/accname-1.1/#step2).
但是，除了设置伪类:invalid外，还设置了obj.validity.valid.因此，如果设置了该属性，是否还需要使用aria-invalid?还是另一种询问方式，屏幕阅读器是否了解validity.valid属性?
However, in addition to the pseudo class :invalid being set, obj.validity.valid is also set. So if that attribute is set, do you also need to use aria-invalid? Or another way to ask, do screen readers know about the validity.valid attribute?
我找不到与屏幕阅读器有关的任何文档参考，但是从测试到Firefox和镀铬表面validity.valid到屏幕阅读器(JAWS和NVDA)，他们宣布该字段无效.但是Internet Explorer(我在Win7上没有Edge)和iOS上的Safari(我没有Mac可以测试)不会不错误地显示该字段.
I couldn't find any documented references pertaining to screen readers, but from testing, both firefox and chrome surface validity.valid to the screen reader (JAWS and NVDA) so they announce the field is invalid. But Internet Explorer (I'm on Win7 so don't have Edge) and Safari on iOS (I don't have a Mac to test) do not surface the field in error.
因此，为了覆盖您的所有据点，我建议设置aria-invalid.不想冗余是很高兴的，但至少冗余不会对您造成任何伤害.这只是多余的代码或您必须要做的输入.
So to cover all your bases, I would recommend setting aria-invalid. It's great that you don't want to be redundant, but at least being redundant doesn't hurt anything. It's just extra code or typing you have to do.
这篇关于使用HTML5约束验证API使字段无效时，我必须使用aria-invalid吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
