使い方ガイドへスキップ
accessibility-compliance作者 Seth Hobson

Accessibility Compliance スキル。

デザインレビューのための Claude Code と Codex スキル:モバイルアクセシビリティと支援技術対応を備えた WCAG 2.2 準拠のインターフェースを実現します。

  • デザインレビュー & アクセシビリティ
  • UI コード
wshobson/agents · plugins/ui-design/skills/accessibility-compliance/SKILL.mdSKILL.md
--- name: accessibility-compliance description: Implement WCAG 2.2 compliant interfaces with mobile accessibility, inclusive design patterns, and assistive technology support. Use when auditing accessibility, implementing ARIA patterns, building for screen readers, or ensuring inclusive user experiences. --- ## When to Use This Skill ## Detailed patterns and worked examples ## Best Practices ## Testing Tools
2026年9月14日にアップストリームファイルから読み取られたフロントマターとセクション見出し · 全2,402文字

01 できること

accessibility-compliance スキルが Claude Code と Codex で行うこと

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

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

スキル自身の言葉で

このスキルは、モバイルアクセシビリティと支援技術のサポートを備えた WCAG 2.2 準拠のインターフェースを実装します。セマンティック HTML、ARIA パターン、キーボードナビゲーション、フォーカス管理、スクリーンリーダー互換性、動的コンテンツのアナウンスを通じてエージェントを導きます。iOS VoiceOver、Android TalkBack、デスクトップのスクリーンリーダー(NVDA、JAWS)を対象としています。

カスタム ARIA よりもネイティブ要素を重視し、prefers-reduced-motion や prefers-contrast といったユーザー設定を尊重したうえで、自動化ツール(axe DevTools、WAVE、Lighthouse)と実際の支援技術によるテストを行います。このスキルは、alt テキストの欠落、コントラスト不足、キーボードトラップ、ラベルのないフォーム入力など、よくある違反に対処します。

生成されるもの

  • 適切な ARIA パターン、フォーカス管理、スクリーンリーダー対応を備えた WCAG 2.2 準拠のインターフェース
プロンプト例を見る ↗

仕組み

  1. 01
    キーボードファーストのインタラクションを設計する

    すべてのインタラクティブコンポーネントがマウスなしで動作するようにし、ポインターイベントを追加する前にキーボードナビゲーションを確立します。

02 適合性を確認

accessibility-compliance スキルを使用するタイミング

この種のデザインレビュー業務には、Claude CodeまたはCodexでaccessibility-complianceスキルを使用してください。適合範囲と制限は、スキル自身のファイルから抜粋しています。

適している場合

  • Web アプリケーションやサイトで WCAG 2.2 のレベル AA または AAA 準拠を実装する
  • VoiceOver、NVDA、JAWS、TalkBack で動作するスクリーンリーダー対応のインターフェースを構築する
  • インタラクティブコンポーネントにキーボードナビゲーションとフォーカス管理を追加する
  • 既存のインターフェースのアクセシビリティ監査を実施し、違反を修正する
  • インターフェースでモーションの低減やハイコントラストといったユーザー設定をサポートする

    03 スキルの内部

    accessibility-compliance スキルがデザインレビューにもたらすもの

    SKILL.md が Claude Code または Codex に指示する 2 つのこと(ファイル内のセクション順)

    1. ベストプラクティス

      可能な限り ARIA よりもネイティブ要素を優先する;障害を持つ人々をユーザーテストに含める;マウスなしで動作するインタラクションを設計する

    2. テストツール

      axe DevTools、WAVE、Lighthouse;VoiceOver(macOS/iOS)、NVDA/JAWS(Windows)、TalkBack(Android);NoCoffee(視覚)、Silktide(さまざまな障害)

    04 実際に使う

    Claude Code または Codex に accessibility-compliance をインストール

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

    Claude Code、Codex またはあなたのエージェントに accessibility-compliance を追加

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

    Terminal
    npx skills add https://github.com/wshobson/agents --skill accessibility-compliance

    plugins/ui-design/skills/accessibility-compliance/SKILL.md 向けの汎用的な skills CLI 形式です。リポジトリ側で独自のパスが示されている場合もあります。

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

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

    Starter prompt
    Audit the [product dashboard] for WCAG 2.2 Level AA compliance. Check for missing alt text, color contrast violations, keyboard traps, and unlabeled form inputs. Implement focus management for the [modal dialog component] and add ARIA live regions to announce [real-time notification updates]. Test with VoiceOver and ensure the interface respects prefers-reduced-motion.

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

    最初の結果を確認

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

    • macOS または iOS の VoiceOver で手動テストし、スクリーンリーダーの読み上げとナビゲーションを確認する
    • NoCoffee などの視覚シミュレーターや Silktide などの障害シミュレーターを使い、さまざまな障害をテストする

    OpenDesign の場合は、SKILL.md のリンクから accessibility-compliance をインポートします:Plugins → Add → Skill → Import from link。その後、上部バーで選択します。

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

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

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

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

    SKILL.md の中身

    1. このスキルを使う場面WCAG 準拠、スクリーンリーダー、キーボードナビゲーション、フォーカス管理、フォーム、モバイルアクセシビリティ、監査
    2. 詳細なパターンと実例トップレベルのガイダンスで不十分な場合は、references/details.md のパターン解説を参照します
    3. ベストプラクティス8 つの基本ルール:セマンティック HTML、実際のユーザーによるテスト、キーボードファースト、フォーカススタイル、テキストによる代替、ズーム、ライブリージョン、ユーザー設定
    4. よくある問題alt テキストの欠落、コントラスト不足、キーボードトラップ、ラベルのない入力、自動再生、不適切なカスタムコントロール、スキップリンク、フォーカス順序
    5. テストツール自動化ツール(axe、WAVE、Lighthouse)、手動でのスクリーンリーダー(VoiceOver、NVDA、JAWS、TalkBack)、シミュレーター(NoCoffee、Silktide)
    スキル自身による説明
    「モバイルアクセシビリティ、インクルーシブデザインパターン、支援技術サポートを備えたWCAG 2.2準拠のインターフェースを実装します。アクセシビリティ監査、ARIAパターン実装、スクリーンリーダー対応構築、インクルーシブなユーザー体験の確保時に使用します。」

    SKILL.md のフロントマター説明。完全なファイルは約 2,402 文字です。GitHub で完全なファイルを読む。

    アクセシビリティコンプライアンス

    実際のデザインレビュータスクで accessibility-compliance を実行します。

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

    ターミナル
    npx skills add https://github.com/wshobson/agents --skill accessibility-compliance

    OpenDesign デスクトップ版

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

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

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

    macOS と Windows に対応