accessibility
审核并修复 WCAG 2.2 无障碍问题
网页无障碍问题会导致用户放弃访问网站。本技能提供 WCAG 2.2 指南和代码模式，使内容对残障人士可访问。
Descargar el ZIP de la skill
Subir en Claude
Ve a Configuración → Capacidades → Skills → Subir skill
Activa y empieza a usar
Pruébalo
Usando "accessibility". <button><svg>icon</svg></button>
Resultado esperado:
问题：按钮缺少屏幕阅读器的可访问名称。
修复：添加 aria-label 或可见文本。
```html
<button aria-label="关闭菜单">
<svg aria-hidden="true">icon</svg>
</button>
```
Usando "accessibility". Navigation menu with keyboard trap
Resultado esperado:
问题：键盘焦点被困在下拉菜单中。
修复：添加 Escape 键处理程序和适当的焦点管理。
```javascript
dropdown.addEventListener('keydown', (e) => {
if (e.key === 'Escape') closeDropdown();
});
```
Usando "accessibility". Form without labels
Resultado esperado:
问题：输入字段缺少程序化标签。
修复：添加明确的标签关联。
```html
<label for="email">Email address</label>
<input type="email" id="email" autocomplete="email">
```
Auditoría de seguridad
Riesgo bajoStatic analysis flagged 147 potential issues, but all findings are FALSE POSITIVES. The scanner misidentified markdown documentation patterns (code blocks, WCAG criterion numbers, relative paths) as security vulnerabilities. This is a pure documentation skill with no executable code, network calls, or credential handling.
Problemas de riesgo medio (1)
Problemas de riesgo bajo (1)
Puntuación de calidad
Lo que puedes crear
无障碍代码审查
根据 WCAG 2.2 指南审查拉取请求中的无障碍问题并建议修复方案
无障碍审核报告
生成带有修复代码示例的优先级无障碍问题报告
无障碍组件实现
创建具有适当 ARIA 属性、键盘支持和焦点管理的无障碍 UI 组件
Prueba estos prompts
检查此 HTML 代码片段的无障碍问题：[在此粘贴 HTML]
审核以下页面内容是否符合 WCAG 2.2 AA 合规性，并列出所有问题及其严重级别和修复建议：[在此粘贴 HTML 内容]
按照 WCAG 2.2 指南实现一个无障碍的 [组件类型，如模态框/下拉菜单/标签页]。包含键盘导航、ARIA 属性和焦点管理。
以下组件存在 [具体问题]。请修复使其符合 WCAG 2.2 AA 要求：[在此粘贴组件代码]
Mejores prácticas
- 尽可能使用原生 HTML 元素（button、nav、main），然后再添加 ARIA
- 通过从页面开头到结尾按 Tab 键来测试键盘导航
- 确保所有交互元素都有可见的焦点指示器
Evitar
- 使用 role='button' 的 div 代替原生 <button> 元素
- 在未提供替代焦点指示的情况下移除 outline:focus 样式
- 仅依赖颜色来传达信息，而没有文本或图标替代方案