1

我正在开发一个可访问的 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 与 211 主题相同（剪辑方法）：

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

2 回答 2

2

我认为您最好将strong元素（HTML5 规范）用于错误消息。它表明了重要性。

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

的aria-live值assertive将导致用户立即或尽快收到有关内容更改的警报。断言将用于重要更新，例如错误消息

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

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

[…]

于 2012-08-17T14:38:20.610 回答
1

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

于 2012-08-17T12:36:53.550 回答