| name | agnt-audit-a11y |
| description | "Run comprehensive accessibility audit on current page. 全面審現頁無障礙性. Use when: audit accessibility, check WCAG compliance, find a11y issues, test screen reader support, review ARIA labels" |
| allowed-tools | ["mcp__agnt__proxy", "mcp__agnt__proxylog"] |
| context | fork |
| agent | agnt:browser-debugger |
藉agnt診斷工具對當前瀏覽器頁面執行完整無障礙稽核。
步驟
-
執行完整無障礙稽核：
proxy {action: "exec", id: "dev", code: "__devtool.auditAccessibility()"}
-
取Tab鍵順序以查鍵盤導航：
proxy {action: "exec", id: "dev", code: "__devtool.getTabOrder()"}
-
截圖供參考：
proxy {action: "exec", id: "dev", code: "__devtool.screenshot('a11y-audit')"}
稽核檢查內容
嚴重問題（錯誤）
- 無alt文字之圖片 — 螢幕閱讀器無法描述圖片
- 無標籤之表單輸入 — 用戶不知輸入什麼
- 無無障礙名稱之按鈕 — 用戶不知按鈕作用
- 空連結 — 無文字內容或aria-label之連結
警告
解讀結果
稽核回傳：
issues：找到之無障礙問題陣列count：問題總數errors：嚴重問題數warnings：非嚴重問題數
每個問題含：
type：無障礙違規類型severity："error" 或 "warning"selector：定位元素之CSS選擇器message：問題描述
附加診斷工具
更深入無障礙分析：
// Get detailed accessibility info for a specific element
proxy {action: "exec", id: "dev", code: "__devtool.getA11yInfo('#element')"}
// Check color contrast between foreground and background
proxy {action: "exec", id: "dev", code: "__devtool.getContrast('rgb(0,0,0)', 'rgb(255,255,255)')"}
// Get what a screen reader would announce for an element
proxy {action: "exec", id: "dev", code: "__devtool.getScreenReaderText('#element')"}
WCAG指南參考
- 4.5:1 — 一般文字所需對比度（AA）
- 3:1 — 大文字所需對比度（AA）
- 7:1 — 增強對比度所需（AAA）
