Question

我试图在必要时使用aria标签访问网页。

当用户按下Submit时，我正在使用jQuery验证字段并将可视属性设置为任何无效字段，并将aria-invalid标记设置为true。

这一切都可行，但是建议向视障（VI）用户通知该表格无效的建议方法是什么？我并不是真的想显示警报，因此目前，从视觉上看，它是无效的，并且设置了aria标签，但是除非用户随后跳回到无效字段，否则他/她将不知道什么是错误的。

Answer 1

您在字段上设置了哪种视觉属性？只是给他们一个红色的轮廓？这对于视觉用户来说足够了吗？您没有显示与该字段关联的错误消息吗？

我希望能看到某种错误消息，告诉我该字段出了什么问题，以便我知道如何纠正它。

设置aria-invalid是一个很好的开始，并且询问您如何通知屏幕阅读器用户该字段无效也很好。如果您未不显示任何错误消息，则您可能应该在aria-live区域内看到视觉上隐藏的（*）错误消息，并且该消息将用于向屏幕阅读器用户发布该消息。

（*）对于视觉上隐藏的文本，请在“仅sr”类上进行Google搜索，或查看What is sr-only in Bootstrap 3?

<input aria-invalid="true">
<span id="myerror" aria-live="polite" class="sr-only"></span>

当您验证该字段并发现错误时，请将新文本插入“ myerror” <span>中，屏幕阅读器会宣布该错误。

但是，如前所述，通常以可视方式显示错误消息。如果要这样做，则可以使用相同的<span aria-live="polite">，但不要使用“仅sr”类，这样每个人都可以看到错误消息。然后使用aria-describedby将错误与<input>关联。

<input aria-invalid="true" aria-describedby="myerror">
<span id="myerror" aria-live="polite"></span>

看看WCAG success criteria 3.3.1 - Error Identification。其中包含一些有关如何处理错误的提示。