前言¶
前端頁面做完功能聯調之後，無障礙（a11y）往往還卡在人工走查：圖標按鈕有沒有可讀名稱、表單有沒有關聯 label、Tab 順序是否合理、對比度夠不夠。這類問題肉眼掃一遍容易漏，專門開一輪 axe / Lighthouse 又偏重。若你已經在用 Cursor Agent，其實可以用內置瀏覽器直接抓取與屏幕閱讀器同源的無障礙樹，按清單把問題找出來並改源碼。
accessibility-auditing 就是爲此準備的 Agent Skill：不依賴額外掃描器，按固定工作流打開頁面、捕獲 ARIA 樹、檢查鍵盤可達性，再輸出分級報告並落地修復。
這是什麼¶
accessibility-auditing 收錄在 spencerpauly 維護的開源清單 awesome-cursor-skills 中，歸類爲 Cursor-Native（依賴 Cursor Agent 內置瀏覽器能力）。倉庫以 Creative Commons Zero（CC0）授權，目錄下僅有一份 SKILL.md。
官方一句話定位是：使用 Cursor 瀏覽器的 ARIA / accessibility snapshot，審計頁面上的缺失標籤、錯誤 Tab 順序、對比度問題以及 ARIA 誤用。frontmatter 中 user-invocable: true，可在對話裏主動喚起。
它解決的是「開發過程中的輕量 a11y 走查」：Agent 對着真實渲染頁面的無障礙樹做結構化檢查，而不是隻讀靜態 HTML 猜測。
核心功能與亮點¶
根據官方 SKILL.md，工作流分成六步，檢查項也寫得很具體。
1. 打開目標頁
使用 browser_navigate 打開待測 URL（本地開發地址或預覽環境均可）。
2. 捕獲無障礙樹
調用 browser_snapshot，拿到頁面的 aria / accessibility tree。Skill 明確說明：這就是屏幕閱讀器所依賴的那棵樹。
3. 對照清單審計
官方要求逐項檢查五類問題：
- 缺失可訪問名稱：無文本且無
aria-label的button、無alt的img、無關聯label/aria-label的input、無文本的鏈接、僅圖標的按鈕。 - 語義 HTML：用可點擊的
div/span代替button/a；缺少nav/main/header/footer地標；標題層級跳躍（如 h1 直接到 h3）；列表未用ul/ol/li。 - 鍵盤導航：可交互元素不在 Tab 序中；自定義控件缺
role與鍵盤處理；彈層焦點陷阱與 Escape 關閉；缺少 skip-to-content。 - ARIA 誤用：可聚焦元素上寫了
aria-hidden="true"；非法role；aria-expanded無對應摺疊內容；aria-controls指向不存在的 id。 - 對比度（結合截圖目視）：淺灰字配白底、過淡的 placeholder、禁用態與正常態難以區分。
4. 實測鍵盤行爲
用 browser_press 模擬 Tab，驗證每個可交互元素能否獲焦、焦點順序是否自上而下 / 自左而右、焦點環是否可見、Escape 能否關閉彈層與下拉。
5. 輸出分級報告
官方給出了報告模板，分爲 Critical、Warnings、Passed，便於評審和排期。
6. 直接改代碼
對每條問題在源碼中修復，並列出常見改法：給圖標按鈕加 aria-label、用 label / htmlFor 關聯輸入框、把可點擊 div 換成真正的按鈕、補 alt、理順標題層級等。
和 Cursor 官方 Browser 文檔是對齊的：文檔裏同樣把「無障礙改進」列爲內置瀏覽器用例，示例提示包括檢查對比度、語義 HTML、ARIA 標籤、鍵盤導航與缺失 alt。該 Skill 把這些動作收成可複用的檢查清單與報告格式。
安裝與啓用¶
Skill 本體就是一份標準 SKILL.md，符合 Agent Skills / agentskills.io 約定。Cursor 會從項目級或用戶級目錄自動發現技能。
方式一：手動拷貝（與 awesome-cursor-skills README 一致）
把官方文件放到項目技能目錄：
mkdir -p .cursor/skills/accessibility-auditing
curl -fsSL \
https://raw.githubusercontent.com/spencerpauly/awesome-cursor-skills/main/resources/accessibility-auditing/SKILL.md \
-o .cursor/skills/accessibility-auditing/SKILL.md
個人全局可用時，可放到 ~/.cursor/skills/accessibility-auditing/SKILL.md。Cursor 還兼容 .agents/skills/，以及 Claude Code / Codex 的 .claude/skills/、.codex/skills/ 等路徑。
方式二：用 skills CLI 安裝
vercel-labs/skills 支持從 GitHub 按名稱安裝單個 Skill。針對 Cursor 可類似執行：
npx skills add spencerpauly/awesome-cursor-skills \
--skill accessibility-auditing \
-a cursor
若主要給 Claude Code 用，把 -a cursor 換成 -a claude-code 即可（會裝到對應的 skills 目錄）。加 -g 則裝到用戶全局目錄。
安裝後，在 Cursor Agent 對話裏輸入 /accessibility-auditing，或直接描述「對當前頁面做無障礙審計」；Agent 會根據 description 自動匹配該 Skill。
需要注意：工作流依賴 browser_navigate / browser_snapshot / browser_press 這類瀏覽器工具。在 Cursor 裏一般直接走內置 Browser；在其他 Agent 中，只有掛載了能力對等的瀏覽器 MCP / 工具時，同一份清單才能完整跑通。
典型用法示例¶
本地服務起來後，可以這樣喚起（URL 換成你的頁面）：
/accessibility-auditing
請審計 http://localhost:3000/login
按 Critical / Warnings / Passed 輸出報告，並對 Critical 項直接改源碼。
也可以不顯式寫斜槓命令，用自然語言觸發：
用瀏覽器打開首頁，抓取 aria 樹，檢查缺失標籤、Tab 順序、ARIA 誤用和對比度，
給出無障礙審計報告後再逐項修復。
官方報告格式示例如下（結構來自 SKILL.md）：
Accessibility Audit:
Critical:
- 3 buttons with no accessible name (header icons)
- Login form inputs missing labels
Warnings:
- Heading levels skip from h1 to h3
- No skip-to-content link
- 2 clickable divs should be buttons
Passed:
- All images have alt text
- Landmarks present (nav, main, footer)
- Focus order is logical
修復階段可按官方常見改法對照源碼，例如：
<!-- 圖標按鈕補可訪問名稱 -->
<button type="button" aria-label="Close">×</button>
<!-- 輸入框關聯 label -->
<label for="email">Email</label>
<input id="email" name="email" type="email" />
<!-- 可點擊區域用語義元素 -->
<button type="button">提交</button>
適用場景與注意事項¶
適合這些場景：
- 功能開發中途，想快速掃一遍表單、導航、彈層的基礎 a11y。
- Code Review 前，讓 Agent 先出一份 Critical / Warnings 清單。
- 面向需要滿足 WCAG / 無障礙合規要求的產品，作爲迭代期的輔助手段。
使用時注意幾點：
- 對比度檢查是「截圖目視」，不是精確的對比度比值計算；正式合規仍建議再用 axe、Lighthouse 或專業對比度工具複覈。
- 依賴瀏覽器 snapshot 是否返回完整無障礙樹。若工具結果只有元數據、沒有 aria 樹與元素引用，審計與鍵盤操作都會受阻，需先確認 Cursor Browser / 所用 MCP 工作正常。
- Skill 不會替你聲明「已通過 WCAG」；它提供的是可操作的檢查流程與修復指引，驗收結論仍要由團隊標準與專項工具兜底。
- 倉庫將該 Skill 標爲 Cursor-Native，核心能力綁定 Cursor 內置瀏覽器；拷到其他 Agent 時，請確認具備等價的導航、快照與按鍵能力。
小結¶
accessibility-auditing 把「打開頁面 → 抓 ARIA 樹 → 按清單審計 → Tab 實測 → 分級報告 → 改源碼」固化成一份可複用的 Agent Skill，適合把無障礙檢查嵌進日常 AI 輔助開發，而不是等上線前才突擊。
官方地址：
https://github.com/spencerpauly/awesome-cursor-skills/tree/main/resources/accessibility-auditing
SKILL.md 原文：
https://github.com/spencerpauly/awesome-cursor-skills/blob/main/resources/accessibility-auditing/SKILL.md
