⚡

网页无障碍访问 web-accessibility

网页无障碍访问合规专家技能，专注于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合规性审计
- 屏幕阅读器测试
- 键盘导航验证
- 色彩对比度分析
- 包容性设计实施