Question

我正在开发一个可访问的Wordpress主题，并且已经达到了我无法使用常规表单验证消息的程度。通常我会在字段下方插入验证，以便使用向下箭头键的盲人用户在进入下一个字段之前会收到任何错误消息。

但是现在我被结构强迫，在页面顶部单独出现错误消息。我想避免将用户的焦点放在页面的开头，在那里他将再次收听所有链接。这是一个好计划吗？

<div class="error">
<a href="#" class="assistive-text foci">Error</a>
Your login failed. Please try again.
</div>
<script>
jQuery(document).ready(function($) {
     $('#main').find('.foci').focus();
});
</script>

css与二十二主题（剪辑方法）相同：

.assistive-text {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
  max-width:1em;  /* Chrome */
}

Answer 1

我认为您最好使用strong元素（HTML5 spec）来显示错误消息。它表明了重要性。

也许您想使用WAI-ARIA？例如，请参阅http://webaim.org/techniques/aria/：

aria-live assertive值将导致用户立即或尽快收到内容更改的提醒。 Assertive将用于重要更新，例如错误消息

它还说明了错误消息的重点：

此外，通常需要将焦点设置为页面元素。例如，表单验证错误消息可能使用脚本在页面中显示为文本（不是链接或表单元素）。可视用户可以立即看到错误消息。但是，屏幕阅读器用户可能不知道新消息存在。为了将焦点设置为错误消息以便屏幕阅读器可以读取，消息必须能够获得焦点 - 除非它是链接或表单元素，否则它通常无法做到。

[...]

Answer 2

作为盲人计算机用户，我不介意将焦点移到页面顶部以获取表单验证错误，假设我希望在提交表单时将其带到新页面。根据您的示例，这似乎是一个登录表单，我希望将其带到另一个页面。我可以接受在提交表单后将焦点设置到页面顶部的错误文本。我会觉得很烦人但是如果在点击提交之前填写表单实时验证已经完成了将我移到页面顶部，并导致我失去了我的位置。

Wordpress中的错误消息的可访问性，表单验证

2 个答案: