SuperAPI AI 工具集

web-accessibility

测试与质量

查看项目

更新于 10-15 07:54

技能介绍

用途

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

最佳实践

  1. 语义化 HTML:使用恰当的 HTML 元素。
  2. 按需使用 ARIA:在复杂交互中使用 ARIA。
  3. 键盘可访问:确保所有功能都可通过键盘操作。
  4. 颜色对比度:满足 WCAG 对比度要求。
  5. 测试:使用屏幕阅读器和仅键盘进行测试。

适用场景

  • WCAG 合规审计
  • 屏幕阅读器测试
  • 键盘导航验证
  • 颜色对比度分析
  • 包容性设计实施

限制

资料未提供该技能的安装命令、收费方式、支持的平台或运行环境等具体信息。