8. マイページの複数フォームでラベル関連付け・aria属性・入力補助属性が未整備

項目	内容
カテゴリー	フォーム
対象	マイページ
セグメント	既存会員
重要度	高
対応コスト	中

課題の概要

マイページの主要フォーム（会員情報編集、弁護士相談、慶弔見舞金申請）において、入力項目のラベル関連付け（labelとinputの正しい紐付け）、aria属性によるエラー通知の機械可読化、autocomplete・inputmodeといったブラウザ側の入力補助属性が、いずれもほとんど設定されていません。スクリーンリーダーで読み上げられない、モバイル端末で入力モードが最適化されない、ブラウザの自動入力が機能しないといった問題が複数のフォームで発生しており、会員向けサービスの基本的な使いやすさを損なっています。

根拠

• /profile（会員情報編集）：可視入力欄38個のうち27個でラベル関連付けがなく、id属性が付与されているのは1要素のみです
• /keicho/form（慶弔見舞金申請）：可視2個ともラベル関連付けがありません（/lawyerの弁護士相談はラベルラップで関連付け済みです）
• 3フォーム共通：aria-required・aria-invalid・aria-describedbyは0件、autocomplete・inputmode属性も0件です
• 必須項目の指定はHTML5標準のrequiredのみで、スクリーンリーダーに「必須項目です」と伝わる機械可読の仕組みになっていません

影響

会員サービスの中核機能であるフォーム群が、視覚に依存せずに利用する閲覧者やモバイル端末の利用者にとって使いにくい状態になっています。スクリーンリーダー利用者は各入力欄が何を求めているのか正確に把握できず、エラーが発生してもどこで何が間違っているのか機械的に通知されません。モバイル端末では電話番号の入力時に数字キーボードが出ない、メールアドレス欄で自動入力が効かないといった問題が発生しています。文字どおり「会員のためのページ」が、一部の会員にとって実質的に利用困難な状態です。

改善の方向性

全フォームの入力欄に対してlabelとinputの関連付け（idとfor属性、またはラベルラップ）を施します。必須項目にはaria-required、エラー時にはaria-invalidとaria-describedbyを付与し、エラーメッセージとの紐付けを機械可読にします。電話番号欄にはinputmode="tel"、メールアドレス欄にはautocomplete="email"など、用途に応じた属性を追加します。マイページ全体のフォーム実装ガイドラインを定め、今後新設するフォームでも同じ品質が担保される運用に整えます。