form-labelling

フォームのラベル付け

すべてのフォームフィールドには、常に表示され、入力欄とプログラム上で関連付けられたラベルが必要です。これはウェブ上で最もよくあるアクセシビリティ上の問題であり、最も簡単に修正できます。

基本ルール

すべての入力欄に表示ラベルを付ける

• 要素を使い、for/idで関連付けます
• ラベルは常に表示されている必要があります。フォーカス時に消えるプレースホルダーテキストだけにしないでください
• ラベルは入力欄の上に配置します（最もアクセシブルで、内容を把握しやすい配置です）
• プレースホルダーテキストを唯一のラベルとして使わないでください。入力を始めると消えてしまいます

入力する内容がわかるラベルにする

• 良い例：「メールアドレス」
• 悪い例：「ここに情報を入力してください」
• 良い例：「生年月日（DD/MM/YYYY）」
• 悪い例：「日付」
• 形式のヒントはプレースホルダーだけでなく、ラベルまたはヘルプテキストに含めます

必須フィールドを明確にする

• 「必須」または * などの可視テキストで必須フィールドを示します
• • を使う場合は、フォームの先頭で「* = 必須」と説明します
• プログラム上で示すには aria-required="true" を使います
• より良い方法は、設計上ほとんどのフィールドを必須にし、任意の項目に「会社名（任意）」のような印を付けることです

グループ化のパターン

関連するフィールドにはフィールドセットを使う

• 関連するフィールドを と でグループ化します
• ラジオボタン：必ずフィールドセットでグループ化します
  • 凡例：「希望する連絡方法」
  • 選択肢：メール、電話、テキストメッセージ
• チェックボックス：同じ質問に対する選択肢であればグループ化します
  • 凡例：「興味のある分野を選んでください」
  • 選択肢：デザイン、エンジニアリング、プロダクト
• 住所フィールド：「配送先住所」または「請求先住所」の下にまとめます

複数のフォームがある場合

• 各フォームセクションに見出しまたは凡例を付けます
• セクションは視覚的にも構造的にも区別します
• 進行状況インジケーターがあると、ユーザーは現在の位置を把握しやすくなります

説明のパターン

ヘルプテキスト

• ラベルと入力欄の間にヘルプテキストを配置します
• aria-describedby で関連付け、スクリーンリーダーが読み上げるようにします
• 良い例：「8文字以上で、数字を1つ含めてください」
• 説明は簡潔にし、1文にまとめます

エラーの関連付け

• エラーメッセージは、プログラム上でフィールドに関連付ける必要があります （aria-describedby または aria-errormessage）
• エラーテキストはフィールドのすぐ下に配置し、離れた場所のバナーに表示しないでください
• エラーにはフィールドのラベルを含めます：「メールアドレス：有効なメールアドレスを入力してください」

よくある間違い

• ラベルとしてのプレースホルダー：入力すると消え、多くのスクリーンリーダーでは認識できません
• アイコンだけのラベル：「検索」というテキストのない虫眼鏡アイコン
• 入力欄から離れたラベル：空間的に離れていると、視覚的な関連性が損なわれます
• 変化するラベル：入力状態に応じてラベルテキストを変えないでください
• ラベルのないボタン：すべてのボタンに可視テキストまたは aria-label が必要です

評価チェックリスト

• すべての入力欄に、for/idで関連付けられた表示可能な がある
• プレースホルダーだけのラベルがない
• 必須フィールドが視覚的にもプログラム上でも示されている
• 関連するフィールドが fieldset/legend でグループ化されている
• ヘルプテキストが aria-describedby で関連付けられている
• エラーメッセージが該当するフィールドに関連付けられている
• すべてのボタンに可視テキストのラベルがある