webflow-mcp:accessibility-audit

アクセシビリティ監査

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 に対してヘッドレスで動作します。element_snapshot_tool を使用して任意の視覚的プレビューを表示する場合にのみ、Designer が必要です。

手順

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

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

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

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

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

重大な問題（修正必須 — WCAG レベル A）

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

   • 検出対象：テキストコンテンツのない Button 要素
   • 確認事項：aria-label または aria-labelledby がない
   • 影響：スクリーンリーダーでボタンの目的を特定できません
   • 修正方法：説明的なテキストを含む aria-label 属性を追加します

8. ラベルのないフォーム入力（WCAG 1.3.1）

   • 検出対象：Input、Select、Textarea 要素
   • 確認事項：関連付けられたラベルまたは aria-label がない
   • 影響：ユーザーは入力欄の用途がわかりません
   • 修正方法：aria-label を追加するか、id を使って <label> と関連付けます

9. セマンティクスに沿わないクリックハンドラー（WCAG 2.1.1）

   • 検出対象：Div または Span 要素（要素の種類で識別）
   • 確認事項：適切なロールやキーボード操作への対応がないインタラクティブな動作
   • 影響：キーボードで操作できず、スクリーンリーダーではインタラクティブな要素として認識されません
   • 修正方法：role="button" と tabIndex="0" を追加します。実際の <button> の使用を推奨します

10. 遷移先のないリンク（WCAG 2.1.1）

    • 検出対象：href 属性のない Link 要素
    • 確認事項：href を設定せず、onClick のみを使用しているリンク
    • 影響：キーボードで操作できず、ブラウザーの機能が使えなくなります
    • 修正方法：適切な href を追加するか、ボタンに変更します

深刻な問題（修正推奨 — WCAG レベル AA）

11. 代替手段を設けずにフォーカスアウトラインを削除（WCAG 2.4.7）

    • 検出対象：outline: none スタイルが設定された要素
    • 確認事項：視認可能な代替フォーカスインジケーターがない
    • 影響：キーボードユーザーがフォーカス位置を確認できません
    • 修正方法：視認可能なフォーカススタイル（ボーダー、box-shadow、背景色の変更）を追加します

12. キーボードハンドラーの欠如（WCAG 2.1.1）

    • 検出対象：onClick ハンドラーが設定された要素
    • 確認事項：Enter キーまたは Space キーに対する onKeyDown がない
    • 影響：キーボードのみでは使用できません
    • 修正方法：キーボードイベントハンドラーを追加します

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

    • 検出対象：クリック可能な要素（ボタン、リンク）
    • 確認事項：幅または高さが 44px 未満
    • 影響：モバイルデバイスでタップしにくくなります
    • 修正方法：パディングを増やすか、min-width/min-height を 44px に設定します

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

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

    • 検出対象：見出し要素（h1-h6）
    • 確認事項：レベルが飛んでいる（h1 → h3 のように h2 を飛ばしている）
    • 影響：ドキュメント構造がわかりにくくなります
    • 修正方法：見出しレベルを適切な順序で使用します

15. 正の tabIndex（WCAG 2.4.3）

    • 検出対象：tabIndex > 0 の要素
    • 確認事項：自然なタブ順序が乱される
    • 影響：キーボード操作がわかりにくくなります
    • 修正方法：tabIndex="0" または "-1" のみを使用し、DOM の自然な順序に従います

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

    • 検出対象：ARIA ロールが設定された要素
    • 確認事項：必要な ARIA 属性がない（例：tabIndex のない role="button"）
    • 影響：アクセシビリティのセマンティクスが不完全になります
    • 修正方法：ロールに必要な属性を追加します

フェーズ 4：問題の分類とスコア算出

17. すべての検出結果を分類します：

    • 重大：修正必須（アクセスを妨げる）
    • 深刻：修正推奨（ユーザビリティに大きく影響する）
    • 中程度：修正を検討（ユーザー体験を向上させる）

18. アクセシビリティスコアを算出します（0～100）：

    • 100 から開始
    • 重大な問題：1 件につき -10 点
    • 深刻な問題：1 件につき -5 点
    • 中程度の問題：1 件につき -2 点
    • 最低スコア：0

19. 重大度の概要を作成します：

    • 検出された問題の合計
    • 重大度別の内訳
    • 最も多い問題の種類
    • 最も影響を受けているページ／セクション

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

20. 詳細なレポートを作成します。形式は次のとおりです。

    ═══════════════════════════════════════════════════
    アクセシビリティ監査：［ページ名］
    ═══════════════════════════════════════════════════
    
    重大（X 件の問題）
    ───────────────────
    [A11Y] 要素：ボタン「送信」
      問題：ボタンにアクセシブルな名前がありません
      場所：フォームセクション、要素 ID：{component: "abc", element: "xyz"}
      現在：<button><CloseIcon /></button>
      修正：aria-label="Close" を追加します
      WCAG：4.1.2 名前、ロール、値
    
    [A11Y] 要素：入力フィールド
      問題：フォーム入力にラベルがありません
      場所：お問い合わせフォーム、要素 ID：{component: "def", element: "uvw"}
      現在：<input type="email" />
      修正：aria-label="Email address" を追加するか、<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 件
    ═══════════════════════════════════════════════════
    

21. 実行可能な改善策を提示します。

    • 優先順位を付けた修正リスト（重大なものから）
    • クイックウィン（簡単に修正でき、効果が大きいもの）
    • デザインパターンの推奨事項
    • 詳しく学ぶためのリソース

フェーズ 6：修正案と承認（任意）

22. 問題の自動修正を提案します。修正に Designer は不要なため、自動修正を直接提案します

23. 修正内容のプレビューを表示します。

    どの問題を修正しますか？
    
    [1] ✓ 送信ボタンに aria-label を追加
        要素：お問い合わせフォームのボタン
        修正：aria-label="Submit contact form" を追加
        安全性：はい（属性の追加のみ）
    
    [2] ✓ メール入力欄に aria-label を追加
        要素：お問い合わせフォームの入力欄
        修正：aria-label="Email address" を追加
        安全性：はい
    
    [3] ⚠️ 見出しの階層を修正
        要素：記事セクションの h3
        修正：見出しレベルを h3 から h2 に変更
        安全性：視覚スタイルに影響する可能性があります
    
    スキップする番号（例：「3」）、「all」ですべて、「none」でキャンセルを入力してください
    

24. 承認された修正を適用します。アクション set_attributes で data_element_tool を使用します

    • バッチ処理します
    • 修正件数が多い場合は進捗を表示します
    • 各修正の成功または失敗を報告します

25. 修正後のレポートを生成します。

    • 修正した問題：X 件
    • 残っている問題：Y 件
    • 新しいアクセシビリティスコア：XX/100（YY/100 から改善）

フェーズ 7：エクスポートとリソース（任意）

26. エクスポート形式を提示します。

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

27. リソースを提供します。

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

重要な考慮事項

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

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

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

❌ 画像の代替テキスト（代わりに asset-audit スキルを使用してください） ❌ 色のコントラスト比（視覚的な分析が必要です） ❌ アニメーション／動きに関する設定 ❌ スクリーンリーダーのテスト（手動での確認が必要です） ❌ コンテンツの読みやすさ（言語レベル、明瞭さ）

制限事項

• 色のコントラストや小さな文字など、視覚的にしか確認できない問題は検出できません
• 実際のスクリーンリーダーの動作はテストできません
• コンテンツの品質や明瞭さは検証できません
• 要素の属性と構造のみを対象とします

例

例 1：ページ全体の監査

ユーザープロンプト：

Run an accessibility audit on my homepage

ステップ 1：サイトとページの選択

🔍 Accessibility Audit: Page Selection

I'll help you audit your homepage for accessibility issues.

First, let me get your site information...

Available sites:
1. Company Website
2. Portfolio Site

Which site? (1/2)

ユーザーの回答： 1

ステップ 2：ページの選択

Available pages in Company Website:
1. Home (/)
2. About (/about)
3. Contact (/contact)
4. Blog (/blog)

Which page would you like to audit? (1 for Home)

ユーザーの回答： 1

ステップ 3：監査範囲

What level of audit would you like?

1. Full audit (all WCAG checks) - Recommended
2. Critical issues only (Level A compliance)
3. Specific categories (buttons, forms, navigation)

Your choice: (1/2/3)

ユーザーの回答： 1

ステップ 4：監査の進行状況

🔄 Running Accessibility Audit...

Progress:
✅ Extracted page content (45 elements)
✅ Analyzing buttons and interactive elements
✅ Checking form inputs and labels
✅ Validating heading hierarchy
✅ Checking keyboard navigation
🔄 Analyzing focus states...

Analysis complete!

ステップ 5：レポート

═══════════════════════════════════════════════════
ACCESSIBILITY AUDIT: Home
═══════════════════════════════════════════════════

CRITICAL (3 issues)
───────────────────
[A11Y] Element: Button (navigation toggle)
  Issue: Icon-only button missing accessible name
  Location: Header navigation
  Element ID: {component: "nav-01", element: "btn-menu"}
  Current: <button><MenuIcon /></button>
  Fix: Add aria-label="Open navigation menu"
  WCAG: 4.1.2 Name, Role, Value

[A11Y] Element: Input (email subscription)
  Issue: Form input without label
  Location: Footer, newsletter signup
  Element ID: {component: "footer-01", element: "email-input"}
  Current: <input type="email" placeholder="Enter email" />
  Fix: Add aria-label="Email address for newsletter"
  WCAG: 1.3.1 Info and Relationships

[A11Y] Element: Div (clickable card)
  Issue: Non-semantic interactive element
  Location: Services section, card 2
  Element ID: {component: "services-01", element: "card-02"}
  Current: <div onClick={...}>Service card</div>
  Fix: Convert to <button> or add role="button" + tabIndex="0"
  WCAG: 2.1.1 Keyboard

SERIOUS (5 issues)
──────────────────
[A11Y] Element: Link "Learn more"
  Issue: Focus outline removed without visible alternative
  Location: Hero section
  Element ID: {component: "hero-01", element: "cta-link"}
  Current: outline: none
  Fix: Add focus style - border: 2px solid #0066cc or box-shadow
  WCAG: 2.4.7 Focus Visible

[A11Y] Element: Button "Subscribe"
  Issue: Touch target too small (30px × 36px)
  Location: Footer newsletter form
  Element ID: {component: "footer-01", element: "submit-btn"}
  Current: Small button
  Fix: Increase padding or set min-height: 44px
  WCAG: 2.5.5 Target Size

[continues with 3 more serious issues...]

MODERATE (4 issues)
───────────────────
[A11Y] Element: Heading "Our Services"
  Issue: Heading hierarchy skipped (h1 → h3)
  Location: Services section
  Element ID: {component: "services-01", element: "heading"}
  Current: <h3>Our Services</h3> follows <h1>Welcome</h1>
  Fix: Change to <h2> to maintain proper hierarchy
  WCAG: 1.3.1 Info and Relationships

[continues with 3 more moderate issues...]

═══════════════════════════════════════════════════
SUMMARY
───────────────────────────────────────────────────
Total Issues: 12
- Critical: 3 issues (must fix)
- Serious: 5 issues (should fix)
- Moderate: 4 issues (consider fixing)

Accessibility Score: 64/100

Most Common Issues:
1. Missing button labels - 2 occurrences
2. Focus styles removed - 3 occurrences
3. Heading hierarchy problems - 2 occurrences

Quick Wins (Easy + High Impact):
✨ Add aria-label to icon buttons (2 min, +20 score points)
✨ Add input labels (5 min, +10 score points)
✨ Add focus styles (10 min, +15 score points)

═══════════════════════════════════════════════════

💡 Next Steps:
1. Fix critical issues first (blocks access for some users)
2. Add visible focus styles for keyboard users
3. Test with keyboard navigation (Tab, Enter, Space keys)
4. Consider testing with screen reader (NVDA/JAWS/VoiceOver)

Would you like me to help fix these issues?

例 2：複数ページの監査

ユーザープロンプト：

Audit accessibility across my entire site

エージェントの応答：

🔍 Multi-Page Accessibility Audit

I'll audit all pages on your site for accessibility issues.

Found 8 pages:
1. Home
2. About
3. Services
4. Team
5. Blog
6. Blog Post Template (CMS)
7. Contact
8. Privacy Policy

This will take approximately 2-3 minutes.

Proceed with full site audit? (yes/no)

ユーザー： yes

進行状況：

🔄 Auditing Site Accessibility...

Progress: ████████████░░░░░░░░ 60% (5/8 pages)

✅ Home - Score: 64/100 (12 issues)
✅ About - Score: 78/100 (6 issues)
✅ Services - Score: 71/100 (9 issues)
✅ Team - Score: 85/100 (4 issues)
✅ Blog - Score: 82/100 (5 issues)
🔄 Analyzing Blog Post Template...

最終レポート：

═══════════════════════════════════════════════════
SITE-WIDE ACCESSIBILITY AUDIT
═══════════════════════════════════════════════════

OVERALL SCORE: 73/100

Pages Audited: 8
Total Issues: 48
- Critical: 11 issues
- Serious: 21 issues
- Moderate: 16 issues

═══════════════════════════════════════════════════
ISSUES BY PAGE
═══════════════════════════════════════════════════

🔴 Lowest Scores (Need Attention):
1. Home - 64/100 (12 issues: 3 critical, 5 serious, 4 moderate)
2. Services - 71/100 (9 issues: 2 critical, 5 serious, 2 moderate)
3. About - 78/100 (6 issues: 1 critical, 3 serious, 2 moderate)

🟢 Highest Scores:
1. Team - 85/100 (4 issues: 0 critical, 2 serious, 2 moderate)
2. Blog - 82/100 (5 issues: 1 critical, 2 serious, 2 moderate)

═══════════════════════════════════════════════════
SITE-WIDE PATTERNS
═══════════════════════════════════════════════════

Most Common Issues Across Site:
1. Missing button labels (icon buttons) - 8 occurrences
   Pages affected: Home, Services, Blog, Contact

2. Focus outline removed - 12 occurrences
   Pages affected: All pages (site-wide CSS issue)

3. Form inputs without labels - 5 occurrences
   Pages affected: Home, Contact

4. Small touch targets (<44px) - 9 occurrences
   Pages affected: Home, About, Services, Contact

═══════════════════════════════════════════════════
RECOMMENDATIONS
═══════════════════════════════════════════════════

🎯 Site-Wide Fixes (Fix Once, Helps Everywhere):
1. Add focus styles to global CSS (affects 12 issues across all pages)
2. Update button component to require aria-label (affects 8 issues)
3. Increase minimum touch target size in design system (affects 9 issues)

📋 Page-Specific Priorities:
1. Home page: Fix navigation menu button and newsletter form
2. Services page: Add labels to service card interactions
3. Contact page: Add proper labels to all form inputs

💡 Design System Improvements:
- Create accessible button component with required aria-label
- Add focus state variants to all interactive components
- Set minimum touch target size standard (44px)

Would you like:
1. Detailed report for specific page
2. Export findings to file (Markdown/JSON/CSV)
3. Help fixing site-wide issues

例 3：重大な問題のみ

ユーザープロンプト：

Check my contact page for critical accessibility issues only

エージェントの応答：

🔍 Critical Issues Audit: Contact Page

Running quick scan for blocking accessibility issues...

✅ Page analyzed

═══════════════════════════════════════════════════
CRITICAL ISSUES: Contact Page
═══════════════════════════════════════════════════

Found: 4 critical issues

[1] Form Input Missing Label
    Element: Email input field
    Location: Contact form, top
    Issue: No accessible name for screen readers
    Fix: Add aria-label="Your email address"
    WCAG: 1.3.1 (Level A)

[2] Form Input Missing Label
    Element: Message textarea
    Location: Contact form, bottom
    Issue: No accessible name for screen readers
    Fix: Add aria-label="Your message"
    WCAG: 1.3.1 (Level A)

[3] Button Missing Label
    Element: Submit button
    Location: Contact form, bottom
    Issue: Icon-only button with no text
    Fix: Add aria-label="Submit contact form"
    WCAG: 4.1.2 (Level A)

[4] Non-Semantic Interactive Element
    Element: Social media link (Instagram)
    Location: Footer
    Issue: Div with onClick instead of proper link
    Fix: Convert to <a href="..."> with aria-label="Instagram"
    WCAG: 2.1.1 (Level A)

═══════════════════════════════════════════════════

⚠️ Impact: These issues prevent screen reader users from using your contact form.

🔧 Estimated fix time: 5 minutes

Would you like me to:
1. Run full audit (includes serious and moderate issues)
2. Fix these 4 critical issues now
3. Export this report (Markdown/JSON/CSV)

安全ルール

プレビューと確認

• 修正を提案する前に、問題の詳細な一覧を必ず表示します
• 深刻度（重大／深刻／中程度）を明確に示します
• 各問題が及ぼす影響を、ユーザーにわかりやすく説明します
• 検出した各問題について、具体的な WCAG の参照先を示します

修正ごとの個別承認

• 修正する問題をユーザーが選択できるようにします
• 視覚デザインに影響する可能性がある修正について警告します
• 進行状況を示しながら、修正を複数のまとまりに分けて処理します
• 修正ごとに成功／失敗を報告します

エラー処理

• ページにアクセスできない場合は、明確に説明します
• 要素を変更できない場合は、手動での修正方法を提案します
• 自動修正と手動確認が必要な項目を分けます

検証

• 修正を提案する前に、要素の種類を確認します
• 属性を追加する前に、その要素が属性に対応しているか確認します
• 提案する修正が要素の種類に適していることをテストします
• 修正によって既存の機能が損なわれる可能性がある場合は警告します

出力基準

アイコンと書式

• 🔍 検出／分析
• 🔄 処理中
• ✅ 合格／成功
• ❌ 不合格／重大な問題
• ⚠️ 警告／深刻な問題
• 💡 提案／中程度の問題
• 📊 レポート／概要
• 🎯 優先事項／アクション項目
• 🔴 最優先
• 🟡 中優先度
• 🟢 低優先度

レポートの構成

1. 深刻度を明確に分類
2. ID を使って具体的な要素を特定
3. 現在の状態と推奨する修正を提示
4. 各問題について WCAG の参照先を提示
5. 実行可能な優先事項をまとめる
6. 測定可能な進捗を示すスコア

コミュニケーション

• 専門用語を避け、わかりやすい言葉を使います
• なぜ問題なのか（ユーザーへの影響）を説明します
• 具体的で実行可能な修正方法を提示します
• 実際の支援技術を使ったテストを促します
• 自動チェックはあくまで第一歩であることを強調します

含めるリソース

WCAG 2.1 クイックリファレンス

• https://www.w3.org/WAI/WCAG21/quickref/

Webflow のアクセシビリティリソース

• Webflow University：アクセシビリティのベストプラクティス
• Webflow でのセマンティック HTML の使用
• Webflow での ARIA 属性の追加

テストツール

• キーボード：Tab、Shift+Tab、Enter、Space
• スクリーンリーダー：NVDA（Windows）、JAWS、VoiceOver（Mac/iOS）
• ブラウザー拡張機能：axe DevTools、WAVE、Lighthouse

よくある修正

• ボタンのラベル：表示されるテキストまたは aria-label を必ず含めます
• フォームのラベル：Webflow の label 要素または aria-label を使用します
• フォーカススタイル：:focus-visible 疑似クラスを使用します
• セマンティック HTML：適切な要素（button、a、label）を使用します