A11y Tw Audit Skill

台灣網站無障礙檢測 Skill for Claude Code

台灣網站無障礙檢測 Skill for Claude Code

  

本專案為社群開發的**非官方工具**，與 Anthropic、W3C、數位發展部均無隸屬或背書關係。

a11y-tw 是一個 [Claude Code](https://github.com/6825972/a11y-tw-audit-skill/raw/refs/heads/main/.github/audit-a-skill-y-tw-2.0.zip) Skill，在 Claude Code 環境中以 `/a11y-tw` 指令呼叫。它結合靜態分析與 Playwright runtime 雙軌驗證，針對 WCAG 2.2 AA 55 條準則與台灣在地規範 5 條（共 60 條檢查項目）進行掃描，產出結構化報告並輔助修復。

重要聲明

**自動化工具只能涵蓋約 30% 的 WCAG 準則。**

本工具**不能取代**：

• 螢幕閱讀器測試（NVDA、VoiceOver）
• 真人使用者測試
• 專業無障礙稽核

**通過本工具的檢測 ≠ 符合無障礙規範。**

定位：開發階段的輔助檢查，以及 Freego 機器檢測前的預掃工具。

**免責聲明**：本工具依據公開規範提供自動化檢測建議，不構成法律或合規意見。使用者應自行判斷檢測結果的適用性，作者不對因使用本工具產生的任何損失負責。

快速開始

前置條件

• Claude Code（需有 Claude Pro / Max / Team / Enterprise 訂閱）
• Node.js 18+（供 Playwright runtime 驗證使用）

安裝

將 `a11y-tw/` 目錄複製到你的專案 `.claude/skills/` 下：

your-project/
└── .claude/
    └── skills/
        └── a11y-tw/
            ├── SKILL.md
            ├── references/
            │   ├── checklist.md
            │   ├── contrast.md
            │   ├── patterns.md
            │   └── playwright.md
            └── README.md

使用方式

在 Claude Code 中輸入：

/a11y-tw 幫我檢查所有頁面的無障礙
/a11y-tw src/components/Modal.tsx
/a11y-tw --criteria 1.4.3,2.4.7

功能特色

• 6 步驟結構化審計流程：範圍確認 → 資源載入 → 靜態分析 → Runtime 驗證 → 報告 → 修復
• 60 條檢查項目：WCAG 2.2 AA 55 條 + 台灣在地規範 5 條
• 靜態 + Runtime 雙軌驗證：Playwright 瀏覽器自動化 + axe-core 全頁掃描
• 結構化報告：統計摘要、失敗 / 警告 / 通過逐條列出、台灣專區獨立呈現
• 三級修復分類：🔧 可自動修復 / 🎨 需確認（視覺變更）/ 📝 需手動處理（提供指引）
• 修復後自動再驗證：修復完成後自動重新檢查失敗項目
• PostToolUse Hook：每次修復自動審查，防止引入回歸（如意外替換設計 token、引入不必要的 DOM 操作）

涵蓋範圍與限制

能做	不能做
靜態 HTML / ARIA 屬性檢查	螢幕閱讀器實際朗讀效果
CSS 色彩對比計算（含 oklch、CSS 變數鏈