mcpField
W
web-accessibility

web-accessibility

github.com/89jobrien测试与质量435 次安装9 周前更新
代码仓库

关于 web-accessibility

web-accessibility 是用于审查和改进网站无障碍性的 skill，涵盖 WCAG 合规、屏幕阅读器、键盘导航、对比度、替代文本和表单。

主要功能

  1. 01WCAG 2.1/2.2 合规审查
  2. 02语义 HTML 与 ARIA 检查
  3. 03键盘导航和焦点审查
  4. 04颜色对比度分析
  5. 05替代文本和媒体检查
  6. 06表单标签与错误处理审查

适用场景

  1. 01按 WCAG 审查网站
  2. 02测试键盘和屏幕阅读器访问
  3. 03检查对比度与表单无障碍性

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/89jobrien/steve --skill web-accessibility

安装后在 Claude Code 中输入/web-accessibility确认已加载。

详细介绍

Web 无障碍

此技能提供全面的 Web 无障碍分析与修复，重点关注 WCAG 合规性、屏幕阅读器兼容性和包容性设计。

何时使用此技能

  • 进行 WCAG 合规性审计时
  • 测试屏幕阅读器兼容性时
  • 验证键盘导航时
  • 分析颜色对比度时
  • 确保设计具有包容性时
  • 修复无障碍问题时

此技能的功能

  1. WCAG 合规性：评估是否符合 WCAG 2.1/2.2（A、AA、AAA）
  2. 屏幕阅读器测试：验证语义化 HTML 和 ARIA 的使用情况
  3. 键盘导航：测试键盘无障碍性和焦点管理
  4. 颜色对比度：分析颜色对比度
  5. 替代文本：评估替代文本和媒体的无障碍性
  6. 表单无障碍性：验证表单标签和错误处理

使用方法

审计无障碍性
Conduct a WCAG compliance audit of this website

Test keyboard navigation and screen reader compatibility
特定分析
Check color contrast ratios and suggest improvements

WCAG 标准

A 级（最低要求）
  • 为图像提供文本替代内容
  • 为视频提供字幕
  • 支持键盘操作
  • 不包含会诱发癫痫的内容
  • 采用规范的标题结构
AA 级（推荐）
  • 颜色对比度达到 4.5:1（文本）
  • 文本可放大至 200%
  • 提供多种导航方式
  • 导航保持一致
  • 明确识别错误
AAA 级（增强）
  • 颜色对比度达到 7:1（文本）
  • 提供手语翻译
  • 提供扩展音频描述
  • 不设时间限制
  • 提供上下文相关帮助

示例

示例 1：WCAG 审计

输入：审计主页的 WCAG 合规性

输出：

## 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
```html

<img src="hero.jpg">


<img src="hero.jpg" alt="Team collaborating on project management dashboard">

2. 缺少表单标签

  • 位置：电子邮件输入框（第 78 行）
  • 问题：输入框没有关联的标签
  • 修复：添加适当的标签

<input type="email" id="email">


<label for="email">Email Address</label>
<input type="email" id="email" aria-required="true">
警告（AA 级）

3. 颜色对比度

  • 位置：按钮文本（第 92 行）
  • 问题：对比度为 3.2:1（需达到 4.5:1）
  • 修复：加深文本颜色

## Best Practices

### Accessibility Guidelines

1. **Semantic HTML**: Use proper HTML elements
2. **ARIA When Needed**: Use ARIA for complex interactions
3. **Keyboard Access**: Ensure all functionality is keyboard accessible
4. **Color Contrast**: Meet WCAG contrast requirements
5. **Testing**: Test with screen readers and keyboard only

## Related Use Cases

- WCAG compliance audits
- Screen reader testing
- Keyboard navigation validation
- Color contrast analysis
- Inclusive design implementation

评论

支持 Markdown