@ymrl/a11y-check-skills

Web アクセシビリティチェックのための Claude Code スキル。 人の手によるWebアクセシビリティチェックの手順 を もとに、WCAG 2.2 レベル AA を目安としたチェックを行う。

2つのスキルを提供する。

| スキル | 対象 | 必要なもの | | --- | --- | --- | | a11y-check-code | ソースコード（HTML / JSX / TSX / Vue / Svelte / テンプレート） | なし | | a11y-check-page | 動作している Web ページ | Playwright MCP |

インストール

# プロジェクトの ./.claude/skills/ へ
npx @ymrl/a11y-check-skills install

# すべてのプロジェクトで使えるよう ~/.claude/skills/ へ
npx @ymrl/a11y-check-skills install --user

a11y-check-page を使うには Playwright MCP が必要。

claude mcp add playwright npx @playwright/mcp@latest

使い方

ソースコードをチェックする

/a11y-check-code src/pages/Checkout.tsx
/a11y-check-code src/components/**/*.tsx

指定したファイルから import を辿ってコンポーネントの構成を把握し、条件分岐や state による 表示のバリエーションを列挙したうえで、観点ごとにチェックする。指摘には ファイルパス:行番号 が付く。

コントラスト比は同梱のスクリプトで計算する（目視や暗算では判定しない）。

node scripts/contrast.mjs "#767676" "#ffffff"
node scripts/contrast.mjs "#949494" "#ffffff" --size 24

動作しているページをチェックする

/a11y-check-page https://example.com/

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

Playwright MCP でブラウザを操作し、同梱の axe-core による自動チェック、マウス操作、 キーボードのみでの操作、ズームやリフロー、アクセシビリティツリーの確認を行う。 ログインウォールの先にある画面も、資格情報と到達手順を指示すればチェックできる。

資格情報はレポート・スクリーンショット・会話のいずれにも出力しない。 データの作成・変更・削除・送信を伴う操作は、実行前に必ず確認する。

結果

./a11y-report/YYYY-MM-DD-<対象名>.md にレポートが出力され、会話には要約が表示される。 指摘は重篤度（Critical / Major / Normal / Minor）で整理され、それぞれに 問題の内容、利用者に生じる問題の具体例、修正方法の提案が付く。

判定できなかった観点は「要追加確認」として記録される。a11y-check-code の結果には a11y-check-page への引き継ぎ指示が含まれるので、2つのスキルを続けて使うと、 静的解析で判定できなかった箇所を実ページで確認できる。

このチェックについて

このチェックの目的は、アクセシビリティに関して優先的に対処するべき問題を発見することにある。 このチェックは完全なものではない。

• このチェックを行ったからといって、WCAG 2.2 のいずれの基準に準拠していることを 確認・保証するものではない
• このチェックで問題がなかったからといって、まったく問題がないということにはならない
• WCAG 2.2 や ISO/IEC 40500、JIS X 8341-3 などの基準への準拠を確認するには、 達成基準ごとの確認が必要である
• スクリーンリーダー実機による確認の代替にはならない

開発

pnpm install
pnpm run build   # src/ から skills/ を生成する
pnpm test

skills/ はビルド生成物であり、直接編集しない。src/ を編集する。

src/
├── shared/   両スキルに複製される共通リファレンス（観点表・重篤度・レポート形式）
├── code/     a11y-check-code 固有
└── page/     a11y-check-page 固有

観点表 (src/shared/checklist-*.md) の各項目には SEM-01 のような ID が振られている。 これはレポートおよび2つのスキル間の引き継ぎで参照される識別子であり、変更してはならない。 観点を追加するときは、既存の番号を詰めずに末尾へ追加する。

skills/a11y-check-page/assets/axe.min.js は、ビルド時に node_modules/axe-core から コピーされる。CDN から読み込まないのは、サプライチェーン攻撃を避けるため。 axe-core を更新するには、依存関係を更新して再ビルドする。

ライセンス

ISC