Agnt Audit A11Y

藉agnt診斷工具對當前瀏覽器頁面執行完整無障礙稽核。

步驟

1. 執行完整無障礙稽核：

   proxy {action: "exec", id: "dev", code: "__devtool.auditAccessibility()"}
   

2. 取Tab鍵順序以查鍵盤導航：

   proxy {action: "exec", id: "dev", code: "__devtool.getTabOrder()"}
   

3. 截圖供參考：

   proxy {action: "exec", id: "dev", code: "__devtool.screenshot('a11y-audit')"}
   

稽核檢查內容

嚴重問題（錯誤）

• 無alt文字之圖片 — 螢幕閱讀器無法描述圖片
• 無標籤之表單輸入 — 用戶不知輸入什麼
• 無無障礙名稱之按鈕 — 用戶不知按鈕作用
• 空連結 — 無文字內容或aria-label之連結

警告

• 無href之連結 — 可能引起導航問題

解讀結果

稽核回傳：

• 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）