blog.monotalk.xyz日々の書き込み

GitHub CopilotでA11yのレビュー、テストを実施する

Cover Image for GitHub CopilotでA11yのレビュー、テストを実施する
monotalk
monotalk

はじめに

GitHub Copilotでコードの非機能要件のレビューとその修正が実施できると幸せになれるかなという気持ちがあり、少し調べたところ、GitHubのブログで以下の記事が公開されていることを発見しました。

それぞれ、Google翻訳とGitHub Copilotを使ってプロンプトを作成しました。

とりあえず、成果物

以下のプロンプトを作成しました。Gistのリンクを貼っておきます。

プロンプトの作成手順

ベースプロンプト、チェックリストの作成手順について記載します。

a11yのベースプロンプト

  1. Prompting GitHub Copilot Chat to become your personal AI assistant for accessibility - The GitHub BlogのプロンプトをGoogle翻訳
    以下をGoogle翻訳で日本語化しました。

“I need to learn about accessibility and need to write code that conforms with the WCAG 2.1 level A and AA success criteria defined at https://www.w3.org/TR/WCAG21/. I want you to be my accessibility coach, a subject-matter expert that makes me think and account for all accessibility requirements and usability enhancements. When you answer questions about accessibility please use reputable sources such as w3.org, webaim.org, developer.mozilla.org, and https://www.ibm.com/able/. When possible, please provide links and references for additional learning. When you suggest code please use semantic HTML, ensure it is operable using the keyboard, follow WCAG 2.1 sufficient techniques, and follow the ARIA Authoring Practices Guide and related design patterns. Do you understand these instructions?”

  1. 上記を日本語化したものをGitHub Copilot Chatに投げた後、以下のプロンプトを実行して、プロンプトのMarkdownを作成
上記の内容をGitHub Copilotが解釈しやすいようにプロンプトにしてください。
  1. 作成されたプロンプトと何度か使う。利用時に生成したチャットログを使って、再度プロンプトを調整
    以下の記事を参考にチャットログを生成して、学習した結果をもとにGitHub Copilotにプロンプトを再生成してもらいました。
    Copilot Edits の機能を補うscript, promptを試している

レビュー用のプロンプト

  1. alexnm/a11y-checklist: A quick checklist for accessibility based on materials I gathered for my last talk をGoogle翻訳で翻訳

  2. a11yのベースプロンプトをGitHub Copilotに読み込ませた状態で、各観点ごとのレビュー用プロンプトを作るために以下のようなプロンプト作成し、GitHub Copilotに依頼。


## ビジュアル
これらの実践とパターンは、色覚異常、前庭機能障害、視力低下、聴覚障害など、さまざまな種類の障害（永続的または一時的）を持つユーザーに役立ちます。

* 色のコントラスト、AA 標準の場合は4.5 以上、AAA の場合は7.0 以上（多くのツールでサイト全体のこのチェックを自動化できます）
* 小さな文字には大きなコントラストを目指す
* テキストのコントラストと境界線/他の要素を優先する
* アイコンやその他の視覚的なインジケーターを色と組み合わせて使用​​する（例：フォームのエラーを表示する）
* 最小フォントサイズは16ピクセルにする必要があります
* 長いテキストを表示する場合は1行あたり80文字を維持し、段落の標準間隔を確保します。
* アニメーションが必要なものであり、予期しないものではないことを確認する
* ユーザーがOSからオプトインしたときにアニメーションを無効にするには、prefers-reduced-motionを使用します。
* 動画に字幕または自動字幕が付いていることを確認する
* ウェブサイトで少なくとも 5 つのズーム レベルが利用可能であり、レイアウトがズームインに適切に応答することを確認します。

上記のチェックリストをもとにGitHub Copilotが解釈しやすいチェックリストを作成してください。
  1. 作成されたプロンプトをAlfredのスニペットとして登録。
  2. チェックリストのカテゴリ分繰り返し。

GitHub Copilot Agentモードで利用したふりかえり

作ったベースプロンプトと、チェックリストを使って、GitHub Copilot Agentモードを動作させてこのブログのa11y改善を実施してみたのですが、感想をプラス＆デルタで記載しておきます。2025年4月の話です。

プラス

  • 「＋」jest-axeを使ったa11yのテストを作り始める。a11yフォルダーを作成しテストを実施して、問題箇所を修正するということを繰り返してくれる。
  • 「＋」検索ボックスがキーボードで操作可能になった。
  • 「＋」aria-labelを必要だと判断したところに軒並み設定してくれる。
  • 「＋」ブログのページングを調整してくれて、確かに見やすくなった気がする。

デルタ

  • 「▼」ページ間のUIの統一性とかは考えてくれない。（くれずらい）ので、各ページのレイアウトにバラ付きが出る。
  • 「▼」a11yの対応優先でUIを壊していく傾向があるように思う。
  • 「▼」修正した結果、jest-axeでエラーになり、再度修正する様子が見られる。※事前にテストを書かせた方が良い。

その他、GitHub Copilot Agentモードの動作で気づいたこと

エージェントモードで利用する目的で以下のようなプロンプトも作成してみましたが、期待通りの動作をしませんでした。GitHub Issueの起票を期待したのですが、Issueは起票されず、エージェントモードでは直接チャット上で指示する必要がありそうでした。

エージェントモードで起動して、a11yのIssueを作ってくれることを期待していましたが、ソース修正を始めてしました。 エージェントに何かをお願いするときは、「GitHub Issueを起票して」などの直接的な依頼をチャット上でする方が効果的かもしれません。

おわりに

以上、GitHub Copilotを使ったアクセシビリティレビューについての検証でした。
実際に使ってみるとaXe pluginだけではわからないこともわかるという感想を持ったので、実戦投入も個人的にはしても良いかなとは思いました。
ただ、人のレビュー、テストは必須でそのままリリースまでもっていくのは現在はないかなと思っています。
あとは、ルールベースチェックの結果をひたすら直してもらうとかも有用そうと思いました。
今後そのあたりを試してみたいと思います。
以上です。