frontend-accessibility
构建符合 WCAG 标准的无障碍 React 界面
Également disponible depuis: EIS-ITS
构建无障碍的 Web 界面可确保包括残障用户在内的所有人都能使用您的应用程序。此技能在 React 组件中强制执行 WCAG 标准、正确的 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 "frontend-accessibility". Create an accessible button component
Résultat attendu:
- 使用正确 type 属性的语义化按钮元素
- 3:1 对比度的可见焦点指示器
- 通过文本内容或 aria-label 提供可访问名称
- 支持 Enter 和空格键的键盘激活
- 正确向辅助技术传达禁用状态
Utilisation de "frontend-accessibility". Make this form keyboard accessible
Résultat attendu:
- 通过 htmlFor 和 id 将标签与输入框关联
- 焦点顺序遵循视觉布局
- 通过 aria-describedby 关联错误消息
- 正确管理 Tab 索引值
- 通过 aria-required 宣布必填字段
Audit de sécurité
SûrThis skill contains only documentation and guidance instructions for implementing accessibility features. The static analyzer flagged 20 benign text patterns (URLs, hashes, documentation paths, license names) as security issues. All findings are false positives. No executable code, network operations, or file modifications exist.
Facteurs de risque
🌐 Accès réseau (1)
📁 Accès au système de fichiers (4)
⚙️ Commandes externes (2)
Score de qualité
Ce que vous pouvez construire
构建无障碍的 React 组件
创建可与屏幕阅读器和键盘导航配合使用的按钮、表单和交互元素
维护无障碍标准
确保所有 UI 组件通过正确的 ARIA 属性和对比度满足 WCAG 指南要求
符合无障碍法规
满足 ADA、Section 508 和 WCAG 要求，避免法律问题并服务所有用户
Essayez ces prompts
Make this contact form fully accessible with proper labels, ARIA attributes, and keyboard navigation
Add proper ARIA attributes, focus management, and keyboard controls to this modal component
Update these component colors to meet WCAG 2.1 AA contrast ratio requirements (4.5:1 minimum)
Build an accessible navigation menu with proper ARIA landmarks, keyboard navigation, and screen reader support
Bonnes pratiques
- 始终使用 htmlFor 和 id 属性为表单输入框添加正确的标签
- 发布前使用仅键盘导航测试组件
- 使用语义化 HTML 元素（nav、main、button）而不是带 ARIA 的 div
Éviter
- 不要使用带 onClick 处理程序的 div 而非正确的按钮元素
- 避免仅使用颜色指示器而没有文字或图标替代方案
- 永远不要移除焦点轮廓而不提供自定义焦点指示器