フォームアクセシビリティチェックリスト・監査ガイド

フォームアクセシビリティ監査

フォームはウェブサイト上で最も重要なインタラクティブ要素の一つです。フォームアクセシビリティが不十分だと、ユーザーは購入の完了、申請の提出、アカウントの作成、その他の重要なタスクを実行できなくなります。

関連するWCAG基準

基準	レベル	名前
1.3.1	A	情報と関係性
1.3.5	AA	入力目的の識別
2.4.6	AA	見出しとラベル
3.3.1	A	エラーの識別
3.3.2	A	ラベルまたは説明
3.3.3	AA	エラー提案
3.3.4	AA	エラー防止
4.1.2	A	名前、役割、値

ラベル監査チェックリスト

すべてのフォームフィールドについて確認：

1. 可視の <label> 要素が for/id またはラッピングで関連付けられている
2. ラベルテキストが期待される入力を明確に説明している
3. 必須フィールドが示されている（色のみではなく）
4. 入力フォーマットのヒントが提供されている（例：「YYYY/MM/DD」）
5. 関連フィールドにグループラベル（<fieldset> + <legend>）が使用されている

エラー処理監査

無効なデータでフォームを送信し確認：

1. エラーメッセージがテキストで表示される（色の変更だけではない）
2. 各エラーが特定のフィールドを識別する
3. エラーに修正の提案が含まれる
4. 最初のエラーまたはエラーサマリーにフォーカスが移動する
5. エラーメッセージがスクリーンリーダーに通知される（aria-liveまたはrole="alert"）

入力目的（autocomplete）

個人データフィールドについて、autocomplete 属性を確認：

• 氏名に autocomplete="name"
• メールアドレスに autocomplete="email"
• 電話番号に autocomplete="tel"
• 住所に autocomplete="street-address"
• 郵便番号に autocomplete="postal-code"

キーボード操作

• タブ順序がフォーム内の視覚的レイアウトに従う
• すべてのフィールドがキーボードで到達可能
• カスタムセレクト/コンボボックスウィジェットが矢印キーナビゲーションをサポート
• 任意のフィールドからEnterで送信可能