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は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 */
}
4

2 に答える 2

2

エラーメッセージにはstrong要素 ( HTML5 spec ) を使用した方がよいと思います。重要性を示しています。

多分あなたはWAI-ARIAを使いたいですか？たとえば、http : //webaim.org/techniques/aria/ を参照してください。

aria-live値を指定するassertiveと、コンテンツの変更がすぐに、またはできるだけ早くユーザーに通知されます。アサーティブは、エラー メッセージなどの重要な更新に使用されます。

また、エラー メッセージのフォーカスについても次のように述べています。

さらに、多くの場合、ページ要素にフォーカスを設定する必要があります。たとえば、フォーム検証エラー メッセージは、スクリプトを使用してページ内に (リンクまたはフォーム要素ではなく) テキストとして表示される場合があります。ビジュアル ユーザーは、すぐにエラー メッセージを確認できます。ただし、スクリーン リーダーのユーザーは、新しいメッセージが存在することを知らない場合があります。スクリーン リーダーで読み取れるようにエラー メッセージにフォーカスを設定するには、メッセージがフォーカスを受け取ることができる必要があります。これは、リンクまたはフォーム要素でない限り、通常はできないことです。

[…]

于 2012-08-17T14:38:20.610 に答える
1

目の不自由なコンピューター ユーザーとして、フォームの送信時に新しいページに移動することを期待していると仮定して、フォームの検証エラーのためにフォーカスがページの上部に移動されることを気にしません。あなたの例に基づいて、これはログインフォームであり、別のページに移動すると思われます。フォームを送信した後、ページの上部にあるエラー テキストにフォーカスを設定することは、私には受け入れられます。送信を押す前にフォームに記入している間にリアルタイムの検証が行われ、ページの一番上に移動して自分の場所を失った場合、私は面倒だと思います.

于 2012-08-17T12:36:53.550 に答える