cuihua-a11y-checker ♿

为所有人构建无障碍应用

AI驱动的无障碍辅助工具，确保您的应用适用于所有用户：

• - ♿ WCAG 2.1 合规性
• 🎯 自动修复常见问题
• ⌨️ 键盘导航测试
• 🎨 颜色对比度验证
• 📱 屏幕阅读器优化

为什么无障碍性很重要

• - 🌍 15%的人口存在残障
• ⚖️ 法律要求在许多国家
• 📈 更好的用户体验适用于所有人
• 🔍 更好的SEO（搜索引擎喜欢语义化HTML）

快速开始

检查 src/components 的无障碍性

输出：

♿ 无障碍性报告
━━━━━━━━━━━━━━━━━━━━

扫描文件数：12
发现问题数：18

🔴 严重问题（3）：
- 图片缺少替代文本（5处）
- 表单输入缺少标签（2处）
- 颜色对比度不足（1处）

🟡 警告（8）：
- 按钮缺少ARIA标签
- 非语义化HTML元素
- 缺少跳过导航链接

🟢 建议（7）：
- 添加地标（header、main、footer）
- 改进标题层级
- 添加焦点指示器

功能特性

1. WCAG合规性 ✅

根据WCAG 2.1标准进行检查：

A级（必须满足）：

• - 图片的文本替代
• 键盘无障碍性
• 颜色不是唯一的视觉手段
• 表单的标签或说明

AA级（应该满足）：

• - 颜色对比度比例 ≥ 4.5:1
• 文本可缩放至200%
• 多种导航方式
• 一致的导航

AAA级（锦上添花）：

• - 颜色对比度比例 ≥ 7:1
• 音频的手语翻译
• 扩展音频描述

2. 自动修复问题 🔧

修复前：
html

点击

修复后：
html

点击

3. 键盘导航 ⌨️

测试键盘无障碍性：

⌨️ 键盘导航测试
━━━━━━━━━━━━━━━━━━━━━━━━

✅ Tab键顺序符合逻辑
❌ 焦点指示器不可见
❌ 缺少跳过链接
✅ 所有交互元素可访问

问题：

1. 1. 添加 :focus 状态的CSS
2. 添加跳过导航链接
3. 确保模态框能锁定焦点

4. 颜色对比度 🎨

验证颜色组合：

🎨 颜色对比度报告
━━━━━━━━━━━━━━━━━━━━━

❌ 失败：#777 在 #fff 上
比例：4.47:1（需要4.5:1）
位置：.text-muted 类
修复：使用 #767676 或更深的颜色

✅ 通过：#000 在 #fff 上
比例：21:1

✅ 通过：#0066cc 在 #fff 上
比例：7.47:1

5. ARIA标签 🏷️

自动生成语义化标签：

html

6. 屏幕阅读器测试 📢

模拟屏幕阅读器体验：

📢 屏幕阅读器输出
━━━━━━━━━━━━━━━━━━━━━

导航：
导航，地标
首页，链接
关于，链接
联系，链接

主要内容：
主要内容，地标
欢迎访问我们的网站，一级标题
今天就开始，二级标题
注册，按钮

问题：
- 第45行的按钮没有可访问名称
- 第67行的图片没有替代文本

使用示例

示例1：组件审计

用户： 检查LoginForm组件的无障碍性

代理：

♿ 无障碍性审计：LoginForm.jsx
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

🔴 严重问题（2）：

1. 1. 表单输入缺少标签（第12-15行）

修复：添加标签
邮箱

1. 2. 提交按钮没有可访问名称（第18行）

修复：添加文本或aria-label

🟡 警告（1）：

1. 1. 没有为屏幕阅读器提供错误提示

修复：添加aria-live区域

WCAG级别：当前为D级（不合规）
修复后：AA级 ✅

示例2：颜色对比度修复

用户： 修复颜色对比度问题

代理：

🎨 正在修复颜色对比度...

发现3个问题：

1. 1. .text-muted（#777 在 #fff 上）

当前：4.47:1（失败） 修复：#767676（4.54:1）✅

1. 2. .btn-secondary（#999 在 #fff 上）

当前：2.85:1（失败） 修复：#595959（7.00:1）✅

1. 3. .link-subtle（#aaa 在 #fff 上）

当前：2.32:1（失败） 修复：#6c6c6c（4.50:1）✅

已更新：styles.css
所有对比度现在符合WCAG AA标准！

示例3：键盘导航

用户： 测试键盘导航

代理：

⌨️ 正在测试键盘导航...

✅ 通过：Tab键顺序遵循视觉顺序
✅ 通过：所有交互元素可聚焦
❌ 失败：焦点指示器不可见
❌ 失败：模态框没有锁定焦点
✅ 通过：Escape键关闭模态框

建议：

1. 1. 添加可见的焦点样式：

*:focus { outline: 2px solid #0066cc; outline-offset: 2px; }

1. 2. 在模态框中实现焦点锁定：

useEffect(() => { const focusableElements = modal.querySelectorAll( button, [href], input, select, textarea ); // 焦点锁定逻辑... }, []);

1. 3. 添加跳过导航链接：

跳转到主要内容

配置

.a11yrc.json：

json
{
wcagLevel: AA,
rules: {
colorContrast: error,
altText: error,
ariaLabels: warn,
headingOrder: warn,
landmarks: warn
},
ignore: [
node_modules/,
build/
],
autoFix: {
altText: true,
ariaLabels: true,
colorContrast: false
}
}

定价

免费版

• - ✅ 基础WCAG检查
• ✅ 最多10个组件

专业版（$12/月）

• - ✅ 完整WCAG 2.1套件
• ✅ 自动修复建议
• ✅ CI/CD集成

企业版（$99/月）

• - ✅ 自定义规则
• ✅ 合规性报告
• ✅ 团队培训

资源

• - 📖 WCAG指南
• 🎓 无障碍性教程
• 💬 Discord

许可证

MIT

---

由翠花