据我了解,不建议在元素中添加重复的 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
。不想冗余是很高兴的,但至少冗余不会对您造成任何伤害。这只是多余的代码或您必须要做的输入。