Accessibility
小さすぎるタップターゲットを直す
タップターゲットは見た目のボタンサイズだけではなく、実際に押せる領域と隣接要素との距離で決まります。小さいリンク群はまとめて見直します。
ui.design: tap-targets
まず確認する症状
- 小さいテキストリンクが密集している。
- チェックボックスやラジオのラベルを押せない。
- 自動検査で同じ種類の所見が複数箇所に出ているのに、原因がコンポーネント単位で整理されていない。
- 見える状態だけ整っており、名前、役割、順序、代替テキスト、拡大時の状態が検証されていない。
なぜ問題か
- 誤タップはフォーム離脱や購入中断につながります。
- 同じナビやフッターで大量に検出されやすく、採点が不自然に下がる原因にもなります。
- アクセシビリティ修正は個別箇所の穴埋めではなく、再利用コンポーネントと入力・ナビゲーションの契約を直す作業です。
- WCAGの達成基準に対応する根拠を残すと、人間レビュー、AI修正、再スキャンの判断が揃いやすくなります。
診断で見る指標
押せる領域の高さ/幅
隣接ターゲットとの距離
ラベルクリック領域
スマホファーストビュー内の主要操作
該当WCAG達成基準
再利用コンポーネントでの再発有無
キーボードだけでの完了可否
スクリーンリーダーが読む名前と状態
押せる領域の実寸
隣接距離
ラベルクリック
フッター/タグ一覧の密度
修正方法
最小修正
paddingを増やす
リンクやボタンに十分な上下paddingを足し、見た目だけでなくクリック領域を広げます。
推奨修正
密集リンクを再構成する
フッターやタグ一覧は行間、列数、折り返しを調整します。
さらに改善
入力部品をコンポーネント化する
checkbox/radioはラベル全体を押せる実装に統一します。
受け入れ条件
- 01PCとスマホの両方で目視確認し、主なCTAまたは操作対象が迷わず見つかる。
- 02キーボード操作、読み上げ補助、または自動検査で再発しやすい項目を確認する。
- 03修正後にui.designで再スキャンし、同じ所見が残る場合は原因を分解する。
- 04該当所見が単発修正か共通コンポーネント由来かを分け、再発しやすい原因を修正している。
- 05自動検査だけでなく、キーボード操作、拡大表示、読み上げ名、スマホ操作のうち該当する観点を確認している。
- 06主要ボタン、テキストリンク、チェックボックス、ラジオが、スマホで誤タップしにくい大きさと間隔を持つ。
- 07入力部品は小さな四角だけでなく、対応するラベル全体を押せる。
コーディングエージェント向け修正指示
目的: スマホで検出された小さいリンクやボタンの押せる領域を広げ、隣接要素との距離を確保してください。ラベル付き入力はラベル全体をクリック可能にしてください。 追加確認: CSSの見た目サイズではなく、実際のクリック可能領域を確認し、padding、line-height、label関連付けを修正してください。
参考資料
よくある失敗
- 文字サイズだけ上げて、クリック領域を広げない。
- 見た目だけを整え、見出し、リンク、フォームラベルなどの意味構造を直さない。
- 1つの指摘だけを直し、同じ原因から出た別画面の再発を確認しない。
- ariaを追加して見た目と機械可読名を矛盾させる。
- 自動検査の消滅だけを完了条件にし、実際に操作できるかを確認しない。