web-dev-qa-db-ja.com

フォーム要素のラベルが1つ以上あるのは、実際にはWebアクセシビリティのガイドラインに反していますか?

私のページをセクション508およびwcag 2.0 aaaに準拠するよう取り組んでいます。日付テキストボックスのように、ゴースト化されているフィールドがたくさんあります。

彼らはここにあるlabelOverプラグインを使用します: http://remysharp.com/wp-content/uploads/2007/03/label_over_example.html

基本的にはラベルがあり、ボックスが空でフォーカスされていないときに表示され、ボックスにフォーカスすると非表示になります。

ボックスIEの実際のラベルのラベルもあります。「開始日」

これは、Total Validatorツールからの検証チェックに合格しますが、Waveは2つのラベルを持つことはアクセスできないことを検出します。

問題は、スクリーンリーダーなどが2つのラベルを処理できるかどうかです。または、ラベルを使用しない方法を考案する必要がありますか?

5
Patricia

この特定の実装には、いくつかのアクセシビリティの懸念があります。

最初に、このプレースホルダーラベルを非表示にするために否定的な位置を使用しています。このようにネガティブな配置を行うと、画面からテキストが削除されますが、スクリーンリーダーは通常、このようにフォーマットされたテキストを読み続けるため、スクリーンリーダーとスクリーンビューアのプレゼンテーションが異なります。

さらに重要なことに、フォームフィールドに関連付けられている 一般的なスクリーンリーダーは複数のラベルを読み取らない のようです。明らかに、特にJAWSは フィールドに関連付けられている最後のラベルのみ を読み取ります。 HTMLラベルとアクセシビリティ についてもう少し読んでください。

HTML 4 spec は明示的に複数のラベルを許可することに注意することが重要です:

LABEL要素は、コントロールに情報を添付するために使用できます。各LABEL要素は、厳密に1つのフォームコントロールに関連付けられています。

For属性は、ラベルを別のコントロールに明示的に関連付けます。for属性の値は、関連付けられたコントロール要素のid属性の値と同じである必要があります。 for属性を使用して複数の参照を作成することにより、複数のLABELを同じコントロールに関連付けることができます。

JAWSと1つのラベルのみを読み取る関連するスクリーンリーダーは不正な動作であるため、検証エラーの原因にはなりません isは有効です。同じように、多くのスクリーンリーダーユーザーは1つのラベルしか聞こえず、悪いことに、最初のラベルが聞こえたり、最後のラベルが聞こえたりすることもあります 456ereastreet.com

Apple VoiceOverは、フォームコントロールに関連付けられた複数のラベル要素を認識せず、ドキュメントのソース順で最初に来るラベルのみを読み取ります。 JAWSとWindow-Eyesはどちらも反対のことを行い、入力フィールドがフォーカスを取得したときに最後のラベルのみを読み取ります。

補足として、HTML5は、アクセシビリティーと一致し、label要素を置き換えない入力フィールドにplaceholder属性を提供しますが、HTML5をサポートしていないブラウザーのユーザーには、JavaScriptフォールバックがおそらく必要です。

7
Ben Brocka