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

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与twentyeleven主题(clip方法)相同：

.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

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

Answer 2

我认为最好使用strong元素(HTML5 spec)来显示错误消息。这表明了它的重要性。

也许你想用WAI-ARIA？例如，请参见http://webaim.org/techniques/aria/

如果

的aria-live值为assertive，则会立即或尽快向用户发出内容更改警报。Assertive将用于重要的更新，例如错误消息

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

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

…