アクセシビリティ改善をClaudeに任せる

アクセシビリティ対応は「やらなければならないとわかっているけれど、後回しになりがち」な作業の代表格です。しかしClaude Codeを使えば、監査から修正まで一気通貫で進めることができます。今回はそのワークフローを具体的に紹介します。

まずはWCAG監査をClaudeに依頼する

最初のステップは、既存コードのアクセシビリティ問題を洗い出すことです。Claude Codeに対して次のように指示してみましょう。

プロジェクト内のすべてのHTMLおよびJSXファイルを対象に、
WCAG 2.1 AA基準に照らしたアクセシビリティ監査を行ってください。
問題点を重要度（Critical / Warning / Info）で分類し、
該当ファイルと行番号を一覧形式で報告してください。

Claudeはコードベース全体をスキャンし、alt属性の欠落、コントラスト比の問題、キーボード操作不可な要素などを列挙してくれます。人力で同じことをやると数時間かかる作業が、数分で完了します。

ARIAラベルとセマンティクスの修正を自動化する

監査レポートが出たら、続けて修正を依頼しましょう。特にARIA属性まわりはルールが複雑で手が止まりやすい部分ですが、Claudeに任せれば確実です。

// 修正前
<div onClick={handleClose}>×</div>

// 修正後（Claudeが提案する例）
<button
  onClick={handleClose}
  aria-label="モーダルを閉じる"
  type="button"
>
  ×
</button>

divをbuttonに変更することでキーボードフォーカスが当たるようになり、aria-labelによってスクリーンリーダーが適切に読み上げられます。「このコンポーネント全体のARIAラベルを修正して」と伝えるだけで、同様のパターンを一括対応してくれます。

スクリーンリーダーテスト用のチェックリストを生成する

修正が完了したら、動作確認のフェーズです。Claudeに次のように依頼すると、そのプロジェクト固有のテストシナリオを作成してくれます。

修正したコンポーネントに対して、NVDAおよびVoiceOverでの
スクリーンリーダーテストチェックリストをMarkdown形式で作成してください。
ナビゲーション順序・フォームの入力補助・エラーメッセージの読み上げを
重点的に含めてください。

汎用的なテンプレートではなく、自分たちのUIに合わせた具体的な確認手順が得られるため、QAチームへの引き継ぎもスムーズになります。

アクセシビリティ改善はコツコツ続けることが大切です。Claude Codeをレビュープロセスに組み込み、PRのたびに小さな監査を走らせる習慣をつけると、技術的負債を積み上げずに済みますよ。