accessibility-wcag
強制執行 WCAG 2.2 無障礙標準
許多網站未能符合無障礙標準,排除了身心障礙使用者。此技能確保所有 UI 元件符合 WCAG 2.2 要求,包括語意化 HTML、ARIA 標籤、鍵盤導航和色彩對比度。
Télécharger le ZIP du skill
Importer dans Claude
Allez dans Paramètres → Capacités → Skills → Importer un skill
Activez et commencez à utiliser
Tester
Utilisation de "accessibility-wcag". Make this button accessible: <div onClick={submit} class='btn'>Submit</div>
Résultat attendu:
- 將 <div> 替換為 <button> 以獲得原生鍵盤和焦點支援
- 移除 cursor: pointer - 按鈕已具有適當的懸停狀態
- 為鍵盤使用者新增使用 CSS outline 的可見焦點樣式
- 修正後的程式碼:<button onClick={submit} class='btn'>Submit</button>
Utilisation de "accessibility-wcag". Check this image markup: <img src='chart.png' alt='Image' />
Résultat attendu:
- 替代文字 'Image' 不夠描述性 - 應描述資料或含義
- 更好的做法:'Quarterly revenue growth chart showing 15% increase'
- 如果純粹是裝飾性且有相鄰文字,使用 alt='' 搭配 role='presentation'
Audit de sécurité
SûrPure documentation skill containing only accessibility guidelines. No executable code, network calls, file system access, or command execution. All 49 static findings are false positives from markdown code fences and documentation references being misinterpreted as security issues.
Facteurs de risque
🌐 Accès réseau (4)
📁 Accès au système de fichiers (1)
⚙️ Commandes externes (29)
Score de qualité
Ce que vous pouvez construire
建立無障礙元件
建立遵循 WCAG 2.2 指南的新 React、Vue 或 HTML 元件,以完全符合無障礙規範。
審查程式碼的無障礙性
在合併到主分支之前,識別並修復拉取請求中的無障礙問題。
稽核現有介面
評估目前的網頁應用程式是否符合 WCAG 2.2 規範,並記錄無障礙缺口。
Essayez ces prompts
審查此 React 元件的 WCAG 2.2 無障礙問題。檢查語意化 HTML、鍵盤無障礙性、ARIA 屬性和色彩對比度。列出任何違規項目並提供修正後的程式碼。
檢查此表單實作的無障礙合規性。驗證所有輸入欄位都有適當的標籤、錯誤訊息會向螢幕閱讀器宣告,以及焦點管理正常運作。
審查此模態對話框實作。確保它具有適當的 role='dialog'、aria-modal、鍵盤捕獲、焦點管理,以及根據 WCAG 2.2 指南的 Escape 鍵支援。
分析此樣式表中的配色方案。計算所有文字顏色相對於其背景的對比度。標記任何未達到 WCAG AA(4.5:1)或 AAA(7:1)要求的項目。
Bonnes pratiques
- 當原生元素存在時,使用語意化 HTML 元素(<button>、<nav>、<main>)而不是帶有 ARIA 屬性的 <div>
- 確保所有互動元素都可透過鍵盤存取,並具有不僅依賴顏色的可見焦點指示器
- 在部署前進行純鍵盤導航和螢幕閱讀器測試,以捕捉實際的無障礙問題
Éviter
- 使用帶有 onClick 的 <div> 而非 <button> 元素 - 會移除原生鍵盤支援和焦點管理
- 移除 outline:focus 樣式而不提供替代的可見焦點指示器
- 僅依賴顏色來傳達資訊,而沒有文字標籤、圖示或其他非顏色指示器