当我使用 HTML5 约束验证 API 使字段无效时，是否必须使用 aria-invalid？

据我了解，不建议向元素添加重复的角色：

<nav role="navigation"></nav>

这是多余的，因为nav告诉屏幕阅读器内容的语义已经是什么。到目前为止，一切都很好。

现在我想要使表单字段无效。我明白经典我应该改变这个：

<input type="text" name="username">

… into

<input type="text" name="username" aria-invalid="true">

...表单提交后。

然而，我们正在使用 JavaScript 和HTML5 约束验证 API https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation#Validating_forms_using_JavaScript在将输入发送到 API 之前检查输入。是的，输入再次在服务器端进行测试。

所以，假设我使该字段无效：

input.setCustomValidity('This value is invalid');

我还需要添加吗aria-invalid="true"到输入？

我会说不，因为它对于引擎已经知道的来说是多余的。但我找不到任何明确描述这种情况的来源。

aria-invalid https://www.w3.org/TR/wai-aria/#aria-invalid向屏幕阅读器提示该字段有错误。作为屏幕阅读器用户，用户可以通过选项卡浏览<input>字段，如果该字段无效，他们将收到通知。

Using aria-invalid也应该与将错误消息与字段关联起来使用（通过aria-describedby https://www.w3.org/TR/wai-aria/#aria-describedby）。如果您在字段下方显示错误，但未将该错误与该字段关联，则屏幕阅读器用户将不会知道该错误。如果你使用aria-invalid就其本身而言，用户不会知道why该字段有错误。

所以你应该有类似的东西：

<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>

Update:经过进一步澄清后，我看到OP现在要求什么，以及不使用重复信息的参考，例如<nav role="navigation>.

通过验证 api，伪类（例如:invalid）已设置，但屏幕阅读器通常(*)，不了解或不关心 CSS，也不了解伪类。

((*)唯一的例外是:before/:after，可用于可访问名称计算，如步骤中所述2.F.ii of https://www.w3.org/TR/accname-1.1/#step2 https://www.w3.org/TR/accname-1.1/#step2).

然而，除了伪类:invalid正在设定中，obj.validity.valid也被设定。那么如果设置了该属性，是否还需要使用aria-invalid？或者换个方式问，屏幕阅读器知道validity.valid属性？

我找不到任何有关屏幕阅读器的文档参考，但从测试来看，Firefox 和 Chrome Surfacevalidity.valid到屏幕阅读器（JAWS 和 NVDA），以便他们宣布该字段无效。但是 Internet Explorer（我使用的是 Win7，所以没有 Edge）和 iOS 上的 Safari（我没有 Mac 来测试）可以not表面错误的字段。

因此，为了覆盖您的所有基础，我建议设置aria-invalid。不想冗余固然很好，但至少冗余不会有什么坏处。这只是您必须做的额外代码或输入。