Design Pattern
フォーム入力（テキスト+エラー）
テキスト入力フィールドは、ウェブフォームの最も基本的な構成要素です。ラベル、ヘルプテキスト、バリデーション、エラー表示を正しく実装することで、すべてのユーザーが迷わず入力できるフォームを作れます。
いつ使う / 使わない
使うべきとき
- ユーザーから自由形式のテキスト入力を受け取る場合
- 名前、メールアドレス、パスワード、検索キーワードなどの入力
- 入力値のバリデーションとフィードバックが必要な場合
使わないべきとき
- 選択肢が限定されている場合 → select 要素やラジオボタンを使う
- 長文の入力が必要な場合 → textarea 要素を使う
- 日付や数値など型が決まっている場合 → 専用の input type を使う
構造（Anatomy）
1 ラベル（入力内容の説明 + 必須マーク）
2 入力フィールド（テキスト入力欄）
3 ヘルプテキスト（入力のヒントや補足情報）
4 エラーメッセージ（バリデーション失敗時に表示）
- ラベル — 入力内容を説明。label 要素で for 属性を使って関連付け
- 入力フィールド — input 要素。type で入力種別を指定
- ヘルプテキスト — 入力のヒントや補足情報。aria-describedby で関連付け
- エラーメッセージ — バリデーション失敗時に表示。ARIA の alert ロールでスクリーンリーダーに通知
HTML 構造
重要なポイント
- label で入力欄と明示的に関連付ける（placeholder はラベルの代替にならない）
- required 属性で必須を宣言し、視覚的な「*」は aria-hidden 属性でスクリーンリーダーから隠す
- aria-describedby でヘルプテキストとエラーメッセージの両方を関連付ける
- エラー時に aria-invalid を true に設定し、エラーメッセージを alert ロールで通知する
CSS 実装
状態別のスタイル設計
- デフォルト — 薄いボーダーで入力可能であることを示す
- フォーカス — :focus-visible でキーボードフォーカス時のみリングを表示
- エラー — aria-invalid 属性セレクターで赤ボーダーに変更
- 無効 — 背景色を変えて操作不可であることを視覚的に表現
アクセシビリティ
WCAG 1.3.1 情報及び関係性
ラベルと入力欄の関係をプログラム的に関連付ける。視覚的な配置だけに頼らない。
WCAG 3.3.1 エラーの特定
入力エラーが自動検出された場合、エラーの箇所を特定し、テキストでユーザーに説明する。
WCAG 3.3.2 ラベル又は説明
ユーザー入力が必要な場合、ラベルまたは説明文を提供する。placeholder だけでは不十分。
WCAG 3.3.3 エラー修正の提案
エラーが検出された場合、修正方法を提案する。
キーボード操作
- Tab で入力欄にフォーカス移動
- 入力後 Tab でフォーカスが離れた時にバリデーション実行
- Enter でフォーム送信
ライブデモ
基本入力
ラベル+入力+ヘルプテキストのシンプルな構成。
バリデーション
リアルタイムエラー表示。フォーカスが離れた時にバリデーション実行。
NG / OK 比較
ラベルなし vs ラベルありの比較。placeholder だけでは不十分。
よくある間違い
placeholder をラベルの代わりにする
placeholder は入力開始と同時に消えるため、ユーザーが何を入力すべきか忘れてしまう。
エラーを色だけで伝える
赤いボーダーだけではエラーの内容が分からない。テキストのエラーメッセージを必ず表示する。
aria-invalid を設定しない
視覚的にエラー表示していても、aria-invalid が設定されていないとスクリーンリーダーがエラー状態を認識できない。
エラーメッセージが曖昧
「入力エラーです」ではなく具体的な修正方法を提示する。