无障碍检测工具

检测并修复常见的 Web 无障碍问题 · 点击「修复」按钮查看效果

有问题的页面
2
严重问题
2
中等问题
1
轻微问题
0
已修复
问题 1：输入框无 label
问题 2：图片无 alt 属性
产品展示图
问题 3：对比度不足
此文字颜色对比度仅 2.8:1，不符合 WCAG AA 标准
问题 4：按钮无键盘支持
问题 5：链接无焦点指示
检测结果面板
输入框缺少 label
严重
搜索输入框没有关联 <label> 元素，屏幕阅读器无法识别输入框用途。
WCAG 1.1.1 / 2.4.6 为输入框添加关联 label 或 aria-label
图片缺少 alt 属性
严重
产品图片没有 alt 属性，屏幕阅读器无法描述图片内容。
WCAG 1.1.1 添加描述性 alt 文本
颜色对比度不足
中等
文字颜色 (6a7a9a) 与背景色 (161630) 对比度仅 2.8:1，低于 AA 标准 4.5:1。
WCAG 1.4.3 提高文字颜色对比度至 4.5:1 以上
按钮无键盘支持
中等
自定义按钮没有 tabindex 和键盘事件（Enter/Space），键盘用户无法操作。
WCAG 2.1.1 添加 tabindex 和 keydown 事件处理
链接无焦点指示
轻微
链接的 :focus 样式被移除，键盘导航用户无法定位焦点位置。
WCAG 2.4.7 添加自定义 focus-visible 样式