Communitygithub.com

webflow/webflow-skills（アクセシビリティ監査）

Webflowページに対して包括的なアクセシビリティ監査（WCAG 2.1）を実行します。ボタン、フォーム、リンク、フォーカス状態、見出し、キーボードナビゲーションをチェックし、修正を含む詳細なレポートを生成します。ページIDを指定してヘッドレスで動作するため、Designer接続は不要です。画像のaltテキストは対象外です（asset-auditスキルで対応）。

webflow-skills（アクセシビリティ監査） とは？

このスキルは、Webflowで構築されたWebページに対してWCAG 2.1に準拠した包括的なアクセシビリティ監査を実行します。ボタン、フォーム入力、リンク、見出し、キーボードナビゲーション、ARIA属性、フォーカススタイル、タッチターゲットサイズなど、13種類以上のチェック項目を自動的に検出し、各問題に対して具体的な修正案を提供します。特に、Webflow MCPのツール群（data_element_toolなど）を活用してDesigner接続なしで完全にヘッドレス動作する点が特徴で、ページIDを指定するだけで監査と修正の適用が可能です。監査結果はクリティカル、シリアス、モデレートの3段階で分類され、0～100のアクセシビリティスコアとともに詳細なレポートとして出力されます。また、修正の自動適用機能も備えており、ユーザーの承認を得た上で、`set_attributes`アクションを使って問題を修正できます。このスキルはClaude Code、Cursor、CodexなどのAIエージェント向けに設計されており、開発者は迅速にアクセシビリティ問題を特定し、修正できます。ただし、画像のaltテキストやカラーコントラスト比など、視覚的な分析が必要な項目は対象外であるため、他のスキル（asset-auditなど）と組み合わせて使用することが推奨されます。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/webflow/webflow-skills/tree/HEAD/plugins/webflow-skills/skills/accessibility-audit
オリジナルを見る→すべてのスキルを見る

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

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

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

ドキュメント

アクセシビリティ監査

Webflowページ向けのWCAG 2.1包括的アクセシビリティ監査。問題の詳細な検出と実行可能な修正案を提供します。

重要な注意点

すべての操作にはWebflow MCPツールを使用してください:

  • 開始前にWebflow MCPの webflow_guide_tool を使用してベストプラクティスを確認
  • Webflow MCPの data_sites_tool をアクション list_sites で使用して利用可能なサイトを特定
  • Webflow MCPの data_sites_tool をアクション get_site で使用してサイト詳細を取得
  • Webflow MCPの data_pages_tool をアクション list_pages で使用して全ページとそのページIDを取得
  • Webflow MCPの data_element_tool をアクション get_all_elements（ページIDを直接渡す）で使用して詳細な要素情報を取得
  • Webflow MCPの data_element_tool をアクション set_attributes で使用してアクセシビリティ問題を修正
  • Webflow MCPの element_snapshot_tool で要素のビジュアルプレビューを取得 — これはDesignerツールであり、使用するにはDesigner接続が必要
  • Webflow操作には他のツールやメソッドを使用しないでください
  • すべてのツールコールには必須の context パラメータ（15～25語、第三人称）を含める必要があります
  • 監査や修正にDesigner接続は不要です。 data_element_tool は list_pages で取得した任意のページIDに対してヘッドレスで動作します。Designerは、オプションのビジュアルプレビューに element_snapshot_tool を使用する場合にのみ必要です。

指示

フェーズ1：サイト・ページ選択

  1. サイト情報を取得: Webflow MCPの data_sites_tool をアクション list_sites で使用して対象サイトを特定
  2. ページ選択を依頼:
    • ユーザーがページIDを指定した場合は直接使用
    • それ以外の場合は data_pages_tool をアクション list_pages で使用して利用可能なページを表示
    • ユーザーに監査するページを選択させる
  3. 監査範囲を確認: ユーザーに何をチェックするか尋ねる:
    • 完全監査（すべてのアクセシビリティチェック）
    • クリティカルな問題のみ（WCAGレベルA）
    • 特定カテゴリ（フォーム、ボタン、ナビゲーションなど）

フェーズ2：要素抽出・分析

  1. 全要素を抽出: data_element_tool をアクション get_all_elements で使用し、フェーズ1で取得した対象ページのIDを渡して詳細分析を行う — Designer接続は不要
    • include_style_properties: true を設定してフォーカススタイルをチェック
    • include_all_breakpoint_styles: false を設定してデータ量を最小化
  2. 要素データを解析: インタラクティブ要素とコンテンツ要素を特定:
    • ボタン（Button、ボタンロールを持つLinkBlock）
    • リンク（TextLink、Link、LinkBlock）
    • フォーム入力（Input、Select、Textarea）
    • 見出し（Heading要素、レベルあり）
    • インタラクティブなdiv/span（onClickやインタラクティブなロールをチェック）
    • 画像（Image要素） — この監査ではスキップ
  3. 各要素の属性を抽出:
    • ARIA属性（aria-label、aria-describedby、role、tabIndex）
    • DOM属性（id、domId、href、type、placeholder）
    • テキストコンテンツ
    • スタイルプロパティ（フォーカス状態のoutline、border）
    • 要素メタデータ（canHaveAttributes、タグ名）

フェーズ3：アクセシビリティチェック

クリティカルな問題（修正必須 - WCAGレベルA）

  1. アイコンのみのボタンにラベルがない（WCAG 4.1.2）

    • 検出: テキストコンテンツがないボタン要素
    • 確認: aria-label または aria-labelledby の欠落
    • 影響: スクリーンリーダーがボタンの目的を識別できない
    • 修正: 説明テキストを指定した aria-label 属性を追加

  2. フォーム入力にラベルがない（WCAG 1.3.1）

    • 検出: Input、Select、Textarea要素
    • 確認: 関連付けられたラベルまたは aria-label の欠落
    • 影響: ユーザーが入力の目的を把握できない
    • 修正: aria-label を追加するか、id を使用して <label> と関連付ける

  3. 非セマンティックなクリックハンドラ（WCAG 2.1.1）

    • 検出: Div または Span 要素（要素タイプで識別）
    • 確認: 適切なロールやキーボードサポートがないインタラクティブな動作
    • 影響: キーボードでアクセス不可、スクリーンリーダーがインタラクティブ性を見逃す
    • 修正: role="button" と tabIndex="0" を追加し、実際の <button> の使用を提案

  4. リンクに移動先がない（WCAG 2.1.1）

    • 検出: href 属性がないリンク要素
    • 確認: onClickのみでhrefがないリンク
    • 影響: キーボードでアクセス不可、ブラウザ機能が使えない
    • 修正: 適切な href を追加、またはボタンに変換

重大な問題（修正推奨 - WCAGレベルAA）

  1. フォーカスアウトラインが代替なしに削除されている（WCAG 2.4.7）

    • 検出: outline: none スタイルが設定された要素
    • 確認: 可視の代替フォーカスインジケータがない
    • 影響: キーボードユーザーがフォーカスを見失う
    • 修正: 可視のフォーカススタイルを追加（border、box-shadow、background変更）

  2. キーボードハンドラの欠落（WCAG 2.1.1）

    • 検出: onClickハンドラを持つ要素
    • 確認: Enter/Spaceキー用のonKeyDownの欠落
    • 影響: キーボードのみでは操作不可
    • 修正: キーボードイベントハンドラを追加

  3. タッチターゲットが小さすぎる（WCAG 2.5.5）

    • 検出: クリック可能な要素（ボタン、リンク）
    • 確認: 幅または高さが44px未満
    • 影響: モバイル端末でタップが困難
    • 修正: paddingやmin-width/min-heightを44pxに増加

中程度の問題（修正を検討）

  1. 見出し階層の問題（WCAG 1.3.1）

    • 検出: 見出し要素（h1～h6）
    • 確認: レベルがスキップされている（h1 → h3、h2を飛ばす）
    • 影響: 文書構造が混乱する
    • 修正: 適切な順序で見出しレベルを使用

  2. 正のtabIndex（WCAG 2.4.3）

    • 検出: tabIndex > 0 の要素
    • 確認: 自然なタブ順序を乱す
    • 影響: キーボードナビゲーションが混乱する
    • 修正: tabIndex="0" または "-1" のみを使用し、自然なDOM順序に従う

  3. 必要な属性がないロール（WCAG 4.1.2）

    • 検出: ARIAロールを持つ要素
    • 確認: 必須ARIA属性の欠落（例：role="button" なのにtabIndexがない）
    • 影響: 不完全なアクセシビリティセマンティクス
    • 修正: ロールに必要な属性を追加

フェーズ4：問題の分類とスコアリング

  1. すべての発見を分類:

    • クリティカル: 修正必須（アクセスを妨げる）
    • 重大: 修正推奨（ユーザビリティに大きく影響）
    • 中程度: 修正を検討（エクスペリエンスを向上）

  2. アクセシビリティスコアを計算（0～100）:

    • 100からスタート
    • クリティカルな問題: 各 -10点
    • 重大な問題: 各 -5点
    • 中程度の問題: 各 -2点
    • 最低スコア: 0

  3. 重要度のサマリーを生成:

    • 検出された問題の総数
    • 重要度別の内訳
    • 最も一般的な問題タイプ
    • 最も影響を受けたページ/セクション

フェーズ5：レポート生成

  1. 詳細レポートを作成（以下の形式で）:

    ═══════════════════════════════════════════════════
アクセシビリティ監査: [ページ名]
═══════════════════════════════════════════════════

クリティカル（X件）
───────────────────
[A11Y] 要素: ボタン "送信"
  問題: ボタンにアクセシブルな名前がない
  場所: フォームセクション、要素ID: {component: "abc", element: "xyz"}
  現在: <button><CloseIcon /></button>
  修正: aria-label="閉じる" を追加
  WCAG: 4.1.2 名前、役割、値

[A11Y] 要素: 入力フィールド
  問題: フォーム入力にラベルがない
  場所: お問い合わせフォーム、要素ID: {component: "def", element: "uvw"}
  現在: <input type="email" />
  修正: aria-label="メールアドレス" を追加、または <label> と関連付け
  WCAG: 1.3.1 情報と関係性

重大（X件）
──────────────────
[A11Y] 要素: リンク "続きを読む"
  問題: フォーカスアウトラインが可視の代替なしに削除されている
  場所: ブログセクション
  現在: outline: none
  修正: 可視のフォーカススタイルを追加（例: border: 2px solid blue）
  WCAG: 2.4.7 フォーカスの可視化

中程度（X件）
───────────────────
[A11Y] 要素: 見出し
  問題: 見出し階層がスキップされている（h1 → h3）
  場所: 記事セクション
  現在: <h1>タイトル</h1> の後に <h3>サブセクション</h3>
  修正: <h2> に変更するか、中間のh2を追加
  WCAG: 1.3.1 情報と関係性

═══════════════════════════════════════════════════
サマリー
───────────────────────────────────────────────────
問題の総数: X件
- クリティカル: X件
- 重大: X件
- 中程度: X件

アクセシビリティスコア: XX/100

最も一般的な問題:
1. [問題タイプ] - X件
2. [問題タイプ] - X件
3. [問題タイプ] - X件
═══════════════════════════════════════════════════

  2. 実行可能なインサイトを提供:

    • 優先順位付きの修正リスト（クリティカルから）
    • すぐにできる簡単な修正（影響が大きいもの）
    • デザインパターンの推奨
    • 学習用リソース

フェーズ6：修正提案と承認（オプション）

  1. 問題の自動修正を提案: 修正にDesignerは不要なため、自動修正を直接提案

  2. 修正のプレビューを表示:

    どの問題を修正しますか？

[1] ✓ 送信ボタンにaria-labelを追加
    要素: お問い合わせフォームのボタン
    修正: aria-label="お問い合わせフォームを送信" を追加
    安全性: はい（属性追加のみ）

[2] ✓ メール入力にaria-labelを追加
    要素: お問い合わせフォームの入力
    修正: aria-label="メールアドレス" を追加
    安全性: はい

[3] ⚠️ 見出し階層を修正
    要素: 記事セクションのh3
    修正: 見出しレベルをh3からh2に変更
    安全性: 視覚スタイルに影響する可能性あり

スキップする番号を入力（例: "3"）、"すべて"で全件、"なし"でキャンセル

  3. 承認された修正を適用: data_element_tool をアクション set_attributes で使用

    • バッチで処理
    • 大規模な修正セットの進捗を表示
    • 各修正の成功/失敗を報告

  4. 修正後のレポートを生成:

    • 修正された問題: X件
    • 残りの問題: Y件
    • 新しいアクセシビリティスコア: XX/100（YY/100から改善）

フェーズ7：エクスポートとリソース（オプション）

  1. エクスポート形式を提供:

    • Markdown（読みやすいドキュメント）
    • JSON（機械可読、追跡用）
    • CSV（チームレビュー用スプレッドシート）

  2. リソースを提供:

    • WCAG 2.1 クイックリファレンスリンク
    • Webflowアクセシビリティのベストプラクティス
    • 推奨テストツール（ブラウザ拡張機能、スクリーンリーダー）

重要な考慮事項

このスキルがチェックする項目

✅ ボタンのアクセシビリティ（ラベル、ロール） ✅ フォーム入力のラベルと関連付け ✅ リンクのセマンティクスとキーボードアクセス ✅ フォーカスの可視性とキーボードナビゲーション ✅ 見出し階層と構造 ✅ ARIAロールと属性 ✅ タッチターゲットサイズ ✅ インタラクティブ要素のセマンティクス

このスキルがチェックしない項目

❌ 画像altテキスト（代わりに asset-audit スキルを使用） ❌ カラーコントラスト比（視覚的分析が必要） ❌ アニメーション/モーション設定 ❌ スクリーンリーダーテスト（手動検証が必要） ❌ コンテンツの可読性（言語レベル、明確さ）

制限事項

  • 視覚的な問題（カラーコントラスト、小さなテキスト）を検出できない
  • 実際のスクリーンリーダーの動作をテストできない
  • コンテンツの品質や明確さを検証できない
  • 要素の属性と構造のみに依存する

例

例1: 完全なページ監査

ユーザープロンプト:

ランディングページのアクセシビリティ監査を実行してください

ステップ1: サイト・ページ選択

🔍 アクセシビリティ監査: ページ選択

ホームページのアクセシビリティ監査を支援します。

まず、サイト情報を取得します...

利用可能なサイト:
1. 会社ウェブサイト
2. ポートフォリオサイト

どのサイトですか？（1/2）

ユーザー応答: 1

ステップ2: ページ選択

会社ウェブサイトの利用可能なページ:
1. ホーム (/) 
2. 会社概要 (/about)
3. お問い合わせ (/contact)
4. ブログ (/blog)

どのページを監査しますか？（1: ホーム）

ユーザー応答: 1

ステップ3: 監査範囲

どのレベルの監査を希望しますか？

1. 完全監査（すべてのWCAGチェック） - 推奨
2. クリティカルな問題のみ（レベルA準拠）
3. 特定カテゴリ（ボタン、フォーム、ナビゲーション）

選択:（1/2/3）

ユーザー応答: 1

ステップ4: 監査の進捗

🔄 アクセシビリティ監査を実行中...

進捗:
✅ ページコンテンツを抽出（45要素）
✅ ボタンとインタラクティブ要素を分析中
✅ フォーム入力とラベルをチェック中
✅ 見出し階層を検証中
✅ キーボードナビゲーションをチェック中
🔄 フォーカス状態を分析中...

分析完了！

ステップ5: レポート

═══════════════════════════════════════════════════
アクセシビリティ監査: ホーム
═══════════════════════════════════════════════════

クリティカル（3件）
───────────────────
[A11Y] 要素: ボタン（ナビゲーショントグル）
  問題: アイコンのみのボタンにアクセシブルな名前がない
  場所: ヘッダーナビゲーション
  要素ID: {component: "nav-01", element: "btn-menu"}
  現在: <button><MenuIcon /></button>
  修正: aria-label="ナビゲーションメニューを開く" を追加
  WCAG: 4.1.2 名前、役割、値

[A11Y] 要素: 入力（メール購読）
  問題: フォーム入力にラベルがない
  場所: フッター、ニュースレター登録
  要素ID: {component: "footer-01", element: "email-input"}
  現在: <input type="email" placeholder="メールアドレスを入力" />
  修正: aria-label="ニュースレターのメールアドレス" を追加
  WCAG: 1.3.1 情報と関係性

[A11Y] 要素: Div（クリック可能なカード）
  問題: 非セマンティックなインタラクティブ要素
  場所: サービスセクション、カード2
  要素ID: {component: "services-01", element: "card-02"}
  現在: <div onClick={...}>サービスカード</div>
  修正: <button> に変換するか、role="button" + tabIndex="0" を追加
  WCAG: 2.1.1 キーボード

重大（5件）
──────────────────
[A11Y] 要素: リンク "もっと詳しく"
  問題: フォーカスアウトラインが可視の代替なしに削除されている
  場所: ヒーローセクション
  要素ID: {component: "hero-01", element: "cta-link"}
  現在: outline: none
  修正: フォーカススタイルを追加 - border: 2px solid #0066cc または box-shadow
  WCAG: 2.4.7 フォーカスの可視化

[A11Y] 要素: ボタン "購読"
  問題: タッチターゲットが小さすぎる（30px × 36px）
  場所: フッターニュースレターフォーム
  要素ID: {component: "footer-01", element: "submit-btn"}
  現在: 小さなボタン
  修正: paddingを増やすか、min-height: 44px を設定
  WCAG: 2.5.5 ターゲットサイズ

[さらに3件の重大な問題が続く...]

中程度（4件）
───────────────────
[A11Y] 要素: 見出し "私たちのサービス"
  問題: 見出し階層がスキップされている（h1 → h3）
  場所: サービスセクション
  要素ID: {component: "services-01", element: "heading"}
  現在: <h1>ようこそ</h1> の後に <h3>私たちのサービス</h3>
  修正: <h2> に変更するか、中間のh2を追加
  WCAG: 1.3.1 情報と関係性

[さらに3件の中程度の問題が続く...]

═══════════════════════════════════════════════════
サマリー
───────────────────────────────────────────────────
問題の総数: 12件
- クリティカル: 3件
- 重大: 5件
- 中程度: 4件

アクセシビリティスコア: 47/100

最も一般的な問題:
1. フォーム入力にラベルがない - 3件
2. フォーカスインジケータがない - 2件
3. セマンティックでないインタラクション - 2件
═══════════════════════════════════════════════════

ステップ6: 修正提案

修正を提案してもよろしいですか？

以下の問題を自動修正できます：

[1] ✓ ナビゲーションメニュートグルにaria-labelを追加
[2] ✓ メール購読入力にaria-labelを追加
[3] ✓ サービスカードにrole="button" + tabIndex="0"を追加
[4] ✓ もっと詳しくリンクにフォーカススタイルを追加
[5] ✓ 購読ボタンのmin-heightを44pxに設定

すべて修正しますか？それとも特定の問題のみ選択しますか？
（"すべて" / 番号をカンマ区切りで入力 / "なし"）

ユーザー応答: すべて

ステップ7: 修正の適用

🔄 修正を適用中...

✅ 修正1: ナビゲーションメニュートグルにaria-labelを追加
✅ 修正2: メール購読入力にaria-labelを追加
✅ 修正3: サービスカードにrole="button" + tabIndex="0"を追加
✅ 修正4: もっと詳しくリンクにフォーカススタイルを追加
✅ 修正5: 購読ボタンのmin-heightを44pxに設定

すべての修正が正常に適用されました！

📊 修正後のサマリー:
- 修正された問題: 5件
- 残りの問題: 7件（手動修正が必要）
- 新しいアクセシビリティスコア: 72/100（47/100から改善）

手動修正が必要な残りの問題:
- 画像のaltテキスト（asset-auditスキルを使用）
- カラーコントラストの問題
- フォームのラベルと入力の関連付け（構造的な変更が必要）

何か他にお手伝いできることはありますか？

例2: 素早い監査と特定の問題の修正

ユーザープロンプト:

ページIDが abc123 のページで、フォーカス状態とキーボードナビゲーションのみをチェックしてください。

AI応答:

指定されたページID abc123 で、フォーカス状態とキーボードナビゲーションに焦点を当てた的を絞った監査を実行します。

🔄 監査を実行中...

結果:
- 2件のフォーカスアウトラインの問題（重大）
- 1件のキーボードハンドラの欠落（クリティカル）

アクセシビリティスコア: 85/100

これらの問題を自動修正しますか？（はい/いいえ）

関連スキル

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community