Claude Codeでアクセシビリティを改善する方法！WCAG対応とスクリーンリーダー最適化を自動化

はじめに

「アクセシビリティ対応をしたいが、何から手をつければいいかわからない」

「WCAGのガイドラインが多すぎて把握できない」

「スクリーンリーダーのテスト方法がわからない」

Webアクセシビリティは法的要件になりつつある重要な対応項目ですが、体系的に改善するには専門知識が必要です。Claude Codeを使えば、アクセシビリティ診断から修正コードの生成・テスト自動化まで一貫してサポートできます。

目次

1. アクセシビリティ診断の実施
2. セマンティックHTMLの修正
3. ARIAの適切な実装
4. キーボードナビゲーションの改善
5. カラーコントラストの修正
6. フォームのアクセシビリティ
7. アクセシビリティテストの自動化
8. スクリーンリーダー対応
9. まとめ・シリーズ第4部の総括

1. アクセシビリティ診断の実施

総合診断の実行

> このWebサイトのアクセシビリティを診断してください。

  診断ツール：
  - axe-coreによる自動スキャン
  - Lighthouse Accessibilityの実行

  WCAG 2.2の以下のレベルに対応しているか確認してください：
  - Level A（最低限）：必須対応
  - Level AA（標準）：推奨対応
  - Level AAA（最高水準）：参考情報

  問題を優先度別（Critical・Serious・Moderate・Minor）に分類して、
  修正工数の見積もりも出してください。

CI/CDへのアクセシビリティチェック組み込み

> PRごとにアクセシビリティチェックを自動実行する
  GitHub Actionsを設定してください。

  チェック内容：
  - axe-coreによるHTML解析
  - WCAG 2.2 Level AAへの適合チェック
  - 新たに追加された違反をPRコメントに表示
  - Criticalな違反がある場合はPRをブロック

2. セマンティックHTMLの修正

構造の修正

> このHTMLをセマンティックHTMLに修正してください。

  修正方針：
  - divばかりの構造をheader・main・nav・aside・footerに変更
  - 見出し階層（h1→h2→h3）が正しく設定されているか修正
  - buttonではなくdivにonClickが設定されている箇所を修正
  - imgタグにaltテキストを追加（装飾画像はalt=""）
  - tableに適切なthとscopeを追加

  [HTMLを貼り付け]

3. ARIAの適切な実装

カスタムコンポーネントへのARIA追加

> このカスタムドロップダウンコンポーネントに
  適切なARIA属性を追加してください。

  追加するARIA：
  - role="combobox"・role="listbox"・role="option"
  - aria-expanded（開閉状態）
  - aria-activedescendant（フォーカス中のオプション）
  - aria-label または aria-labelledby
  - aria-selected（選択状態）

  [コンポーネントを貼り付け]

ライブリージョンの設定

> 動的に更新されるコンテンツにaria-liveを設定してください。

  対象：
  - フォーム送信後の成功・エラーメッセージ
  - ローディング状態の変化
  - チャットの新着メッセージ
  - 在庫状況の変化

  polite・assertiveの適切な使い分けも説明してください。

4. キーボードナビゲーションの改善

フォーカス管理の実装

> このモーダルダイアログのキーボード操作を修正してください。

  必須の動作：
  - モーダルを開いたとき、フォーカスをモーダル内の最初の要素に移動
  - Tabキーでモーダル内のみをフォーカス（フォーカストラップ）
  - Escapeキーでモーダルを閉じる
  - モーダルを閉じたとき、トリガーしたボタンにフォーカスを戻す

  React Ariaまたはradix-uiを使って実装することを推奨してください。

スキップリンクの追加

> このページにスキップリンクを追加してください。

  追加するスキップリンク：
  - 「メインコンテンツにスキップ」
  - 「ナビゲーションにスキップ」

  フォーカスされたときだけ表示される
  スタイルも実装してください。

5. カラーコントラストの修正

コントラスト比の一括修正

> このデザインシステムのカラーパレットを分析して、
  WCAG AAのコントラスト比（4.5:1）を満たしていない
  色の組み合わせを修正してください。

  確認対象：
  - テキストと背景の組み合わせ
  - ボタンのラベルと背景
  - フォームの入力フィールドのテキスト
  - エラーメッセージの色

  修正後もデザインの一貫性を保ってください。

6. フォームのアクセシビリティ

フォームの改善

> このフォームのアクセシビリティを改善してください。

  修正項目：
  - すべての入力フィールドにlabelを紐付ける（for属性とid属性）
  - 必須フィールドをaria-requiredで明示する
  - エラーメッセージをaria-describedbyで紐付ける
  - バリデーションエラーをフィールドの近くに表示する
  - 送信後にエラーがある場合、最初のエラーフィールドにフォーカスを移動する
  - プレースホルダーのみのラベル代用を修正する

7. アクセシビリティテストの自動化

Playwright + axeによる自動テスト

> Playwright + @axe-core/playwrightを使って
  アクセシビリティの自動テストを作成してください。

  テスト対象ページ：
  - トップページ
  - ログインフォーム
  - 商品詳細ページ
  - 購入確認ページ

  テスト内容：
  - axeによる自動スキャン（違反ゼロを確認）
  - キーボードのみでの主要フローの操作確認
  - フォーカス順序の確認

  GitHub ActionsのCI/CDにも組み込んでください。

8. スクリーンリーダー対応

スクリーンリーダーでの動作確認

> このページをVoiceOver（Mac）またはNVDA（Windows）で
  テストする手順を教えてください。

  確認ポイント：
  - ページの構造が正しく読み上げられるか
  - インタラクティブ要素（ボタン・リンク・フォーム）が正しく操作できるか
  - 動的コンテンツの更新が通知されるか
  - 画像のaltテキストが適切か

  テスト結果をもとにコードの修正を提案してください。

まとめ・シリーズ第4部の総括

Claude CodeでのWCAG対応の効率化ポイント：

• axe-coreによる自動診断で問題を一括検出できる
• セマンティックHTML・ARIA属性の修正を自動生成できる
• キーボードナビゲーション・フォーカス管理を正確に実装できる
• CI/CDへのアクセシビリティテスト組み込みを自動設定できる

アクセシビリティ改善の優先順位：

1. セマンティックHTMLの修正（最も影響が大きい）
2. キーボード操作の確保
3. カラーコントラストの修正
4. ARIAの適切な実装
5. スクリーンリーダーでの動作確認

Claude Code入門シリーズ（第4部）の完結

第4部（第31〜40回・ID:50〜59）では、TypeScript型設計・IaC/Terraform・スクレイピング・GraphQL・モノレポ・Webhook・React Native・Observability・クラウド環境構築・アクセシビリティを解説しました。

よくある質問（FAQ）

Q. WCAG 2.2とWCAG 2.1の違いは何ですか？

A. WCAG 2.2は2023年に公開された最新版です。モバイル操作性・認知アクセシビリティに関する新しい達成基準が追加されています。Claude Codeに「WCAG 2.2で追加された達成基準とその対応方法を教えてください」と相談できます。

Q. アクセシビリティ対応は法律で義務付けられていますか？

A. 日本では2024年4月施行の改正障害者差別解消法により、民間事業者も合理的配慮の提供が義務化されました。Webアクセシビリティも対応が求められる場合があります。詳細はJIS X 8341-3（日本工業規格のウェブアクセシビリティ標準）を確認してください。

この記事はClaude Code入門シリーズ（第4部）の第40回・第4部最終回です。

← 第39回：AWS・GCPクラウド環境 ｜ ← シリーズ第1回：Claude Codeとは？

ご質問はお問い合わせページからお気軽にどうぞ。