Compétences accessibility-auditor

accessibility-auditor

Sûr 🌐 Accès réseau⚙️ Commandes externes

审计并修复网页无障碍访问问题

Également disponible depuis: CrazyDubya

网页无障碍访问问题可能导致残障用户无法访问您的网站。此技能提供全面的指导,帮助实现 WCAG 2.1 标准、ARIA 属性和键盘导航,为所有用户创建包容性体验。

Prend en charge: Claude Codex Code(CC)
📊 69 Adéquat
1

Télécharger le ZIP du skill

2

Importer dans Claude

Allez dans Paramètres → Capacités → Skills → Importer un skill

3

Activez et commencez à utiliser

Tester

Utilisation de "accessibility-auditor". Make this navigation menu accessible

Résultat attendu:

  • 使用带有 aria-label 的 nav 元素来标识导航区域
  • 确保所有链接都可聚焦,具有适当的 tabindex 值
  • 为下拉菜单添加箭头键盘导航
  • 包含跳过链接以绕过重复导航
  • 验证所有交互元素的焦点指示器可见

Utilisation de "accessibility-auditor". Fix this form for accessibility

Résultat attendu:

  • 添加显式的 label 元素,其 for 属性与 input id 匹配
  • 使用 fieldset 和 legend 对相关字段进行分组
  • 对必填字段使用 aria-required
  • 为验证消息添加 aria-invalid 和 aria-describedby
  • 确保错误消息使用 aria-live 区域

Audit de sécurité

Sûr
v5 • 1/17/2026

Pure documentation skill containing only accessibility guidance, code examples, and best practices. All static findings are false positives: ARIA attributes (like aria-checked, aria-expanded) were misidentified as cryptographic algorithms; markdown code block backticks were misidentified as shell execution; legitimate W3C URLs are not security risks. No executable code, network calls, or credential access.

2
Fichiers analysés
687
Lignes analysées
2
résultats
5
Total des audits

Score de qualité

38
Architecture
100
Maintenabilité
87
Contenu
21
Communauté
100
Sécurité
87
Conformité aux spécifications

Ce que vous pouvez construire

构建无障碍组件

使用适当的 ARIA 属性和焦点管理创建无障碍的模态框、手风琴、选项卡和表单。

审计网页无障碍访问

使用包含的测试检查清单和无障碍访问指南审查网站的 WCAG 违规情况。

设计包容性界面

设计可与辅助技术配合使用并符合无障碍访问标准的用户体验。

Essayez ces prompts

基本 WCAG 检查
Review this HTML code for WCAG 2.1 AA compliance. Check for missing alt text, color contrast issues, and semantic HTML problems.
ARIA 实现
Help me add proper ARIA attributes to make this custom component accessible. It is a dropdown/modal/accordion component.
键盘导航
This component is not keyboard accessible. Show me how to implement proper tab order and keyboard event handling.
屏幕阅读器测试
What screen reader tests should I run to verify this page is accessible for users with visual impairments?

Bonnes pratiques

  • 在开发早期就开始无障碍访问测试,而不是在最后修复问题
  • 在添加 ARIA 属性之前先使用语义化 HTML 元素
  • 使用真实的辅助技术进行测试,而不仅仅是自动化工具

Éviter

  • 在没有适当键盘支持的情况下在 div 元素上使用 role="button"
  • 依赖占位符文本作为可见表单标签的替代品
  • 仅使用颜色向用户传达信息

Foire aux questions

此技能涵盖哪些 WCAG 级别?
此技能涵盖 WCAG 2.1 Level AA 要求作为基线,并为 Level AAA 增强要求提供额外指导。
最小颜色对比度比例是多少?
普通文本需要 4.5:1 的比例才能符合 AA 标准,7:1 才能符合 AAA 标准。大文本需要 3:1 才能符合 AA 标准,4.5:1 才能符合 AAA 标准。
此技能是否适用于 React 或 Vue?
可以。无障碍访问原则和 ARIA 模式适用于任何网页框架。代码示例是与框架无关的 HTML。
使用此技能时我的数据安全吗?
是的。这是一个基于提示的技能,不执行代码。不会在对话之外存储、传输或访问任何数据。
为什么我的无障碍访问审计失败?
常见问题包括图片缺少替代文本、颜色对比度低、表单字段未标记、缺少地标以及缺乏键盘导航。
这与自动化无障碍访问工具有何不同?
自动化工具只能捕获约 30% 的问题。此技能为自定义组件和屏幕阅读器兼容性等复杂场景提供人工专业知识。

Détails du développeur

Structure de fichiers

📄 SKILL.md