はじめに
アクセシビリティ改善は重要だけれど、実際に進めていくのはなかなか大変です。
優先度が上がりづらかったり、改善の知識を社内に広めていくのも簡単ではありません。
そんな中で、最近Qiitaでは、AIエージェントを活用して、アクセシビリティ改善の一部を自動化する取り組みを始めました。
この記事は、実際に「GitHub Copilot coding agent」にアクセシビリティ改善を任せてみたところ、どのように作業が進み、どんな成果が得られたのかを紹介します。
アクセシビリティ改善のフロー
まずは、AIエージェントにアクセシビリティ改善を任せる時の改善フローについて紹介します。
1. アクセシビリティチェック
まずは、アクセシビリティチェックからです。
Qiitaでは、freeeさんが公開しているアクセシビリティー・チェック・リストを参考に自社向けのアクセシビリティチェックフォームを作成し、各画面が適合レベルに達しているかを確認しています。
また、ANDIやAccessibility Visualizer などのツールを活用しつつ、 実際に VoiceOver やキーボード操作でも確認を行っています。
2. 改善点をIssueにまとめる
アクセシビリティチェックした後、チェック結果をもとに、修正が必要な箇所を GitHub Issue にまとめていきます。
Issueを作る際には、Qiitaチームでよく使っている「P-C-C-Dフレームワーク」で整理します。
-
Prompt（要件定義）
- 達成すべき目標と作業のステップを明確に定義します
-
Context（背景情報）
- エージェントが作業を行うために必要な既存のコードベースの知識と構造を提供します
-
Constraints（制約/非機能要件）
- セキュリティ、パフォーマンス、アーキテクチャの適合性など、守るべき品質の境界線を設定します
-
DoD（完了の定義）
- 作業が成功し、PRがマージ可能と見なされるための具体的な検証基準を定めます
Issueのまとめ方は、下記のセクションで詳しく紹介します。
3. GitHub Copilot coding agent をアサインする
GitHub上のissueから、GitHub Copilot coding agentをアサインして、プルリクを作成してもらいます。
詳しい手順は、以下の記事で詳しく紹介されています。
4. レビュー & デプロイ
AIエージェントが作成したプルリクエストをレビューします。
内容に問題がなければ、そのままマージ＆デプロイ！
小さな改善でも、こうして自動化のサイクルを回すことで、
チーム全体のアクセシビリティ品質が着実に上がっていきます。
PCCDフレームワークとは？
PCCDフレームワークは、AIエージェントの出力がより意図通りなものにするためのフレームワークです。（自作）
Prompt（要件定義）
Promptでは、達成すべき目標と作業のステップを明確に定義してください。
特に、以下の2点（スコープ・実装ステップ）を明記しましょう。
- スコープ
- 変更範囲を範囲が定める
- 対象となるファイル・関数/クラスなどを明確にします
- 実装ステップ
- 要求定義の構造化し、実装ステップを明確にする
以下のようにまとめます。
<!-- Buttonコンポーネントのタップサイズ・コントラスト比を確保されてないのを修正する例 -->
### Prompt（要件定義）
Buttonコンポーネントのタップサイズとコントラスト比がアクセシビリティの基準未達成のため、アクセシビリティの基準を満たすように修正する
- スコープ
- `../Button.tsx`
- 実装ステップ
1. `buttonStyle` に `minWidth: 44px,`を追加する
2. `buttonStyle` に `backgroundColor: Colors.greenContainer,`を追加する
3. `buttonStyle` に `iconOnly`(boolean)を受け取れるようにする
4. `iconOnly` が `true` の時、`buttonStyle` に `minHeight: 44px,`を追加する
Context（背景情報）
エージェントが作業を行うために必要な既存のコードベースの知識と構造を提供します。
修正する対象ではないけど、使いたいコンポーネントや関数などを明記しましょう。
<!-- Buttonコンポーネントのタップサイズ・コントラスト比を確保されてないのを修正する例 -->
### Context（背景情報）
- `backgroundColor`で使う `Colors` は、`../variables.ts` の Colors オブジェクトを使用してください
Constraints（制約/非機能要件）
セキュリティ、パフォーマンスなど、守るべき品質を設定します。
エラーが発生してないか、テストが通るかなどを明記しましょう。
<!-- Buttonコンポーネントのタップサイズ・コントラスト比を確保されてないのを修正する例 -->
### Constraints（制約/非機能要件）
- フロントエンドテストを実行し、エラーが発生する場合、すべて解消すること。
- 既存のButtonコンポーネントの基本的なロジックやスタイリングに意図しない副作用を与えないこと。
DoD （完了の定義）
作業が成功し、PRがマージ可能と見なされるための具体的な条件を定めます
<!-- Buttonコンポーネントのタップサイズ・コントラスト比を確保されてないのを修正する例 -->
### DoD （完了の定義）
以下の条件がすべて満たされた場合、PRはマージ可能と見なします。
- ButtonコンポーネントにminWidthが設定されていること
- ButtonコンポーネントにminHeightが設定されていること
- ButtonコンポーネントのBackgroundColorにGreenContainerの色が設定されていること
Issueのまとめ方
上記のPCCDフレームワークを利用し、Issueを整理します。
整理したIssueがこのようになります。
## What
### Prompt（要件定義）
Buttonコンポーネントのタップサイズとコントラスト比がアクセシビリティの基準未達成のため、アクセシビリティの基準を満たすように修正する
- スコープ
- `../Button.tsx`
- 実装ステップ
1. `buttonStyle` に `minWidth: 44px,`を追加する
2. `buttonStyle` に `backgroundColor: Colors.greenContainer,`を追加する
3. `buttonStyle` に `iconOnly`(boolean)を受け取れるようにする
4. `iconOnly` が `true` の時、`buttonStyle` に `minHeight: 44px,`を追加する
### Context（背景情報）
- `backgroundColor`で使う `Colors` は、`../variables.ts` の Colors オブジェクトを使用してください
### Constraints（制約/非機能要件）
- フロントエンドテストを実行し、エラーが発生する場合、すべて解消すること。
- 既存のButtonコンポーネントの基本的なロジックやスタイリングに意図しない副作用を与えないこと。
### DoD （完了の定義）
以下の条件がすべて満たされた場合、PRはマージ可能と見なします。
- ButtonコンポーネントにminWidthが設定されていること
- ButtonコンポーネントにminHeightが設定されていること
- ButtonコンポーネントのBackgroundColorにGreenContainerの色が設定されていること
## Why
<!-- なぜこのissueをするのかをまとめる -->
...
## References
<!-- 関連する issue、発端となった Slack メッセージ、議論の参考になるページなどの URL を貼る -->
...
まとめ
AIエージェントを活用することで、アクセシビリティ改善のフローを継続的に・効率的に回せるようになりました。
特に、PCCDフレームワークを活用すると精度高くAIエージェントがissueに取り組んでくれるので、改善スピードが大きく向上したと思います。
これからも、AIエージェントを活用して、アクセシビリティ改善の最適な協働スタイルを探っていきたいと思います。
最後まで読んでくださってありがとうございます！
普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。