フォーム

サンプル

デザイン上の考慮事項

プレースホルダーは必要かどうか検討してください
参考：プレースホルダーについて考える | Accessible & Usable
「必須」や「エラー」を色のみで伝えず、テキストでも伝えていることを確認してください（達成基準 1.4.1 色の使用 (レベル A)）
プレースホルダーや無効状態のテキストでも、4.5:1以上のコントラスト比が保たれていることを確認してください（達成基準 1.4.3 コントラスト (最低限) (レベル AA)）

実装上の考慮事項

input要素に対して、適切なtype属性、autocomplete属性、inputmode属性、pattern属性、を指定します。
input要素のid属性とlabel要素のfor属性を正しく紐づけてください。
- チェックボックスやラジオボタンの場合、label要素の中にinput要素を含めて紐付ける方法もありますが、input要素の状態によってlabel要素のスタイルを変更する都合上、隣接した構造とします。
セレクトボックスがプレースホルダー状態のときにスタイルを当てる場合、JSが必要です。

アクセシビリティ上の考慮事項

「必須」や「エラー」を色のみで伝えず、テキストでも伝えていることを確認してください（達成基準 1.4.1 色の使用 (レベル A)）
プレースホルダーでも4.5:1以上のコントラスト比が保たれていることを確認してください（達成基準 1.4.3 コントラスト (最低限) (レベル AA)）
- ただし、無効状態のボタン等は対象外です。
キーボードでも操作できることを確認してください（達成基準 2.1.1 キーボード (レベル A)）。
フォーカスインジケータが正しく表示されることを確認してください（達成基準 2.4.7 フォーカスの可視化 (レベル AA)）。（特にoverflow: hidden;を使用している場合、フォーカスインジケータが隠れてしまうことがあります）
エラーが説明されていることを確認してください（達成基準 3.3.1 エラーの特定 (レベル A)）。
入力欄に対してラベル・説明文が提供されていることを確認してください（達成基準 3.3.2 ラベル又は説明 (レベル A)）。
エラーの修正が提案できる場合は、提示してください（達成基準 3.3.3 エラー修正の提案: (レベル AA)）。
取り消しができるか、データがチェックされるか、確認・修正ができるべきです（達成基準 3.3.4 誤り防止 (法的、金融、データ) (レベル AA)、達成基準 3.3.6 誤り防止 (すべて) (レベル AAA)）。
入力欄に対してラベル・説明文が構造上関連付けられていることを確認してください（達成基準 1.3.1 情報及び関係性 (レベル A)）。
ヘルプが提供できる場合は提供してください（達成基準 3.3.5 ヘルプ (レベル AAA)）。
スクリーンリーダーで、入力欄の名前が伝わることを確認してください
（達成基準 4.1.2 名前 (name)・役割 (role) 及び値 (value) (レベル A)）。
エラーが発生したときに、フォーカスを移動させなくてもスクリーンリーダーに伝わることを確認してください
（達成基準 4.1.3 ステータスメッセージ (レベル AA)）。