GitHub Copilot のa11yのレビュー用プロンプト

review-a11y-base.prompt.md

アクセシビリティコーチ依頼

目的

WCAG 2.2レベルAおよびAAに準拠したWebコードの作成サポートを受けたい。

背景

• 参照ガイドライン: https://www.w3.org/TR/WCAG22/
• 技術スタック: Next.js 15.2.3（SSGモード）, TypeScript, Tailwind CSS
• App Routerパターンを使用したブログサイト
• 用途: blog.monotalk.xyzのアクセシビリティ対応

求めるサポート内容

1. アクセシビリティの要件に関する専門的アドバイス
2. ユーザビリティ向上のための具体的なコード改善案
3. 適用可能なWCAG 2.2の成功基準の解説
4. jest-axeを使用したアクセシビリティテストの実装方法

コード提案の条件

• セマンティックHTMLの使用
• キーボード操作への対応（フォーカス管理を含む）
• 適切な"use client"ディレクティブの配置
• TypeScriptとTailwind CSSを使用した実装例
• App Routerパターンに適したコンポーネント設計
• 必要なライブラリがあればインストールコマンドも提示

テスト実装の条件

• src/tests/a11y/ディレクトリに配置するテストコード例
• @testing-library/reactとjest-axeを使用したテスト実装
• コンポーネントのアクセシビリティ違反を検出するテストケース

参照すべき情報源

• w3.org（とくにWAI-ARIA Authoring Practices Guide）
• webaim.org
• developer.mozilla.org
• ibm.com/able
• Tailwind CSS Accessibility

出力形式

• 日本語での回答
• 具体的なコード例（TypeScript + Tailwind CSS）
• 参考リンクと引用元の明示
• jest-axeを使用したテストコード例

アクセシビリティインタラクションチェックリスト.md

アクセシビリティインタラクションチェックリスト

このチェックリストに従い、選択したファイルのインタラクションをレビューしてください。

目的

ユーザーインタラクションのアクセシビリティを評価し、WCAG 2.2準拠のための具体的な実装ガイドラインを提供します。

チェック項目

キーボードアクセシビリティ

// チェックポイント
// 1. すべてのインタラクティブ要素がキーボードで操作可能か
// 2. フォーカス順序が論理的か
// 3. tabIndexは適切に使用されているか

• ✅ リンクとボタンはTabキーでフォーカス可能にする
• ✅ メニューとリスト項目はキーボードで左から右、上から下の順にアクセス可能にする
• ✅ tabindex="0"は非フォーカス要素をフォーカス可能にする場合のみ使用
• ❌ tabindex > 0の使用は避ける（自然なフォーカスの流れを乱す）

フォーカス視覚表示

// チェックポイント
// 1. フォーカス状態が視覚的に明確か
// 2. フォーカス表示がデバイスに関係なく適切か

• ✅ フォーカス時に明確なアウトラインを表示する
• ✅ :focus-visible疑似クラスを活用する
• ✅ デバイス入力検出にはwhat-inputなどのライブラリを使用する
• ✅ フォーカスは:hoverと同等の視覚的フィードバックを提供する

モーダル・ダイアログ対応

// チェックポイント
// 1. モーダル表示時のフォーカス管理
// 2. キーボードでの閉じる操作

• ✅ モーダル表示時にフォーカスをトラップし、背後要素に移動しないようにする
• ✅ Escキーでモーダルを閉じられるようにする
• ✅ モーダル閉鎖時に元の要素にフォーカスを戻す

SPA・ナビゲーション対応

// チェックポイント
// 1. ページ遷移後のフォーカス管理
// 2. 動的コンテンツ更新時のフォーカス

• ✅ ページ遷移後、適切な要素にフォーカスを移動する
• ✅ 新しいコンテンツがロードされたら、その開始位置や見出しにフォーカスを移動する

タッチインタラクション

// チェックポイント
// 1. タッチターゲットサイズ
// 2. タッチ操作の代替手段

• ✅ クリック/タップ領域は少なくとも44×44ピクセル確保する
• ✅ 十分なタッチターゲット間の間隔を確保する

出力形式

各チェック項目について以下の形式で評価と改善案を提供してください:

### [チェック項目名]

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

**問題点**:
```該当コード```

**改善案**:
```修正コード例```

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

参考リンク

• WCAG 2.2: キーボードアクセシビリティ
• MDN: フォーカス管理
• WebAIM: キーボードアクセシビリティ
• WAI-ARIA: Dialog Pattern

アクセシビリティビジュアルチェックリスト.md

アクセシビリティビジュアルチェックプロンプト

このチェックリストに従い、選択したファイルのビジュアルをレビューしてください。

目的

指定されたファイルのビジュアルアクセシビリティを評価し、WCAG 2.2基準を満たすための具体的な改善案を提供する。

チェック項目と基準

1. 色のコントラスト

• WCAG基準: テキストと背景の色のコントラスト比がAA基準(4.5:1)以上、AAA基準(7.0:1)以上か
• 検証方法: コントラストアナライザーツールで測定
• コード参照ポイント: classNameで適用されるスタイル、インラインスタイル

2. フォントサイズと可読性

• 最小サイズ: 本文テキストは16px以上か
• 行の長さ: テキストブロックは1行あたり80文字以内に収まっているか
• 検証ポイント: font-sizeプロパティ、max-widthの設定値

3. 視覚的フィードバック

• エラー表示: エラーは色だけでなくアイコンや形状でも示されているか
• フォーカス状態: 要素のフォーカス状態が視覚的に明確か
• コード確認: aria-invalid属性と関連スタイルの実装

4. アニメーションと動き

• 必要性: 実装されているアニメーションは目的があるか
• 減速モード: prefers-reduced-motionメディアクエリに対応しているか
• コード確認: CSSアニメーション、トランジション設定

5. メディアコンテンツ

• 字幕: 動画・音声コンテンツに字幕や代替テキストがあるか
• 必要なタグ: <video>、<audio>要素に適切な属性があるか

6. レスポンシブ対応

• ズーム対応: 最低5段階のズームレベルでレイアウトが崩れないか
• 検証方法: ブラウザのズーム機能で200%以上に拡大して確認

出力形式

各チェック項目について以下の形式で評価と改善案を提供してください:

### [チェック項目名]

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

**問題点**:
```該当コード```

**改善案**:
```修正コード例```

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

以上のチェック項目に基づいて、対象ファイルのアクセシビリティ評価を行ってください。

セマンティックHTML実装チェックリスト.md

セマンティックHTML実装ガイド（WCAG 2.2対応）

このチェックリストに従い、選択したファイルのレビューをしてください。

基本原則

セマンティックHTMLは支援技術ユーザーにとって不可欠です。HTMLは適切に使用すれば優れたアクセシビリティを提供しますが、以下のベストプラクティスを守ることが重要です。

実装ガイドライン

1. 構造的要素の適切な使用

• <div> や <span> より適切なセマンティックタグ（<article>, <section>, <nav> など）を優先使用する
• ランドマーク要素を適切に配置する:

  <header>サイトヘッダー</header>
  <main>メインコンテンツ</main>
  <footer>サイトフッター</footer>

2. 見出し階層の正しい実装

• 見出しは h1 から始め、階層順に使用する（WCAG 2.2: 1.3.1 情報と関係性）
• ページに h1 は必ず1つ含める

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

• すべての入力要素に明示的なラベルを関連付ける:

  <label for="username">ユーザー名:</label>
  <input id="username" type="text">

4. ナビゲーション構造

• メニューは <nav> 要素で囲み、適切なリスト構造を含める:

  <nav aria-label="メインナビゲーション">
    <ul>
      <li><a href="/">ホーム</a></li>
      <li><a href="/about">概要</a></li>
    </ul>
  </nav>

5. リンクテキスト

• リンクテキストは単独でも意味が理解できるようにする（WCAG 2.2: 2.4.4 リンクの目的）
• 「ここをクリック」「続きを読む」のような文脈に依存するテキストは避ける
• 代替案: <a href="/blog/post">AI技術の最新動向について続きを読む</a>

6. 画像の代替テキスト

• すべての意味のある画像に適切な代替テキストを提供する（WCAG 2.2: 1.1.1 非テキストコンテンツ）:

  <img src="graph.png" alt="2023年の四半期売上データを示す棒グラフ">

• 装飾的な画像には空の alt 属性を設定: alt=""

7. ARIA属性の適切な使用

• ARIA属性はネイティブHTMLで解決できない場合のみ使用する
• 「ファーストルール: ネイティブHTMLの機能でできることにARIAを使わない」

出力形式

各チェック項目について以下の形式で評価と改善案を提供してください:

### [チェック項目名]

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

**問題点**:
```該当コード```

**改善案**:
```修正コード例```

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

参考リソース

• WCAG 2.2 情報と関係性 (1.3.1)
• WCAG 2.2 リンクの目的 (2.4.4)
• WAI-ARIA オーサリングプラクティス
• WebAIM: セマンティックHTML入門