自動化中級

アクセシビリティ (a11y) の改善

axe / Lighthouse 結果を元に WCAG 違反を修正していくプロンプト。

監修: 平原尚樹

株式会社BlueAI 代表取締役CEO / ソフトウェアエンジニア / プロダクトエンジニア / Google Cloud Architect / 元AIスタートアップ(Doorkel)

監修: 酒井歩乃加

早稲田大学文化構想学部卒業 / フリーランス編集者・ライター / 元マイベスト編集ディレクター / SEO対策記事・取材記事執筆

こんな課題を解決

Lighthouse の a11y スコアが 70 前後で、フォームのラベル不足やコントラスト不足が指摘されているが、どこから手を付けるべきか整理できていない。

プロンプト

Claude Code に入力

app/ 配下のアクセシビリティを改善してください。

## 入力
- Lighthouse a11y スコア 72
- axe DevTools の主要違反: 1) label-input 不足 2) コントラスト比 3) 見出し階層

## 手順
1. axe 違反を WCAG 基準別に分類し、画面ごとの件数表を出す
2. label 不足は FormLabel コンポーネントを必須化し、不足箇所を一括修正
3. コントラスト不足はトークン側で値を見直し（packages/ui/tokens.css）
4. ナビゲーションを skip link / landmark roles で補強
5. キーボード操作のみで主要フロー（ログイン → ダッシュボード → 設定）が回ることを確認

## 守ること
- 視覚的なデザインは大きく変えない
- 修正後に Lighthouse / axe を再実行して数値で示す
- スクリーンリーダー読み上げの確認手順を添える

実行結果の例

Claude Code が以下を返します。 - 違反 47 件の分類表 - FormLabel 必須化 PR の diff - tokens.css のコントラスト改善 diff（gray-500 を 600 に） - 再計測スコア 72 → 94 の予測

コツ・ポイント

コントラスト比は背景色と組合せた上で測ること
見出し階層は h1 が 1 つ、h2 → h3 と飛ばさないのが原則
aria-* は最後の手段、まずネイティブ HTML 要素で表現
VoiceOver / NVDA で実際の読み上げを確認するのが最良