フォームのアクセシビリティ向上のためのラベルの使用
メニューを表示するにはスワイプしてください
<label> 要素は、フォーム内の入力フィールドにラベルを関連付けるために使用。ラベルと入力フィールドの関連付けにより、ユーザーが入力欄で求められている情報を理解しやすくなる。ユーザーがラベルをクリックすると、対応する入力フィールドに自動的にフォーカスが移動。
label 要素と input 要素を関連付ける方法は2つ:
ラッピング
<input> の中に <label> をネストすると、ブラウザが自動的に両者を関連付ける。
index.html
「Name」をクリックすると、入力フィールドにフォーカスが移動。
id属性の使用
input要素をlabel内に配置できない場合、手動で関連付けを行う方法:
index.html
ここでは、labelはfor="name"を使用し、inputはid="name"を使用。値が一致することで関連付けが成立。
注記
これらの方法を使用することで、label と input フィールドの間に視覚的およびセマンティックな関連付けを確立。 ただし、スタイリングの制約やウェブサイトのロジックにより、input 要素を label 内にラップできない場合も存在。 そのような場合、属性による関連付けを利用することで、スタイルの適用やバックグラウンドロジックの実装に柔軟性を維持。
画像内のコードを確認しながら、2つのアプローチの違いを検証。
注記
ブラウザの観点では、関連付けを確立するために選択した方法に違いはなく、どちらの方法でもラベルと入力フィールドを結び付け、ユーザビリティとアクセシビリティを向上。
すべて明確でしたか？
フィードバックありがとうございます！
セクション 5. 章 3
AIに質問する
AIに質問する
何でも質問するか、提案された質問の1つを試してチャットを始めてください
セクション 5. 章 3
