はじめに
超シンプルなテキストボックスを用意しました！
こちらは以下のようなコードでも実現できます。が、下のサンプルコードは悪い例です。
// ex1
<div>
<div class="hoge">名前</div>
<input type="text" />
</div>
// ex2
<div>
<label class="password">パスワード</label>
<input type="password" id="password" />
</div>
このコードのどこが問題か分かりますか？
また、labelタグとinputがセットで使われる場面はよく見ると思いますが、それはなぜかは説明できますか？この記事ではその理由について、解説します！
理由
早速ですが、結論から。
フォームを作成する際に、labelタグとinputタグをセットで使用するのには、大きく三つの理由があります。
-
操作性の向上:
ラベルをクリックしたときに、自動で入力欄にフォーカスできる。 -
アクセシビリティの向上:
スクリーンリーダーなどが「この入力欄はこのラベル」という対応を正しく読み上げられる。 -
保守性の向上:
コード上で「どのテキストがどの入力欄を指すのか」が明確になり、後から見ても分かりやすい。
divタグを使っても見た目上は変わらないですが、labelを使うことで操作性が格段に向上します。
以上の観点から、labelタグとinputタグはセットで適切に使いましょう！
上記のコードの問題点を解説する
上記の説明を踏まえた上で、 badコードを改めてみていきます。
// 問題点1: 「名前」の文字が単なるdivタグなので、ラベルの機能を果たしていない。
// 文字をクリックしてもフォーカスは移動しないし、スクリーンリーダーにも「これは何の入力欄か」が伝わらいコードになっている。
<div>
<div class="hoge">名前</div>
<input type="text" />
</div>
// 問題点2:
// label タグは使っているものの、htmlFor="password" が指定されていない。そのため実質「パスワード」という文字と <input> が紐づいていない状態になっている。
<div>
<label class="password">パスワード</label>
<input type="password" id="password" />
</div>
修正例は以下のとおりです！
label, input, htmlFor(for)を適切に使いましょう。
修正例
<div>
<label className="name" htmlFor="name">
名前
</label>
<input type="text" id="name" />
</div>
<div>
<label className="password" htmlFor="password">
パスワード
</label>
<input type="password" id="password" />
</div>
まとめ
[用法]
- label タグと input タグはセットで使う
- label の htmlFor 属性と input の id 属性を一致させる
[効果]
- アクセシビリティ・操作性向上のために必須
- ラベルをクリックして入力欄にフォーカスを当てることができる
- スクリーンリーダーが「ラベル → 入力欄」の対応関係を正しく読み上げることができる