技能 web-accessibility
📦
網頁應用程式常因無障礙實作不佳而排除身心障礙使用者。本技能提供 WCAG 2.1 指引，幫助建立具包容性、螢幕閱讀器友好、可鍵盤導航的介面。
支援: Claude Codex Code(CC)
1
下載技能 ZIP
2
在 Claude 中上傳
前往 設定 → 功能 → 技能 → 上傳技能
3
開啟並開始使用
測試它
正在使用「web-accessibility」。 Create an accessible modal in React
預期結果:
- 傳回具有 role='dialog'、aria-modal='true'、aria-labelledby、焦點陷阱、ESC 處理常式和點擊外部關閉的對話方塊元件
- 包含無障礙檢查清單：語意化 HTML、鍵盤導航、螢幕閱讀器公告
正在使用「web-accessibility」。 Build accessible login form
預期結果:
- 具有 <label htmlFor> 關聯、aria-required、aria-invalid、aria-describedby 用於錯誤訊息的表單
- 包含 role='alert' 用於錯誤公告，以及驗證失敗時的適當焦點管理
安全審計
安全v1 • 3/9/2026
All 113 static findings are FALSE POSITIVES. The skill is documentation about web accessibility (WCAG 2.1). The scanner detected backticks in markdown, legitimate reference URLs to accessibility resources, relative paths in docs, and false positives for 'key' (keyboard) and 'cryptographic' (MDN). No executable code, no shell commands, no malicious patterns exist.
2
已掃描檔案
655
分析行數
0
發現項
1
審計總數
未發現安全問題
審計者: claude
品質評分
38
架構
100
可維護性
87
內容
26
社群
100
安全
87
規範符合性
你能建構什麼
建立新的無障礙元件
從一開始就建立具有適當焦點管理、ARIA 標籤和鍵盤支援的 React 對話方塊、下拉選單或表單。
修正現有無障礙問題
透過遵循 WCAG 檢查清單和實作適當的語意化 HTML，識別並修正既有程式碼中的無障礙問題。
實作無障礙測試
使用 Jest 中的 axe-core 設定自動化無障礙測試，以便在部署前發現回歸問題。
試試這些提示
建立無障礙對話方塊
建立一個無障礙對話方塊元件，包含以下需求： - 框架：[React/Vue/原生 JS] - WCAG 層級：AA - 功能：焦點陷阱、ESC 關閉、點擊外部關閉 - 包含適當的 ARIA 屬性和螢幕閱讀器公告
建立無障礙表單
建立一個無障礙表單，包含： - 必填欄位驗證 - 帶有 aria-describedby 的清晰錯誤訊息 - 適當的標籤關聯 - 成功/錯誤狀態公告 - 驗證錯誤時的焦點管理
新增鍵盤導航
為 [下拉選單/標籤頁/選單] 新增完整的鍵盤導航支援，包括： - 方向鍵導航 - Home/End 鍵支援 - Enter/空格鍵啟動 - Escape 關閉 - 可見的焦點指示器
無障礙程式碼審查
審查此元件程式碼的無障礙問題： [貼上程式碼] 檢查項目：語意化 HTML、ARIA 使用、鍵盤無障礙、顏色對比、表單標籤、焦點管理
最佳實務
- 先使用語意化 HTML 元素，再新增 ARIA 屬性 - 原生 HTML 元素具有內建無障礙功能
- 始終維持可見的焦點指示器 - 永遠不要使用 outline: none 而不提供替代方案
- 在開發過程中使用實際鍵盤導航和螢幕閱讀器進行測試，而不僅僅是自動化工具
避免
- 使用具有 role='button' 的 div 而非原生 <button> 元素
- 僅使用 placeholder 作為表單輸入的唯一標籤
- 移除 outline:focus 樣式而不提供可見的焦點指示器
常見問題
什麼是 WCAG？
網頁內容無障礙指南（WCAG）是一套讓網頁內容對身心障礙人士更易存取的建議。它定義了三個層級：A、AA 和 AAA。
什麼是 ARIA？
無障礙富互聯網應用程式（ARIA）是一套讓網頁內容更易存取的屬性。它補充了原生 HTML 語意。
什麼是螢幕閱讀器？
螢幕閱讀器是將視覺內容轉換為語音或點字的軟體應用程式，供失明或視障人士使用。常見的包括 NVDA、JAWS 和 VoiceOver。
什麼是鍵盤無障礙？
鍵盤無障礙表示所有網站功能都可以僅使用鍵盤（Tab、Enter、空格鍵、方向鍵、Escape）來執行。這能幫助無法使用滑鼠的使用者。
什麼是焦點陷阱？
焦點陷阱將鍵盤焦點保留在對話方塊或浮動視窗內，直到關閉為止。這可以防止使用者在對話方塊開啟時按 Tab 鍵跳到背景內容。
如何測試無障礙？
使用 axe-core 或 Lighthouse 等自動化工具進行基本檢查。使用僅鍵盤和螢幕閱讀器進行手動測試對於全面評估是不可或缺的。