インプットボックスのデザイン：labelタグの使用について

基本的なパターン

`label` タグを用いて インプットボックスと関連付けることで、マシンリーダブルにすることができる。これには下記のメリットがある。

• 入力要素へフォーカスする際のヒット領域に、`label` 部を含めることができる
• スクリーンリーダーが入力要素へフォーカスした際に、その要素の内容を説明してくれる

ラベル位置については、入力要素の直上が良いとされる。
横に設置した場合、ビューポートやズーム機能によって見切れる可能性がある。
下に設置した場合、スクリーンキーボードの表示で見切れる可能性がある。

Labelタグを用いていないパターン

この場合、フォームタイトルや説明文を触っても入力要素へフォーカスしない。 また入力要素とその説明の結びつきは、前後関係のみと弱くなっている（`label` タグを用いて結びつけた場合、スクリーンリーダーは 入力要素へフォーカスした際に読み上げてくれる）

回避策： ARIA を使用

タイトルと説明要素にIDを割り振り、入力要素に `aria-describedby` で指定した場合、スクリーンリーダーはフォーカスがあたった際に読み上げてくれる。
※ただし、`label` タグにあったフィールド領域としては扱ってはくれない。

プレースホルダーを使ったパターン

フォームが占める範囲が小さくなるというメリットがあるが、下記の問題が生じる。

• デフォルトのプレースホルダー文はコントラストが低く、基本パターンと比較すると見づらい
• 何かしら入力すると、プレースホルダー文は見えなくなる
• 空白である場合と比較して、入力要素が既に埋まっている と誤認しやすい
• プレースホルダー文が長いと、内容が見切れてしまう

プレースホルダーの使用案： なくても問題ないもので、あると少し便利になる情報に

必要な情報は必ず入力ボックス外で常に表示されるようしておき、プレースホルダーには なくても問題ない情報に留める。
ただしこれも空白であるというアフォーダンスは失われる以上、万能ではない。