無障礙檢測
參考文件:${CLAUDE_PLUGIN_ROOT}/docs/accessibility.md 與 ${CLAUDE_PLUGIN_ROOT}/docs/design-systems.md。
WCAG 2.2 AA 是每個功能的完成定義之一;此檢測為在此之上的全面掃蕩。
1. 設定
- 在產品外部固定並安裝工具:
npm i --prefix <資料夾> playwright@<固定版本> axe-core@<固定版本>;A11Y_TOOLS=<資料夾>。 - 在本地使用示範資料於暫存資料庫中執行應用程式,並使用自訂埠號。
- 建立
tests/a11y/pages.json,列出所有主要頁面(以及透過open開啟的對話框),每個頁面需有lang,並為登入頁面提供signIn模組。 - 在其他代理程式較少運作時執行檢測;對共用元件進行小範圍、有針對性的修改。
2. 測量(「之前」)
node tests/a11y/axe-pages.mjs --probes --json scratch/a11y-before.json
node tests/a11y/axe-pages.mjs --probes --widths 320 --page <寬頁面>
node --test "tests/contracts/*.test.mjs" # 淺色與深色模式下的主題對比
外加應用程式模式的鍵盤腳本(跳過連結 → 主要內容、對話框焦點陷阱與返回、最上層 Escape、頁籤清單中的方向鍵、可點選行上的 Enter)以及手動檢查:文字間距 (1.4.12)、200% 縮放、拖曳替代 (2.5.7)、冗餘輸入 (3.3.7)、可存取驗證 (3.3.8)、含表格的圖表、電子郵件(語言、呈現表格、替代文字、深色模式)。
3. 發現與修正
表格:# | 準則 | 位置 | 嚴重性 (嚴重/中等/輕微) | 已修正?。在共用元件層級修正(一個焦點環記號、一個對話框按鍵輔助、可點選行、複合按鍵、滾動區域、即時區域、滾動內距)。將每個新的可存取名稱翻譯成所有已設定的語言。為新的顏色組合新增對比色對。
4. 防護
- 共用元件的合約測試(名稱、訊息前的即時區域存在、記號對、減少動畫、跳過連結)。
- 將剩餘發現記錄在
tests/a11y/known.json中,附帶原因,與無障礙聲明頁面上的已知限制內容一致(目標為 WCAG 2.2 AA、限制、聯絡方式;使用所有已設定的語言;從每個頁尾連結)。
5. 報告
「之前」→「之後」的違規計數(按表面)、按嚴重性計數(已修正/未修正)、截圖、未完成事項(螢幕閱讀器、原生殼、外部稽核)。一則「最新消息」項目。STATE.md 區段。