Communitygithub.com

webflow/webflow-skills

對 Webflow 頁面執行全面的無障礙性審核（WCAG 2.1），檢查按鈕、表單、連結、焦點狀態、標題和鍵盤導航，並生成包含修復建議的詳細報告。完全在無頭模式下針對頁面 ID 運行，無需 Designer 連接。不包含圖片替代文字的檢查（由 asset-audit 技能處理）。

webflow-skills 是什麼？

此技能為無障礙性審核工具，專為 Webflow 網站開發者設計，用於系統性地檢查 WCAG 2.1 標準的遵循情況。它支援完全在無頭模式下工作，透過 Webflow MCP 工具直接對給定的頁面 ID 進行操作，無需開啟 Designer。技能涵蓋了從關鍵（Level A）到嚴肅（Level AA）再到中等級別的無障礙性問題，包括但不限於無標籤按鈕/表單輸入、非語義化點擊處理器、缺少目標的連結、焦點輪廓被移除、缺失鍵盤處理器、觸控目標過小、標題層級跳躍以及 ARIA 角色屬性不完整。審核流程分為七個階段：選取網站與頁面、提取元素、執行檢查、分類問題、生成報告（含分數與嚴重性摘要）、提供自動修復建議並執行，以及輸出報告與提供相關資源。它特別排除了圖片 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 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

說明文件

無障礙性審核

針對 Webflow 頁面的全面 WCAG 2.1 無障礙性審核，包含詳細問題檢測與可行的修復建議。

重要注意事項

始終使用 Webflow MCP 工具進行所有操作：

  • 使用 Webflow MCP 的 webflow_guide_tool 在開始前獲取最佳實踐
  • 使用 Webflow MCP 的 data_sites_tool 搭配 action list_sites 來識別可用的網站
  • 使用 Webflow MCP 的 data_sites_tool 搭配 action get_site 來檢索網站詳細資訊
  • 使用 Webflow MCP 的 data_pages_tool 搭配 action list_pages 來獲取所有頁面及其頁面 ID
  • 使用 Webflow MCP 的 data_element_tool 搭配 action get_all_elements（直接傳入頁面 ID）來獲取詳細的元素資訊
  • 使用 Webflow MCP 的 data_element_tool 搭配 action 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. 獲取網站資訊：使用 Webflow MCP 的 data_sites_tool 搭配 action list_sites 來識別目標網站
  2. 詢問頁面選擇：
    • 如果使用者提供頁面 ID，則直接使用
    • 否則，使用 data_pages_tool 搭配 action list_pages 來顯示可用頁面
    • 讓使用者選擇要審核的頁面
  3. 確認審核範圍：詢問使用者要檢查哪些項目：
    • 完整審核（所有無障礙性檢查）
    • 僅關鍵問題（WCAG Level A）
    • 特定類別（表單、按鈕、導航等）

第二階段：元素提取與分析

  1. 提取所有元素：使用 data_element_tool 搭配 action get_all_elements，並傳入第一階段選取的目標頁面 ID，進行詳細分析——無需 Designer 連接
    • 設定 include_style_properties: true 來檢查焦點樣式
    • 設定 include_all_breakpoint_styles: false 以減少數據量
  2. 解析元素數據：識別互動式與內容元素：
    • 按鈕（Button，帶有 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, 標籤名稱）

第三階段：無障礙性檢查

關鍵問題（必須修復 - WCAG Level A）

  1. 無標籤的純圖示按鈕 (WCAG 4.1.2)

    • 找出：沒有文字內容的 Button 元素
    • 檢查：缺少 aria-label 或 aria-labelledby
    • 影響：螢幕閱讀器無法識別按鈕用途
    • 修復：添加帶有描述性文字的 aria-label 屬性

  2. 無標籤的表單輸入 (WCAG 1.3.1)

    • 找出：Input, Select, Textarea 元素
    • 檢查：缺少關聯的 label 或 aria-label
    • 影響：使用者不知道輸入欄位的作用
    • 修復：添加 aria-label 或使用 id 與 <label> 關聯

  3. 非語義化的點擊處理器 (WCAG 2.1.1)

    • 找出：Div 或 Span 元素（通過元素類型識別）
    • 檢查：互動行為缺少適當的角色或鍵盤支援
    • 影響：無法使用鍵盤操作，螢幕閱讀器會忽略互動性
    • 修復：添加 role="button"、tabIndex="0"，建議使用真正的 <button>

  4. 沒有目標的連結 (WCAG 2.1.1)

    • 找出：缺少 href 屬性的 Link 元素
    • 檢查：僅使用 onClick 而沒有 href 的連結
    • 影響：無法使用鍵盤操作，破壞了瀏覽器功能
    • 修復：添加適當的 href 或轉換為按鈕

嚴肅問題（建議修復 - WCAG Level AA）

  1. 焦點輪廓被移除且無替代方案 (WCAG 2.4.7)

    • 找出：帶有 outline: none 樣式的元素
    • 檢查：沒有可見的替代焦點指示器
    • 影響：鍵盤使用者看不到焦點
    • 修復：添加可見的焦點樣式（border, box-shadow, 背景變化）

  2. 缺少鍵盤事件處理器 (WCAG 2.1.1)

    • 找出：帶有 onClick 處理器的元素
    • 檢查：缺少對 Enter/Space 鍵的 onKeyDown 處理
    • 影響：無法僅使用鍵盤操作
    • 修復：添加鍵盤事件處理器

  3. 觸控目標太小 (WCAG 2.5.5)

    • 找出：可點擊元素（按鈕、連結）
    • 檢查：寬度或高度小於 44px
    • 影響：在移動設備上難以點擊
    • 修復：增加內邊距或設定最小寬度/高度為 44px

中等問題（考慮修復）

  1. 標題層級問題 (WCAG 1.3.1)

    • 找出：標題元素（h1-h6）
    • 檢查：跳過的層級（h1 → h3，跳過 h2）
    • 影響：文件結構混亂
    • 修復：使用正確的順序標題層級

  2. 正數值的 tabIndex (WCAG 2.4.3)

    • 找出：帶有 tabIndex > 0 的元素
    • 檢查：干擾自然的 Tab 鍵順序
    • 影響：鍵盤導航混亂
    • 修復：僅使用 tabIndex="0" 或 "-1"，讓自然的 DOM 順序起作用

  3. 缺少必要屬性的角色 (WCAG 4.1.2)

    • 找出：帶有 ARIA 角色的元素
    • 檢查：缺少必要的 ARIA 屬性（例如，role="button" 卻沒有 tabIndex）
    • 影響：無障礙性語義不完整
    • 修復：為角色添加必要的屬性

第四階段：問題分類與評分

  1. 對所有發現進行分類：

    • 關鍵：必須修復（阻礙訪問）
    • 嚴肅：應該修復（顯著影響可用性）
    • 中等：考慮修復（改善體驗）

  2. 計算無障礙性分數 (0-100)：

    • 從 100 開始
    • 每個關鍵問題：-10 分
    • 每個嚴肅問題：-5 分
    • 每個中等問題：-2 分
    • 最低分數：0

  3. 生成嚴重性摘要：

    • 總發現問題數
    • 按嚴重性分類
    • 最常見的問題類型
    • 受影響最嚴重的頁面/部分

第五階段：報告生成

  1. 創建詳細報告，格式如下：

    ═══════════════════════════════════════════════════
無障礙性審核報告：[頁面名稱]
═══════════════════════════════════════════════════

關鍵問題 (X 個)
───────────────────
[A11Y] 元素：按鈕 "Submit"
  問題：按鈕缺少可存取的名稱
  位置：表單區段，元素 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] 元素：連結 "Read more"
  問題：焦點輪廓被移除且無可見替代方案
  位置：部落格區段
  現狀：outline: none
  修復：添加可見的焦點樣式（例如，border: 2px solid blue）
  WCAG：2.4.7 焦點可見

中等問題 (X 個)
───────────────────
[A11Y] 元素：標題
  問題：標題層級跳過（h1 → h3）
  位置：文章區段
  現狀：<h3>子區段</h3> 在 <h1>標題</h1> 之後
  修復：更改為 <h2> 或添加中層的 h2
  WCAG：1.3.1 資訊與關係

═══════════════════════════════════════════════════
摘要
───────────────────────────────────────────────────
問題總數：X
- 關鍵：X 個問題
- 嚴肅：X 個問題
- 中等：X 個問題

無障礙性分數：XX/100

最常見問題：
1. [問題類型] - X 次出現
2. [問題類型] - X 次出現
3. [問題類型] - X 次出現
═══════════════════════════════════════════════════

  2. 提供可行的見解：

    • 優先修復列表（關鍵問題優先）
    • 快速取勝（影響大且易於修復的問題）
    • 設計模式建議
    • 進一步學習的資源

第六階段：修復建議與批准（可選）

  1. 提議自動修復問題：修復不需要 Designer，因此可直接提供自動修復

  2. 顯示修復預覽：

    您想修復哪些問題？

[1] ✓ 為 Submit 按鈕添加 aria-label
    元素：聯絡表單中的按鈕
    修復：添加 aria-label="Submit contact form"
    安全性：是（僅添加屬性）

[2] ✓ 為 email 輸入添加 aria-label
    元素：聯絡表單中的 Input
    修復：添加 aria-label="Email address"
    安全性：是

[3] ⚠️ 修正標題層級
    元素：文章區段的 h3
    修復：將標題層級從 h3 更改為 h2
    安全性：可能影響視覺樣式

輸入編號跳過（例如 "3"），輸入 "all" 全部修復，輸入 "none" 取消

  3. 應用批准的修復：使用 data_element_tool 搭配 action set_attributes

    • 分批處理
    • 為大量修復顯示進度
    • 報告每個修復的成功/失敗

  4. 生成修復後報告：

    • 已修復問題：X
    • 剩餘問題：Y
    • 新的無障礙性分數：XX/100（從 YY/100 提升）

第七階段：匯出與資源（可選）

  1. 提供匯出格式：

    • Markdown（可讀文件）
    • JSON（機器可讀，用於追蹤）
    • CSV（電子表格，供團隊審查）

  2. 提供資源：

    • WCAG 2.1 快速參考連結
    • Webflow 無障礙性最佳實踐
    • 推薦的測試工具（瀏覽器擴展、螢幕閱讀器）

重要考量

此技能檢查的項目

✅ 按鈕無障礙性（標籤、角色） ✅ 表單輸入標籤與關聯 ✅ 連結語義與鍵盤存取 ✅ 焦點可見性與鍵盤導航 ✅ 標題層級與結構 ✅ ARIA 角色與屬性 ✅ 觸控目標大小 ✅ 互動式元素語義

此技能不檢查的項目

❌ 圖片替代文字（請改用 asset-audit 技能） ❌ 色彩對比度（需要視覺分析） ❌ 動畫/動態偏好 ❌ 螢幕閱讀器測試（需要手動驗證） ❌ 內容可讀性（語言層級、清晰度）

限制

  • 無法檢測僅視覺相關的問題（色彩對比、小字體）
  • 無法測試實際的螢幕閱讀器行為
  • 無法驗證內容品質或清晰度
  • 僅依賴元素屬性和結構

範例

範例 1：完整頁面審核

使用者提示：

對我的首頁進行無障礙性審核

步驟 1：網站與頁面選擇

🔍 無障礙性審核：頁面選擇

我將協助您審核首頁的無障礙性問題。

首先，讓我獲取您的網站資訊...

可用網站：
1. 公司網站
2. 作品集網站

請選擇網站？ (1/2)

使用者回應： 1

步驟 2：頁面選擇

公司網站中的可用頁面：
1. 首頁 (/)
2. 關於我們 (/about)
3. 聯絡我們 (/contact)
4. 部落格 (/blog)

您想審核哪個頁面？ (輸入 1 選擇首頁)

使用者回應： 1

步驟 3：審核範圍

您想要什麼級別的審核？

1. 完整審核（所有 WCAG 檢查）- 建議
2. 僅關鍵問題（Level A 標準）
3. 特定類別（按鈕、表單、導航）

請選擇：(1/2/3)

使用者回應： 1

步驟 4：審核進度

🔄 正在執行無障礙性審核...

進度：
✅ 已提取頁面內容 (45 個元素)
✅ 正在分析按鈕與互動式元素
✅ 正在檢查表單輸入與標籤
✅ 正在驗證標題層級
✅ 正在檢查鍵盤導航
🔄 正在分析焦點狀態...

分析完成！

步驟 5：報告

═══════════════════════════════════════════════════
無障礙性審核報告：首頁
═══════════════════════════════════════════════════

關鍵問題 (3 個)
───────────────────
[A11Y] 元素：按鈕（導航切換）
  問題：純圖示按鈕缺少可存取的名稱
  位置：頁首導航
  元素 ID：{component: "nav-01", element: "btn-menu"}
  現狀：<button><MenuIcon /></button>
  修復：添加 aria-label="Open navigation menu"
  WCAG：4.1.2 名稱、角色、值

[A11Y] 元素：輸入（電子郵件訂閱）
  問題：表單輸入缺少標籤
  位置：頁尾，電子報訂閱
  元素 ID：{component: "footer-01", element: "email-input"}
  現狀：<input type="email" placeholder="Enter email" />
  修復：添加 aria-label="Email address for newsletter"
  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"}
  現狀：小按鈕
  修復：增加內邊距或設定最小高度: 44px
  WCAG：2.5.5 目標大小

[還有 3 個嚴肅問題...]

中等問題 (4 個)
───────────────────
[A11Y] 元素：標題 "我們的服務"
  問題：標題層級跳過（h1 → h3）
  位置：服務區段
  元素 ID：{component: "services-01", element: "heading"}
  現狀：<h3>我們的服務</h3> 位於 <h1

…

[為翻譯截斷]

相關技能

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