用途
web-accessibility 是一个网页无障碍合规检查专用技能,用于开展 WCAG 合规审计、测试屏幕阅读器兼容性、验证键盘导航、分析颜色对比度、确保包容性设计以及在发现无障碍问题后进行修复。
主要能力
- WCAG 合规:评估对 WCAG 2.1/2.2(A、AA、AAA)的合规情况。
- 屏幕阅读器测试:验证语义化 HTML 与 ARIA 的使用。
- 键盘导航:测试键盘可访问性与焦点管理。
- 颜色对比度:分析颜色对比度比值。
- 替代文本:评估替代文本与媒体无障碍。
- 表单无障碍:验证表单标签与错误处理。
WCAG 标准要点
Level A(最低要求):图片文本替代、视频字幕、键盘可访问、无诱发癫痫的内容、正确的标题结构。
Level AA(推荐):文本颜色对比度 4.5:1、文本可放大至 200%、多种导航方式、一致的导航、错误识别。
Level AAA(增强):文本颜色对比度 7:1、手语翻译、扩展音频描述、无时间限制、上下文相关帮助。
使用方式
可通过描述任务来触发审计,例如:对本网站进行 WCAG 合规审计;测试键盘导航与屏幕阅读器兼容性。也可提出更具体的分析,例如:检查颜色对比度比值并提出改进建议。
示例
示例 1:WCAG 审计
输入:Audit homepage for WCAG compliance
输出:
Accessibility Audit: Homepage
Critical Issues (Level A)
1. Missing Alt Text
- Location: Hero image (line 45)
- Issue: Image has no alt attribute
- Fix: Add descriptive alt text
<!-- Before -->
<img src="hero.jpg">
<!-- After -->
<img src="hero.jpg" alt="Team collaborating on project management dashboard">
2. Missing Form Labels
- Location: Email input (line 78)
- Issue: Input has no associated label
- Fix: Add proper label
<!-- Before -->
<input type="email" id="email">
<!-- After -->
<label for="email">Email Address</label>
<input type="email" id="email" aria-required="true">
Warnings (Level AA)
3. Color Contrast
- Location: Button text (line 92)
- Issue: Contrast ratio 3.2:1 (needs 4.5:1)
- Fix: Darken text color
最佳实践
- 语义化 HTML:使用恰当的 HTML 元素。
- 按需使用 ARIA:在复杂交互中使用 ARIA。
- 键盘可访问:确保所有功能都可通过键盘操作。
- 颜色对比度:满足 WCAG 对比度要求。
- 测试:使用屏幕阅读器和仅键盘进行测试。
适用场景
- WCAG 合规审计
- 屏幕阅读器测试
- 键盘导航验证
- 颜色对比度分析
- 包容性设计实施
限制
资料未提供该技能的安装命令、收费方式、支持的平台或运行环境等具体信息。