web-dev-qa-db-ja.com

ラベルをinput要素の前または後に配置する必要がありますか？

スクリーンリーダーを使用している視覚障害のあるユーザーにとって、入力コントロールのラベルを入力の前または後に配置することは重要ですか？

たとえば、次の間に（スクリーンリーダーに関する限り）違いはありますか？

<label for="name">Name:</label>
<input id="name" />

そして

<input id="name" />
<label for="name">Name:</label>

私は通常、最初の方法を実行するWeb開発者ですが、新しい効果によっては、入力の後にラベルを付ける必要があります。スクリーンリーダーの動作がわからない-入力に到達したときのラベルの位置に関係なく、入力のラベルを読みますか？ここにフォーム要素があることを説明しますか？それからラベルを読みますか？

代替ディスプレイを処理するとき、入力コントロールのラベルが入力の前または後に配置されるかどうかは重要であり、そうである場合、どちらにする必要がありますか？

formsaccessibilityhtmllabels
6
Richard Parnaby-King

両方の要素に正しいID（一意の名前、1セットの入力/ラベルでのみ使用）を含める場合、要素の順序は重要ではありません。または、ariaを使用して、次のように入力を記述することもできます。

<input aria-labelledby='id-of-my-label-located-elsewhere'>

9
maia

ラベルの位置（ラベルが入力の前後どちらにあるか）を決定する際に順序は重要ですが、idとforのIDが同じである限り、コードでは問題になりません。 -入力とラベルは引き続きリンクされます-この例を参照してください fiddle 。

または、<input>を<label>内にラップすることもできます。

<!-- nested, text before input -->
<label>Phone: <input id="phone" /></label>

<!-- nested, text after input -->
<label><input id="employed" type="checkbox" /> Employed?</label>
1
SNag