据我了解,不建议在元素中添加重复的 Angular 色:

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

这是多余的,因为nav告诉屏幕阅读器内容的语义已经是什么。到现在为止还挺好。

现在,我要使表单字段无效。我了解古典我应该改变这一点:
<input type="text" name="username">

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

…提交表单后。

但是,我们正在使用JavaScript和HTML5 constraint validation API在将输入发送到API之前检查输入。是的,再次在服务器端测试了输入。

因此,假设我使该字段无效:
input.setCustomValidity('This value is invalid');

我还需要在输入中添加aria-invalid="true"吗?

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

最佳答案

aria-invalid 向屏幕阅读器提示该字段错误。当屏幕阅读器用户在<input>字段中切换时,如果该字段无效,则会通知他们。

也应结合使用aria-invalid和将错误消息与该字段相关联(通过 aria-describedby )。如果您在该字段下显示错误而未将该错误与该字段相关联,则屏幕阅读器用户将不知道该错误。如果您单独使用aria-invalid,则用户将不知道为何字段错误。

所以你应该有这样的东西:

<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>)的引用。

使用验证api可以设置伪类(例如:invalid),但是屏幕阅读器(通常为(*))不了解CSS,也不关心伪类。

((*)唯一的异常(exception)是:before/:after,可以在可访问名称计算中使用它,如https://www.w3.org/TR/accname-1.1/#step2的步骤2.F.ii中所述)。

但是,除了设置了伪类:invalid外,还设置了obj.validity.valid。因此,如果设置了该属性,是否还需要使用aria-invalid?或以另一种方式询问,屏幕阅读器是否了解validity.valid属性?

我找不到任何与屏幕阅读器有关的文档引用,但是从测试中,将Firefox和chrome surface validity.valid都发送到屏幕阅读器(JAWS和NVDA),因此他们宣布该字段无效。但是Internet Explorer(我在Win7上没有Edge)和iOS上的Safari(我没有Mac可以测试)都可以而不是来显示错误的字段。

因此,为了覆盖您的所有基础,我建议您设置aria-invalid。不想冗余是很高兴的,但至少冗余不会对您造成任何伤害。这只是多余的代码或您必须要做的输入。

10-05 20:30
查看更多