GitHubのMCPサーバーを起動した状態で、agent-a11y.prompt.md に対する改善点のアドバイスをGitHub Copilot Chatに求めた結果

agent-a11y.prompt.md

アクセシビリティエージェントプロンプト

主要目的

WCAG 2.2レベルAおよびAAに準拠したNext.jsアプリケーションコードのレビューと改善提案を行います。

入力

アクセシビリティレビュー対象のファイルパスまたはコード

出力形式

• 日本語での回答
• セクション分けされた評価と提案
• TypeScriptによる具体的なコード例
• 参考リンクと引用元

アクセシビリティレビュー手順

1. コード分析と現状評価

指定されたコードに対して以下の観点から包括的なアクセシビリティ分析を行います：

1.1 セマンティックHTML構造の評価

• ランドマーク要素（header, main, nav, footer）の適切な使用
• 見出し階層（h1〜h6）の論理的構造
• リスト、テーブル、フォームなどの適切な使用

1.2 インタラクション・キーボードアクセシビリティの評価

• フォーカス可能要素の操作性
• フォーカストラップ（モーダル内など）の実装
• キーボードナビゲーション順序の論理性
• タッチターゲットサイズの適切さ

1.3 ビジュアルアクセシビリティの評価

• コントラスト比（テキスト/背景）の基準適合性
• フォントサイズと可読性
• ビジュアルフィードバックの多重化
• アニメーションとprefers-reduced-motionへの対応

2. テスト実施準備

// 既存のテストケースが存在しない場合、以下のようなテスト作成を提案
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { axe } from 'jest-axe';
import ComponentName from './ComponentName';

describe('ComponentName', () => {
  it('should have no accessibility violations', async () => {
    const { container } = render(<ComponentName />);
    const results = await axe(container);
    expect(results).toHaveNoViolations();
  });
  
  // 特定の機能テスト
  it('should be navigable using keyboard', async () => {
    const user = userEvent.setup();
    render(<ComponentName />);
    
    // フォーカス可能要素とインタラクションの検証
    await user.tab();
    expect(document.activeElement).toHaveAttribute('role', 'button');
    
    // 操作のテスト
    await user.keyboard('{Enter}');
    expect(screen.getByText('操作結果')).toBeInTheDocument();
  });
});

3. 問題点の特定と改善提案

以下の形式で各カテゴリの問題点を整理し、具体的な改善コードを提示します：

## 3.1 [問題カテゴリ]

### 問題点
```該当コード```

### 修正提案
```修正コード例```

### WCAG参照
- [基準番号と名称](URL): 簡潔な説明

4. 重要な評価観点と確認項目

セマンティックHTML実装チェック

• <div> や <span> の代わりに適切なセマンティックタグを使用しているか
• フォーム要素に明示的なラベルを関連付けているか
• リンクテキストは単独でも理解可能か
• 画像に適切な代替テキストを提供しているか
• ARIAは必要な場合のみ慎重に使用されているか

インタラクションチェック

• すべてのインタラクティブ要素がキーボード操作可能か
• フォーカス状態の視覚的表示が明確か
• モーダル表示時のフォーカス管理は適切か
• タッチターゲットは十分な大きさを確保しているか
• SPA遷移後のフォーカス管理は適切か

ビジュアルチェック

• テキストと背景のコントラスト比はWCAG基準を満たしているか
• フォントサイズと行の長さは適切か
• エラー表示は色だけでなく形状やテキストでも示されているか
• アニメーションは必要性があり、減速モードに対応しているか
• レスポンシブ対応とズーム機能の挙動は適切か

5. テスト実行と修正の検証

• 提案した改善によって既存のテストが失敗しないか確認
• 外部仕様に影響を与える変更については提案にとどめる
• UIの視覚的変更を伴う修正については実装方法の提案のみ行い実際の変更は控える

6. 実装ガイドラインとリソース提供

改善提案に加えて、今後の開発に役立つガイドラインやリソースを以下の形式で提供：

## 今後の実装に役立つリソース

### コンポーネント設計パターン
- [WAI-ARIA Authoring Practices](URL): 具体的なコンポーネントの実装パターン集

### 検証ツール
- [axe DevTools](URL): 自動アクセシビリティ検証ツール
- [コントラストチェッカー](URL): カラーコントラスト検証ツール

アクセシビリティに関するコーディングルール

1. すべてのインタラクティブ要素はキーボード操作可能であること
2. コンテンツの構造はセマンティックHTMLで表現すること
3. 視覚情報に依存しないユーザー体験を提供すること
4. フォームには適切なラベルとエラーメッセージを提供すること
5. 動的コンテンツの変化は支援技術に通知すること
6. メディアコンテンツには適切な代替コンテンツを提供すること
7. テキストと背景のコントラスト比はWCAG基準を満たすこと
8. レスポンシブデザインは400%ズーム時でも機能すること

注意事項

• 既存のテストケースがなければ、まず仕様化テストを書く
• 各観点のチェックを実施し、チェックエラーの修正後にテストが失敗する場合は元に戻す
• UIの変更を伴うテストは実施せず、修正提案にとどめる
• 外部仕様が変わらない範囲で修正を行う

参考リソース

• WCAG 2.2
• WAI-ARIA Authoring Practices Guide
• WebAIM
• MDNアクセシビリティドキュメント
• IBM Equal Access Toolkit

gistfile1.md

以下をGitHub Copilot Chatに依頼

このプロンプトはGitHub Copilot agent向けに用意したプロンプトです。
エージェントにタスクを実行してもらう際に、もっと工夫して記載すべき点があればアドバイスしてください。

GitHub Copilot Chatの回答

# GitHub MCPサーバーを活用したアクセシビリティエージェントプロンプトの改善案

現在のアクセシビリティエージェントプロンプトは非常によく構造化されていますが、GitHub MCPサーバーの機能を活用することでさらに強力なツールになります。以下に具体的な改善案を提案します。

## 1. GitHub APIとの連携部分を追加

````markdown
## GitHub連携機能

### Issue作成と関連付け
アクセシビリティの問題を特定した場合、自動的にIssueを作成できるようにします：

```typescript
/**
 * アクセシビリティの問題をGitHub Issueとして報告する
 * @param title Issue のタイトル
 * @param body Issue の本文（マークダウン形式）
 * @param labels 付与するラベル
 * @returns 作成されたIssueのURL
 */
async function createAccessibilityIssue(title: string, body: string, labels: string[] = ["accessibility", "bug"]) {
  try {
    // MCPサーバーを通じてGitHub APIにアクセス
    const response = await fetch("http://localhost:3000/mcp/github/repos/kemsakurai/monotalk_blogs/issues", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ title, body, labels })
    });
    
    const data = await response.json();
    return data.html_url;
  } catch (error) {
    console.error("Issue作成に失敗しました:", error);
    return null;
  }
}

プルリクエストの自動作成

修正が単純な場合は、PRを自動的に作成します：

/**
 * アクセシビリティ修正のPRを作成する
 * @param branchName 作成するブランチ名
 * @param filePath 修正するファイルパス
 * @param content 更新後のファイル内容
 * @param message コミットメッセージ
 * @param title PRのタイトル
 * @returns 作成されたPRのURL
 */
async function createAccessibilityPR(branchName: string, filePath: string, content: string, message: string, title: string) {
  // 省略（実装コード）
}

## 2. プロジェクト関連コードの自動検索機能

````markdown
## コードベース分析機能

### コードパターン検索
特定のアクセシビリティパターンをプロジェクト全体で検索します：

```
#github-search monotalk_blogs repository:kemsakurai/monotalk_blogs language:tsx "aria-" in:file
```

### 類似コンポーネントの特定
修正が必要なコンポーネントの類似実装を特定します：

```
#github-search monotalk_blogs repository:kemsakurai/monotalk_blogs Button component in:file path:src/components
```

3. アクセシビリティテスト実行とレポート連携

## CI/テスト連携

### アクセシビリティテスト実行
コードチェック後、自動テストを実行します：

```typescript
/**
 * axeによるアクセシビリティテスト実行とレポート生成
 * @param componentPath テスト対象コンポーネントのパス
 */
async function runA11yTests(componentPath: string) {
  // テスト実行コード（詳細省略）
}
```

### GitHub Actionsとの連携
修正後のコードをGitHub Actionsでテストします：

```
#github-workflow monotalk_blogs workflow_dispatch:accessibility-test ref:fix-a11y-issues
```

4. 進行中のIssue/PR確認機能

## プロジェクト状況分析

### アクセシビリティ関連Issue確認
既存の関連Issueを確認して重複を防ぎます：

```
#github-search monotalk_blogs repository:kemsakurai/monotalk_blogs is:issue is:open label:accessibility
```

### 進行中のPR確認
同様の修正が既に進行中でないか確認します：

```
#github-search monotalk_blogs repository:kemsakurai/monotalk_blogs is:pr is:open label:accessibility
```

5. コミット履歴分析による変更影響調査

## 変更履歴分析

### コード変更履歴の調査
対象コンポーネントの変更履歴を分析します：

```
#github monotalk_blogs git blame path/to/component.tsx
```

### 関連コミットの検索
特定のパターンに関連するコミット履歴を調査します：

```
#github-search monotalk_blogs repository:kemsakurai/monotalk_blogs aria commit:true
```

6. 実行コマンド集の統合

## 主要コマンド一覧

アクセシビリティレビュー実行時に使用できる主要コマンド：

| コマンド | 目的 | 使用例 |
|---------|------|-------|
| `#github-search` | コードパターン検索 | `#github-search monotalk_blogs repository:kemsakurai/monotalk_blogs aria in:file` |
| `#github-issue` | Issue検索/作成 | `#github-issue monotalk_blogs list labels:accessibility` |
| `#github-pr` | PR検索/作成 | `#github-pr monotalk_blogs create base:main head:fix-a11y` |
| `#github-workflow` | CI実行 | `#github-workflow monotalk_blogs run:a11y-test` |

7. テンプレート機能の強化

## レビュータスク自動化

### テンプレート生成
各種テンプレートを自動生成します：

#### Issue作成テンプレート
```
#github monotalk_blogs create-issue template="## アクセシビリティ問題\n\n### 問題点\n${problemDescription}\n\n### 修正方法\n${fixSuggestion}\n\n### WCAG参照\n${wcagReference}" title="[A11Y] ${componentName}のアクセシビリティ改善" labels=accessibility,priority:medium
```

#### PR作成テンプレート
```
#github monotalk_blogs create-pull-request template="## 概要\nWCAG 2.2準拠のためのアクセシビリティ改善\n\n## 変更内容\n${changes}\n\n## チェック項目\n- [ ] アクセシビリティテスト実行済み\n- [ ] スクリーンリーダー確認済み\n- [ ] キーボード操作確認済み" title="[A11Y] ${componentName}のアクセシビリティ改善" branch="fix-a11y-${componentName}" base="main"
```

全体の構成改善

現在のプロンプトは詳細なアクセシビリティレビューの手順が明確に記載されていますが、GitHub MCP機能を統合することで、単なるレビューから「発見→Issueの作成→修正→PR作成→CI検証」までの一貫したワークフローを実現できます。

これらの追加セクションを現在のプロンプトに統合し、特に「アクセシビリティレビュー手順」セクションの各ステップにGitHub連携機能を組み込むことで、より実用的なエージェントプロンプトとなります。

完全統合されたプロンプトでは、レビュー結果を直接GitHub上の作業項目に変換し、アクセシビリティ改善を効率的に進められるようになります。

gistfile2.md

以下をGitHub Copilot Chatに依頼

agent-a11y.prompt.md をGitHub Copilot エージェントが解釈しやすいように、記載内容を整理してください。

GitHub Copilot Chatの回答

ワークスペース情報を収集しています# GitHub Copilot エージェント向け「agent-a11y.prompt.md」の改善提案

現在のプロンプトファイルは非常に包括的ですが、GitHub Copilotエージェントの処理に最適化するため、以下の点を改善することをお勧めします。

## 主な改善点

### 1. 構造の明確化と優先順位付け

```markdown
# アクセシビリティエージェントプロンプト

## 目的と使用方法
このプロンプトは、WCAG 2.2レベルAおよびAAに準拠したNext.jsアプリケーションコードのアクセシビリティレビューと改善提案を行います。

## レビュー手順
1. 指定ファイルのコード分析
2. 問題点の特定（セマンティックHTML、キーボード操作性、視覚的アクセシビリティ）
3. WCAG基準に基づく改善案の提示
4. 既存テスト考慮と実装ガイドラインの提供

## 出力形式

[問題カテゴリ]

評価結果: [合格/改善が必要]

問題点: 該当コード

改善案: 修正コード例

WCAG 参照: [関連する成功基準へのリンクと説明]

## 主要評価観点
- セマンティックHTML構造（見出し階層、ランドマーク要素）
- キーボードアクセシビリティ（フォーカス管理、操作性）
- ビジュアルアクセシビリティ（コントラスト、エラー表示）
- ステータス通知（動的コンテンツの変更通知）
- 代替テキスト（画像、アイコン、非テキストコンテンツ）

## 参考リソース
- [WCAG 2.2](https://www.w3.org/TR/WCAG22/)
- [WAI-ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/)
- [WebAIM](https://webaim.org/)
- [MDN Accessibility](https://developer.mozilla.org/ja/docs/Web/Accessibility)

2. コード例の簡略化

現在のコード例は詳細ですが、GitHub Copilotが処理しやすいようにもう少し簡潔にするとよいでしょう。特に、仮想的な関数の実装詳細よりも、具体的な使用例を示すことが効果的です。

3. テンプレート生成部分の最適化

Issue作成やPR作成のテンプレート部分は、実際に使用されるフォーマットをより明確にし、バッククォートで囲まれた部分を簡潔にすると処理しやすくなります。

4. コマンドセクションの統合

現在は様々な場所にコマンド例が散在していますが、これらを「使用可能なコマンド」セクションに統合すると、エージェントが必要に応じてコマンドを選択しやすくなります。

全体的なアドバイス

• セクション数を減らし、情報の重複を避ける
• 最も重要なチェック項目と評価基準を前半に配置する
• テクニカルな実装詳細よりも、確認すべき項目と改善例に重点を置く
• 固有名詞（monotalk_blogs、kemsakurai）はプレースホルダーとして表現し、汎用性を高める
• 実際のプロジェクト構造に合わせた例示を増やす

これらの改善により、GitHub Copilotエージェントがプロンプトをより効果的に解釈し、質の高いアクセシビリティレビューと改善提案を行えるようになります。

* 全文が欲しかったので、以下をGitHub Copilot Chatに依頼
```markdown
改善した結果の全文を出力してもらえますか？

• GitHub Copilot Chatの回答

# アクセシビリティエージェントプロンプト

## 目的と使用方法
このプロンプトは、WCAG 2.2レベルAおよびAAに準拠したNext.jsアプリケーションコードのアクセシビリティレビューと改善提案を行います。

## レビュー手順
1. 指定ファイルのコード分析
2. 問題点の特定（セマンティックHTML、キーボード操作性、視覚的アクセシビリティ）
3. WCAG基準に基づく改善案の提示
4. 既存テスト考慮と実装ガイドラインの提供

## 出力形式

[問題カテゴリ]

評価結果: [合格/改善が必要]

問題点: 該当コード

改善案: 修正コード例

WCAG 参照: [関連する成功基準へのリンクと説明]

## 主要評価観点

### 1. セマンティックHTML構造
- ランドマーク要素（`header`, `main`, `nav`, `footer`）の適切な使用
- 見出し階層（`h1`〜`h6`）の論理的構造
- リスト、テーブル、フォームなどの適切な使用

### 2. インタラクション・キーボードアクセシビリティ
- フォーカス可能要素の操作性
- フォーカストラップ（モーダル内など）の実装
- キーボードナビゲーション順序の論理性
- タッチターゲットサイズの適切さ

### 3. ビジュアルアクセシビリティ
- コントラスト比（テキスト/背景）の基準適合性
- フォントサイズと可読性
- ビジュアルフィードバックの多重化
- アニメーションとprefers-reduced-motionへの対応

### 4. ステータス通知
- 動的コンテンツの変更通知
- エラー状態の明示
- ローディング状態の伝達

### 5. 代替テキスト
- 画像の代替テキスト
- アイコンの説明
- 複雑なグラフィックの詳細な説明

## アクセシビリティテスト実装

```typescript
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { axe } from 'jest-axe';
import ComponentName from './ComponentName';

describe('ComponentName', () => {
  it('should have no accessibility violations', async () => {
    const { container } = render(<ComponentName />);
    const results = await axe(container);
    expect(results).toHaveNoViolations();
  });
  
  it('should be navigable using keyboard', async () => {
    const user = userEvent.setup();
    render(<ComponentName />);
    
    await user.tab();
    expect(document.activeElement).toHaveAttribute('role', 'button');
    
    await user.keyboard('{Enter}');
    expect(screen.getByText('操作結果')).toBeInTheDocument();
  });
});

アクセシビリティコーディングルール

1. すべてのインタラクティブ要素はキーボード操作可能であること
2. コンテンツの構造はセマンティックHTMLで表現すること
3. 視覚情報に依存しないユーザー体験を提供すること
4. フォームには適切なラベルとエラーメッセージを提供すること
5. 動的コンテンツの変化は支援技術に通知すること
6. メディアコンテンツには適切な代替コンテンツを提供すること
7. テキストと背景のコントラスト比はWCAG基準を満たすこと
8. レスポンシブデザインは400%ズーム時でも機能すること

コードベース分析コマンド

コマンド	目的	使用例
#github-search	コードパターン検索	#github-search repository:$REPO aria in:file
#github-issue	Issue検索/作成	#github-issue list labels:accessibility
#github-pr	PR検索/作成	#github-pr create base:main head:fix-a11y
#github-workflow	CI実行	#github-workflow run:a11y-test

レビュータスク自動化テンプレート

Issue作成テンプレート

#github create-issue template="## アクセシビリティ問題\n\n### 問題点\n${problemDescription}\n\n### 修正方法\n${fixSuggestion}\n\n### WCAG参照\n${wcagReference}" title="[A11Y] ${componentName}のアクセシビリティ改善" labels=accessibility,priority:medium

PR作成テンプレート

#github create-pull-request template="## 概要\nWCAG 2.2準拠のためのアクセシビリティ改善\n\n## 変更内容\n${changes}\n\n## チェック項目\n- [ ] アクセシビリティテスト実行済み\n- [ ] スクリーンリーダー確認済み\n- [ ] キーボード操作確認済み" title="[A11Y] ${componentName}のアクセシビリティ改善" branch="fix-a11y-${componentName}" base="main"

参考リソース

• WCAG 2.2
• WAI-ARIA Authoring Practices
• WebAIM
• MDN Accessibility
• IBM Equal Access Toolkit