⚡

网页可访问性Skill web-accessibility

网页可访问性技能专注于网站与应用的包容性设计，提供全面的WCAG合规性审计、屏幕阅读器兼容性测试、键盘导航验证、颜色对比度分析等服务。该技能帮助开发者、设计师和测试人员确保数字产品对残障人士（如视障、听障、行动不便用户）的可访问性，遵循国际WCAG标准，提升用户体验和网站合规性。关键词：网页可访问性、WCAG合规、屏幕阅读器测试、键盘导航、颜色对比度、包容性设计、无障碍设计、ARIA、语义化HTML、可访问性审计。

前端开发 0 次安装 0 次浏览 更新于 2/28/2026

name: web-accessibility description: Web accessibility compliance specialist. Use when conducting WCAG compliance audits, testing screen reader compatibility, validating keyboard navigation, or ensuring inclusive design. Focuses on WCAG 2.1/2.2 standards. author: Joseph OBrien status: unpublished updated: ‘2025-12-23’ version: 1.0.1 tag: skill type: skill

网页可访问性

此技能提供全面的网页可访问性分析与修复，专注于WCAG合规性、屏幕阅读器兼容性和包容性设计。

何时使用此技能

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

此技能的功能

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

如何使用

审计可访问性

对此网站进行WCAG合规性审计

测试键盘导航和屏幕阅读器兼容性

特定分析

检查颜色对比度比率并提出改进建议

WCAG标准

A级（最低要求）

  • 图像的文本替代
  • 视频的字幕
  • 键盘可访问
  • 无诱发癫痫的内容
  • 正确的标题结构

AA级（推荐）

  • 颜色对比度比率4.5:1（文本）
  • 文本可缩放至200%
  • 多种导航方法
  • 一致的导航
  • 错误识别

AAA级（增强）

  • 颜色对比度比率7:1（文本）
  • 手语解释
  • 扩展音频描述
  • 无时间限制
  • 上下文相关帮助

示例

示例1：WCAG审计

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

输出：

## 可访问性审计：主页

### 关键问题（A级）

**1. 缺少替代文本**
- **位置**：主图（第45行）
- **问题**：图像没有alt属性
- **修复**：添加描述性替代文本
```html
<!-- 之前 -->
<img src="hero.jpg">

<!-- 之后 -->
<img src="hero.jpg" alt="团队协作项目管理仪表板">

2. 缺少表单标签

  • 位置：邮箱输入框（第78行）
  • 问题：输入框没有关联的标签
  • 修复：添加正确的标签
<!-- 之前 -->
<input type="email" id="email">

<!-- 之后 -->
<label for="email">邮箱地址</label>
<input type="email" id="email" aria-required="true">

警告（AA级）

3. 颜色对比度

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

## 最佳实践

### 可访问性指南

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

## 相关用例

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