---
name: a11y-check-page
description: 動作しているWebページを対象にアクセシビリティチェック（a11yチェック）を行う。Playwright MCPでブラウザを操作し、axe-coreによる自動チェック、キーボード操作、ズームやリフロー、アクセシビリティツリーの確認をWCAG 2.2レベルAAを目安に行い、重篤度付きのレポートを出力する。ログインが必要なページも、資格情報と手順を指示すればチェックできる。「このURLのアクセシビリティをチェックして」「ログインして管理画面をa11yチェックして」などで使う。Use for accessibility (a11y) audit of a live web page via browser automation against WCAG 2.2 AA.
---

# 動作しているページのアクセシビリティチェック

ブラウザで実際にページを操作し、アクセシビリティに関して優先的に対処するべき問題を発見する。
基準は WCAG 2.2 のレベル AA を目安とする。

## 前提の確認

このスキルは **Playwright MCP** を使用する。`browser_navigate` `browser_snapshot`
`browser_click` `browser_evaluate` `browser_resize` `browser_press_key`
`browser_take_screenshot` 相当のツールが利用できることを最初に確認する。

利用できない場合は、以下を案内してチェックを中断する。ツールなしで推測によるチェックを
行ってはならない。

```
claude mcp add playwright npx @playwright/mcp@latest
```

## このチェックの限界を最初に理解する

実ページからも判定できないものがある。**判定できないものを、判定できたかのように
書いてはならない。**

- スクリーンリーダー実機での実際の読み上げ（アクセシビリティツリーは代替にならない）
- ハイコントラストモード（強制カラーモード）での表示
- 実デバイスでの画面回転、タッチ操作、マルチポインタのジェスチャー
- 動画のキャプションや音声解説の**内容**の妥当性
- 閃光の一般閃光閾値・赤色閃光閾値の判定
- 時間制限（長時間の経過を要するもの）

これらは「実施しなかった手順」または「要追加確認」としてレポートに明記する。

アクセシビリティに留まらない一般的なユーザビリティの問題や、実害はないものの HTML や
WAI-ARIA の仕様・ベストプラクティスに反するものを見つけた場合も、報告する。

## 手順

### スクリーンショットの保存先（全手順共通）

**どの手順であっても、スクリーンショットは必ず `a11y-report/assets/` の下に保存する。**
視覚確認・キーボード操作・リフロー確認など、手順を問わずスクショを撮る場面があるが、いずれも
同じ規則に従う。`browser_take_screenshot` は `filename` を指定しないと作業ディレクトリ
（カレントディレクトリ）にファイルを撒き散らすため、**呼び出しのたびに `filename` に
`a11y-report/assets/…` から始まるパスを毎回明示する。** レポートに載せる最終的なものだけでなく、
色の抽出や表示崩れの確認のために一時的に撮るものも例外なく同じ。ディレクトリが無ければ
先に `mkdir -p a11y-report/assets` を実行しておく。詳細は
`references/playwright-workflow.md` の「スクリーンショット」に従う。

### 1. 対象と実施内容の確認

引数から、対象 URL、ログイン情報、対象画面への到達手順、重点確認箇所を読み取る。

```
/a11y-check-page https://app.example.com/ ID:test@example.com / Pass:xxxx でログインして、
                 設定画面の通知タブをチェックしてください
```

読み取れない項目のうち、チェックに必要なものだけを利用者に確認する。

- 対象 URL と、チェックの範囲（単一ページか、操作フロー全体か）
- ログインの要否と資格情報、多要素認証の有無
- 対象画面への到達手順（どのリンクを辿るか、必要な入力値）
- 想定される利用者と利用デバイス（PC のみか、スマートフォンも含むか）
- **破壊的操作の可否**（データの作成・変更・削除、フォームの送信、メール送信、課金）
- 対象が本番環境かどうか

**資格情報とブラウザ操作の安全上の規則は `references/auth-and-safety.md` に従う。
ログインを伴うチェックでは、必ず先にこのファイルを読む。**

### 2. 構成と目的の把握

`browser_navigate` で対象を開き、`browser_snapshot` でアクセシビリティツリーを取得して、
ページの構成と操作可能な要素を把握する。必要に応じて関連ページも巡回する。

重篤度の判定には「そのページの主要な目的」が必要である。目的を把握せずに重篤度は判定できない。

- どんな人が利用するものか
- 利用の目的（フォームの送信か、情報の閲覧か、業務の遂行か）
- 操作の流れ、分岐、ユーザーの操作を受け付ける機構の配置

### 3. 状態バリエーションの列挙

**この手順を飛ばすと、初期表示しか見ないチェックになる。必ず行う。**

確認すべき画面と状態をすべて列挙する。

- 開閉するメニュー、モーダルダイアログ、ドロップダウン、アコーディオン、タブ
- ローディング中、エラー表示、空状態、検索結果あり／なし
- フォームのバリデーションエラー、送信中、送信完了
- PC 表示とモバイル表示（レスポンシブで UI が変わる場合、モバイル用 UI は別のチェック対象）

**対象が複数ページ・複数状態にわたる場合は、「ツールごと」ではなく「画面ごと」に手順を
組み立てる。** つまり、1つの画面・状態を表示するたびに、以下の 4〜8 をまとめて実施する。
対象が単一ページで状態変化もない場合のみ、ツールごとに進めてよい。

### 4. axe-core による自動チェック

同梱の `assets/axe.min.js` を使って axe-core を実行する。**手順は
`references/playwright-workflow.md` の「axe-core の実行」に従う。** 初期表示や URL で再現できる
状態は同梱の `scripts/run-axe.mjs`（Bash から実行）が確実で速い。モーダルを開いた等、状態を
変えた画面は Playwright MCP に注入して実行する。

`violations` は指摘候補、`incomplete` は自動では判定できなかった項目であり、後続の手順で
手動確認する。特にコントラスト比の `incomplete` は手順 5 で必ず確認する。

**状態が変わるたびに実行する。** モーダルを開いた状態、エラーを表示した状態などは、
初期表示のチェックには含まれていない。

axe-core の説明にある修正方法は、そのまま転記しない（筋の悪い解決方法も紹介されているため）。
対象の目的に沿った修正方法を自分で組み立てる。

### 5. 視覚とマウスポインタによる操作

`references/checklist-visual.md` の `page` と `both` の観点を適用する。
スクリーンショットを撮り、ホバーで表示される追加コンテンツの挙動、色のみによる情報伝達、
自動再生や動きの停止手段を確認する。

### 6. キーボードのみによる操作

`references/checklist-keyboard.md` の `page` と `both` の観点を適用する。
**マウス操作とは独立した手順として必ず実施する。** 操作方法は
`references/playwright-workflow.md` の「キーボード操作の確認」に従う。

`Tab` でページの末尾まで、`Shift+Tab` で冒頭まで両方向に移動し、各ステップで
フォーカス位置とフォーカスインジケーターの視認性を確認する。多数の要素をまとめて巡回するには
同梱の `scripts/focus-walk.mjs`（`--reverse` で逆方向も）を使うとよい。

### 7. ズーム、文字サイズ、ウィンドウサイズの変更

`references/checklist-reflow.md` の観点を適用する。注入する CSS とビューポートの設定は
`references/injection-snippets.md` にある。

表示を切り替えるだけでなく、**その状態のまま操作も試す**。モバイル表示に切り替わって
新しい UI（ハンバーガーメニューなど）が現れた場合、その UI は未チェックであり、
手順 4〜6 を改めて適用する。

### 8. 機械可読性の確認

`references/checklist-semantics.md` の観点を適用する。`browser_snapshot` で得られる
アクセシビリティツリーから、ランドマークと見出しのアウトライン、アクセシブルネーム、
ロールと状態を確認する。`lang` とライブリージョンの確認方法は
`references/playwright-workflow.md` にある。

ステータスメッセージ（SEM-12）は、操作の前後でアクセシビリティツリーを比較し、
ライブリージョンとして通知される実装になっているかを確認する。

### 9. レポートの出力

`references/report-format.md` の形式で Markdown ファイルを出力する。重篤度の判定は
`references/severity.md` の手順に従う。**影響するユーザーの多さを考慮に入れてはならない。**

実ページ対象のレポートでは、以下を必ず守る。

- 各指摘に、要素を特定できる情報（CSS セレクタ、アクセシブルネーム、画面上の位置）を記載する
- スクリーンショットは、レポートに載せるものも一時的な確認用のものも、すべて
  `a11y-report/assets/` の下に保存する（`browser_take_screenshot` の `filename` に
  そのパスを毎回明示する）。カレントディレクトリには保存しない
- 「実施しなかった手順」に、スクリーンリーダー実機とハイコントラストモードでの確認を
  行っていないことを明記する
- **資格情報をレポート・スクリーンショット・会話のいずれにも出力しない**
- 使用したブラウザとビューポートサイズ、axe-core のバージョンを記録する

会話には要約のみを出す。

## 各観点について

各観点は `問題あり` / `問題なし` / `判定不能` / `対象なし` の4値で結果を記録する。
**「該当なし」を「問題なし」と書いてはならない。**

観点表の読み方は `references/README-checklist.md` を参照する。
このスキルは `確認手段:` が `page` または `both` の観点を扱う。