Accessibility
フォームラベルと名前を正しく付ける
ラベルはフォームの説明だけではありません。ボタン、検索欄、アイコン、埋め込み要素が何をするかを、DOM上でも理解できる状態にします。
ui.design: labelui.design: button-nameui.design: link-nameui.design: frame-title
まず確認する症状
- placeholderだけで入力欄の意味を示している。
- アイコンボタンやiframeに読み取れる名前がない。
- 自動検査で同じ種類の所見が複数箇所に出ているのに、原因がコンポーネント単位で整理されていない。
- 見える状態だけ整っており、名前、役割、順序、代替テキスト、拡大時の状態が検証されていない。
なぜ問題か
- 支援技術は見た目の近接関係だけでは目的を判断できません。
- ラベル不足はフォーム完了率にも影響し、エラー時の復帰を難しくします。
- アクセシビリティ修正は個別箇所の穴埋めではなく、再利用コンポーネントと入力・ナビゲーションの契約を直す作業です。
- WCAGの達成基準に対応する根拠を残すと、人間レビュー、AI修正、再スキャンの判断が揃いやすくなります。
診断で見る指標
labelとinputの関連
aria-labelの妥当性
button/link name
エラーメッセージの関連
該当WCAG達成基準
再利用コンポーネントでの再発有無
キーボードだけでの完了可否
スクリーンリーダーが読む名前と状態
label/input関連
accessible name
aria-describedby
エラー関連付け
iframe title
修正方法
最小修正
見えるlabelを追加する
入力欄にはlabel要素を使い、placeholderに依存しないようにします。
推奨修正
補足とエラーを関連付ける
aria-describedbyなどで説明文やエラーを入力欄に接続します。
さらに改善
アイコンボタンの命名規則を作る
検索、閉じる、開く、削除などの操作名をコンポーネントで必須化します。
受け入れ条件
- 01PCとスマホの両方で目視確認し、主なCTAまたは操作対象が迷わず見つかる。
- 02キーボード操作、読み上げ補助、または自動検査で再発しやすい項目を確認する。
- 03修正後にui.designで再スキャンし、同じ所見が残る場合は原因を分解する。
- 04該当所見が単発修正か共通コンポーネント由来かを分け、再発しやすい原因を修正している。
- 05自動検査だけでなく、キーボード操作、拡大表示、読み上げ名、スマホ操作のうち該当する観点を確認している。
- 06入力欄、ボタン、リンク、iframeに、見た目と矛盾しない機械可読名がある。
- 07補足説明やエラーは、対象の入力欄にaria-describedbyなどで関連付けられている。
コーディングエージェント向け修正指示
目的: 入力欄、アイコンボタン、リンク、iframeに機械が読める名前を付けてください。placeholderだけの説明を避け、補足やエラーは入力欄に関連付けてください。 追加確認: aria-labelを足す前に、見えるlabelやボタン文言で解決できるかを確認し、見た目と読み上げ名を一致させてください。
参考資料
よくある失敗
- aria-labelを見た目の文言と矛盾させる。
- 見た目だけを整え、見出し、リンク、フォームラベルなどの意味構造を直さない。
- 1つの指摘だけを直し、同じ原因から出た別画面の再発を確認しない。
- ariaを追加して見た目と機械可読名を矛盾させる。
- 自動検査の消滅だけを完了条件にし、実際に操作できるかを確認しない。