accessibility-check
檢查無障礙合規性
此技能根據 WCAG 2.1 指南評估 UI 組件和頁面。它識別無障礙問題並提供具體修復方案。使用它來確保您的介面可供身心障礙人士使用。
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“accessibility-check”。 檢查此按鈕的無障礙性:<button class="btn">Click me</button>
预期结果:
- 發現的問題:缺少無障礙名稱,沒有可見的焦點樣式
- 修復:新增 aria-label 或文字內容,確保具有 2px 外框的可見焦點指示器
- WCAG 標準:2.4.7 焦點可見、4.1.2 名稱角色值
- 程式碼範例:<button class="btn" aria-label="Submit form">Click me</button>
正在使用“accessibility-check”。 稽核此表單的 WCAG 合規性:<input type="email" placeholder="Email" />
预期结果:
- 問題:缺少明確的標籤元素,placeholder 不是無障礙名稱
- 修復:新增 <label> 元素,其 htmlFor 與輸入框 id 相符
- WCAG 標準:1.3.1 資訊和關係、3.3.2 標籤或說明
- 通過鍵盤導航測試
正在使用“accessibility-check”。 檢查 #fff 背景上 #999 顏色文字的色彩對比
预期结果:
- 對比度:2.5:1(未通過 WCAG AA)
- WCAG 1.4.3 要求正常文字的最低對比度為 4.5:1
- 修復:將文字顏色更改為 #595959 以達到 7:1 的對比度
- 使用色彩對比檢查工具進行驗證
安全审计
安全This is a pure documentation skill containing WCAG 2.1 guidelines and accessibility audit templates. No executable code, network calls, filesystem access, or external commands are present. The skill operates solely through prompt-based content delivery. All 42 static findings are false positives from the scanner misinterpreting markdown formatting and documentation content as security threats.
风险因素
🌐 网络访问 (2)
📁 文件系统访问 (1)
质量评分
你能构建什么
程式碼審查無障礙性
在合併拉取請求之前審查 React 組件的 WCAG 合規性
設計系統稽核
稽核組件庫的無障礙缺口和包容性設計問題
合規性驗證
驗證產品是否符合法律合規的無障礙要求
试试这些提示
檢查此按鈕組件的無障礙性。它是否可透過鍵盤存取?是否具有適當的焦點狀態?
稽核此表單的無障礙問題。檢查標籤、錯誤訊息和鍵盤導航。
對此頁面執行 WCAG 2.1 AA 無障礙稽核。檢查可感知、可操作、可理解和穩健性標準。
對此儀表板同時執行無障礙檢查和 UX 稽核。重點關注對比度、導航和 ARIA 使用。
最佳实践
- 在每次功能發布前執行無障礙檢查
- 結合自動化測試工具與手動鍵盤測試
- 在可能的情況下,讓身心障礙人士參與使用者測試
避免
- 使用 placeholder 文字代替適當的表單標籤
- 僅依賴顏色來傳達資訊
- 將無障礙測試推遲到開發結束時才進行