使い方ガイドへスキップ
wcag-audit-patterns作者 Seth Hobson

WCAG Audit Patterns スキル。

Claude Code と Codex 向けのデザインレビュースキル:自動テスト、手動チェック、改善ガイダンスを含む WCAG 2.2 監査を実施します。

  • デザインレビュー & アクセシビリティ
  • レビューレポート
wshobson/agents · plugins/accessibility-compliance/skills/wcag-audit-patterns/SKILL.mdSKILL.md
--- name: wcag-audit-patterns description: Conduct WCAG 2.2 accessibility audits with automated testing, manual verification, and remediation guidance. Use when auditing websites for accessibility, fixing WCAG violations, or implementing accessible design patterns. --- ## When to Use This Skill ## Core Concepts ## Detailed patterns and worked examples ## Best Practices
2026-09-14 に上流ファイルから読み込まれたフロントマターとセクション見出し · 全 2,439 文字

01 できること

Claude CodeおよびCodexにおいてwcag-audit-patterns Skillが行うこと

概要、ワークフロー、出力。いずれもスキルの SKILL.md から読み取った内容です。

SKILL.md より2026年9月14日読取 · 実行記録ではありません

スキル自身の言葉で

このスキルは、自動テスト、手動検証、修正ガイダンスを組み合わせたWCAG 2.2アクセシビリティ監査を実施します。違反を影響度別(重大/ブロッカー、深刻、中程度)に分類し、3つの適合レベル(法的基準となるA、多くの規制に対応するAA、専門的なニーズに対応するAAA)をカバーし、POUR原則(知覚可能、操作可能、理解可能、堅牢)を適用します。

このスキルは、alt属性の欠落、キーボード操作の問題、色のコントラスト不足、見出し階層の不備といった一般的な違反に対応します。セマンティックHTML、障害を持つ実際のユーザーによるテスト、アクセシブルなコンポーネントライブラリの構築を重視しつつ、自動化によって検出できる問題は全体の30〜50%に過ぎないことを認識しています。

生成されるもの

  • 検出された違反に対する実行可能な修正戦略
  • アクセシブルなコンポーネントライブラリのドキュメント
プロンプト例を見る ↗

仕組み

  1. 01
    違反を影響度別に分類する

    問題は、重大(alt属性の欠落やキーボード操作不可などのブロッカー)、深刻(コントラスト不足、スキップリンクの欠落)、中程度(言語属性の欠落、不明瞭なリンクテキスト)に分類されます。

  2. 02
    POUR原則を適用する

    4つの原則に基づいて監査します:知覚可能(ユーザーがコンテンツを認識できるか)、操作可能(ユーザーがインターフェースを操作できるか)、理解可能(ユーザーがコンテンツを理解できるか)、堅牢(支援技術で動作するか)。

  3. 03
    自動テストと手動テストを組み合わせる

    自動ツールは問題の30〜50%を検出しますが、包括的なカバレッジには手動テストが必要です。

  4. 04
    詳細なパターンドキュメントを参照する

    コアコンセプトだけでは不十分な場合、このスキルは実例と詳細なパターンガイダンスについてreferences/details.mdを参照するよう案内します。

02 適合性を確認

wcag-audit-patterns スキルを使用するとき

この種のデザインレビューの作業の場合、Claude Code または Codex で wcag-audit-patterns スキルを使用します。適合範囲と制限は、スキル自身のファイルから取得されています。

適している場合

  • ウェブコンテンツのアクセシビリティ監査を実施する
  • 既存のインターフェースにおけるWCAG違反を修正する
  • ADAまたはSection 508の規制要件を満たす
  • アクセシビリティ訴訟への準備
  • VPAT準拠ドキュメントを作成する

    03 スキルの内部

    wcag-audit-patternsスキルがClaude CodeとCodexに与えるルール

    SKILL.md がエージェントに設定する 8 つの具体的な指示・既定値・制限 — 結果を変える部分です。

    1. デザインフェーズでアクセシビリティに着手する

      アクセシビリティは、後から手直しとして追加するのではなく、デザインフェーズの早い段階で組み込む必要があります。

    2. まずセマンティックHTMLを使用する

      ネイティブのHTML要素は、ARIAの必要性を減らし、より優れたアクセシビリティサポートを提供するため、デフォルトの選択肢とすべきです。

    3. 自動テストだけに依存しない

      自動ツールで検出できるアクセシビリティの問題は30〜50%に過ぎないため、手動テストが必要です。

    4. ARIAより先にネイティブHTMLを

      ARIAは最初の解決策として使用すべきではなく、可能な限りネイティブのHTML要素を優先してください。

    5. フォーカスアウトラインを保持する

      キーボードユーザーはナビゲーションのためにフォーカスアウトラインを必要とするため、非表示にしてはいけません。

    6. ズームを無効化しない

      ユーザーはコンテンツを拡大縮小できる必要があるため、ズーム機能を無効化することはできません。

    7. 色以外の複数の指標

      色だけで情報を伝えることはできません。複数の指標を組み合わせる必要があります。

    8. 障がいのあるユーザーでテストする

      障がいのある実際のユーザーは最良のフィードバックを提供するため、テストに含めるべきです。

    04 実際に使う

    Claude Code または Codex に wcag-audit-patterns をインストール

    npx skills add コマンドを実行し、エージェントで最初のタスクを実行して、結果をチェックリストで確認します。

    Claude Code、Codex、または使用中のエージェントに wcag-audit-patterns を追加

    プロジェクトで実行してください。インストーラーが、どのエージェントに追加するかを尋ねます。

    Terminal
    npx skills add https://github.com/wshobson/agents --skill wcag-audit-patterns

    plugins/accessibility-compliance/skills/wcag-audit-patterns/SKILL.md用の汎用的なskills CLI形式です。リポジトリによっては独自のパスが記載されている場合があります。

    スキルに最初のデザインレビュータスクを与える

    スキル自身の用語で記述されています。角括弧の部分はご自身の内容に置き換えてください。

    Starter prompt
    Audit [website URL or component name] against WCAG 2.2 AA standards. Identify all Critical and Serious violations including missing alt text, keyboard access issues, and color contrast failures. For each violation, provide the specific WCAG success criterion, the impact on users with disabilities, and concrete remediation code. Prioritize issues that would block screen reader users.

    出典:SKILL.md をスキル自身の用語に沿って記述。

    最初の結果を確認

    SKILL.md 自体が正しい結果として示しているもの:

    • 堅牢な実装のため、支援技術との互換性を確認してください

    OpenDesignでは、wcag-audit-patternsをそのSKILL.mdリンクからインポートしてください:Plugins → Add → Skill → Import from link。その後、トップバーで選択します。

    05 オープンソースで追跡可能

    ソース、ライセンス、検証

    このページの情報の出所と、最終確認日時です。

    Repository
    github.com/wshobson/agents ブランチ main
    スキルファイル
    plugins/accessibility-compliance/skills/wcag-audit-patterns/SKILL.md 検証時に記録されたコンテンツチェックサム;コミット 4236bb9
    License
    MIT LICENSE より
    リポジトリスター数
    39,635 wshobson/agents リポジトリ全体の GitHub スナップショット(2026-09-14 取得)。このカタログには 18 のスキルが含まれています。wcag-audit-patterns の評価や使用回数ではありません。
    OpenDesign により検証済み
    2026-09-14 ソースファイル、パス、ライセンステキスト、スター数を確認済み。OpenDesign 本体にはバンドルされていません(2026-08-28 確認)。このページには実行記録がありません。

    SKILL.md の中身

    1. このスキルを使用する場面監査、違反の修正、規制要件への対応など、6つのシナリオを掲載しています
    2. コアコンセプト3つの適合レベル、POUR原則、影響度別の一般的な違反を定義しています
    3. WCAG適合レベルLevel Aは法的な最低基準、AAは規制の標準、AAAは特殊なニーズ向けです
    4. POUR原則知覚可能、操作可能、理解可能、堅牢という4つの原則と、それぞれの指針となる問いです
    5. 影響度別の一般的な違反問題を重大なブロッカー、深刻、中程度に分類し、具体例を示しています
    6. 詳細なパターンと実例詳しいパターンのドキュメントはreferences/details.mdを参照してください
    7. ベストプラクティスアクセシブルな開発のための5つのDoと5つのDon'tを掲載しています
    スキル自身による説明
    「WCAG 2.2 アクセシビリティ監査を自動テスト、手動検証、修正ガイダンスで実施します。ウェブサイトのアクセシビリティ監査、WCAG 違反の修正、アクセシブルなデザインパターンの実装に使用します。」

    SKILL.md の front-matter 記述です。完全なファイルは約 2,439 文字です。GitHub で完全なファイルを読む

    06 インストールする前に

    wcag-audit-patternsスキルに関するよくある質問

    回答は 2026-09-14 時点で読んだ SKILL.md に基づくもので、記録された実行結果によるものではありません。

    どのWCAG適合レベルを目指すべきですか?

    Level AAは、ほとんどの規制で求められる標準的な適合レベルです。Level Aは法的な最低基準であり、Level AAAは特殊なニーズがある場合のみ必要です。ADAやSection 508の要件の大半は、AA適合で満たされます。

    WCAG Audit Patterns

    実際のデザインレビュータスクで wcag-audit-patterns を実行してみましょう。

    OpenDesign をダウンロードし、SKILL.md リンクから wcag-audit-patterns をインポートし、上記のプロンプトを貼り付けて、結果の前に計画を確認してください。

    ターミナル
    npx skills add https://github.com/wshobson/agents --skill wcag-audit-patterns

    OpenDesign デスクトップ版

    ひとつのデザインシステムで、すべての制作物をブランドらしく

    完全な Vibe Design Workspace で、同じブランドルールを Web サイト、スライド、操作できるプロトタイプ、ダッシュボード、画像、HTML 動画に展開できます。ローカルの Codex、Claude Code、Cursor などを接続して無料で制作しましょう。

    • Web、スライド、プロトタイプ、ダッシュボード、画像、動画
    • 140+ のデザインシステムと完全なテンプレート/スキルライブラリ
    • ローカル Codex と 21+ のコーディングエージェントを接続 · 無料
    無料ダウンロード

    macOS と Windows に対応