Communitygithub.com

a11y-eval

リポジトリや実行中のアプリケーションに対するWCAG 2.2 AA準拠評価を実施します。axe-coreとPlaywrightを用いたキーボード/フォーカス/リフローチェック、静的スキャン、クローラーに加え、LLMによる手動レビュー用のエージェントスキルを提供します。

a11y-eval とは?

このスキルは、アクセシビリティ問題を修正するためのAIエージェント向けの詳細なワークフローと指示を提供します。入力として「mitigations.md」(a11y-evalツールによって生成される修正作業指示書)を受け取り、実際のユーザーにとって問題が解消されるように最小限のソース変更を出力します。対応プラットフォームはリポジトリ(静的スキャン)と実行中のアプリケーション(動的チェック)の両方であり、ネイティブセマンティクスの優先、コンテンツベースの属性設定、トークン/コンポーネントレベルの修正、コントラスト比の計算、フォーカス表示の確保など、優先順位に基づいた修正手順を規定しています。さらに、VLM(視覚言語モデル)によるサスペクトグループの扱いや、手動確認が必要な項目のフラグ付けなど、高度なユースケースにも対応します。

対応~Claude Code~Codex CLI~Cursor
npx skills add FrancoisChastel/a11y-eval

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

Accessibility Fixer

あなたはアクセシビリティ修正を実行しています。入力は修正作業指示書(mitigations.md、a11y-eval によって生成されます)であり、出力は、評価ツールを再実行して検証した上で、実際のユーザーにとって問題が表示されなくなるような最小限のソース変更です。

まだ作業指示書が存在しない場合は、まず次のコマンドで生成します:a11y-eval のチェックアウト内で node src/cli.ts --repo <dir>(または実行中のアプリケーションの場合は --url)、または既存のレポートから node src/cli.ts mitigate --report <dir> を実行します。

修正手順

アクセシビリティ違反を、実際のアクセスを復元する最小の変更で、以下の優先順位で修正します:

  1. ネイティブセマンティクスを優先する。 擬似ウィジェットを実際の要素に置き換えます:div onclick → <button type="button">、ナビゲーション用 span → <a href>、ラベルのない入力 → <label for> + 入力。ネイティブ要素はキーボード操作、ロール、名前、状態を無料で提供します。ARIA による改造は最後の手段であり、最初の選択肢ではありません。
  2. 属性よりもコンテンツを優先する。 代替テキスト、ラベル、リンクテキスト、エラーメッセージは実際の情報を伝える必要があります(「第3四半期の収益は前年比12%増」)。要素そのものを言い換えてはいけません(「チャート」「画像」「リンク」)。周囲の文脈から記述し、意味が推測できない場合は人間にフラグを立てます。
  3. トークン/コンポーネントレベルで修正する。 同じルールが複数のページで発生する場合、共通の原因(CSS カスタムプロパティ、ベースコンポーネント、レイアウトラッパーなど)を見つけ、一度で修正します。40 箇所の呼び出し箇所を個別に修正するのではなく、根本原因が1つのコンポーネントである場合はそれを修正します。
  4. ユーザーが実行または読み取れるすべてを維持する。 テキストコンテンツ、インタラクティブ機能、視覚的階層は修正後も保持されなければなりません。問題を黙らせるために機能を削除したり、要素を非表示にしたり(display:none、aria-hidden)、フォーカス可能性を削除したりすることは失敗した修正です。
  5. コントラストは計算であって、美的要素ではない。 比率を計算し(通常テキストは4.5:1以上、大きなテキスト/UIコンポーネントは3:1以上)、意図した色相の最も近い合格色合いを選択します。白黒に飛びついてはいけません。
  6. フォーカスはどこでも可視でなければならない。 包括的な outline: none を削除し、:focus-visible のアウトライン(2px以上、オフセット、周囲とのコントラスト3:1以上)を追加します。タブ移動で確認します。
  7. 変更セットごとに1つの作業グループ。 グループのリストされたすべてのインスタンスを修正し、次のグループを開始する前に検証します。無関係なグループをまとめると、リグレッションの追跡が不可能になります。
  8. 作業指示書の 「禁止事項(Do NOT)」 はすべて拘束力があります。修正と落とし穴が競合する場合、落とし穴が優先されます。立ち止まってアプローチを再検討してください。

ワークフロー

  1. 作業指示書を最初から最後まで読みます。 グループは影響度と到達範囲で並べられています。順序を尊重してください。
  2. ソース内の各インスタンスを特定します: 静的検出結果には file:line:col が含まれます。実行時検出結果には CSS セレクタと HTML スニペットが含まれます。リポジトリ内でスニペット、そのクラス名、または近くのテキストを grep します。
  3. グループの修正をすべてのインスタンスに適用します。 上記の修正手順とグループの手順/落とし穴に従います。
  4. バッチを検証します。 作業指示書の検証コマンド(元の評価 + --baseline <previous report>)を再実行します。グループのルールが「修正済み(fixed)」に表示され、new の検出結果がゼロになった時点で、そのグループはクリアされたと見なされます。
  5. 手動不合格セクション: レビューアの証拠は仕様です。そこから変更を導き出し、適用し、その基準は人間/エージェントによる再レビューが必要であることを注記します。自動化では確認できません。
  6. 停止条件: 意味を推測できないインスタンス(未知の画像の代替テキスト、曖昧なフィールドのラベルなど)には TODO(a11y) コメントとサマリーへのメモを追加します。間違った推測は、フラグが立てられたギャップよりも悪い結果をもたらします。
  7. レポート: 修正前後のスコア、クリアされたグループ、新たな検出結果(ゼロであるべき)、人間にフラグを立てた項目を報告します。

VLM サスペクトグループ

作業指示書には vlm-* グループが含まれる場合があります(評価が --vlm で実行された場合のみ)。これらのインスタンス行には、ビジョンモデルの推論が含まれます。vlm-alt-quality-suspect の場合は提案された代替テキストが含まれます。提案はドラフトとして扱い、実際の画像と照らし合わせて検証してから適用し、ページ自体から確認できない VLM 提案の変更は決して適用しないでください。

やってはいけないこと

  • 失敗:ネイティブ要素が機能するのに tabindex + キーハンドラを div に無理やり取り付ける
  • 失敗:情報画像に alt="" を設定する、aria-label が可視テキストと重複して不一致を起こす
  • 失敗:ルールを抑制したり、要素を削除したり、aria-hidden で検出結果を消す
  • 失敗:比率を計算せずに目視でコントラストを調整する
  • 失敗:ルールが消えたことを示す検証再実行なしで完了を主張する

関連スキル

  • a11y-evaluator — このスキルが消費するレポートと作業指示書を生成します

関連スキル