免费无障碍工具
网站无障碍检测工具
输入网址,我们会在真实浏览器中按 WCAG 2.2 A 级和 AA 级规则检测该页面以及最多四个关键页面。每个障碍都附有对应的元素、所在页面、截图,以及它会影响哪些人群的说明。
免费。约一分钟内测试最多五个关键页面。
此工具检查什么
代表您网站的五个页面
您输入的页面,加上根据网站类型从其链接中挑选的最多四个页面。对网店来说,就是一个产品系列页、一个产品页、购物车和一个内容页;其他网站则是价格、联系方式、文章或服务等页面。模板会重复使用,所以一个产品页通常就能反映所有产品页的问题。
在渲染后的页面上运行 WCAG 规则
每个页面都在 Chromium 中以 1366 × 900 加载,待页面脚本运行完毕后,由 Deque 的开源规则引擎 axe-core 运行其 WCAG 2.0、2.1 和 2.2 A 级与 AA 级规则。这样也能发现主题或应用只有在浏览器中构建页面后才会产生的问题。
影响程度与成功准则
每条未通过的规则都会显示其影响程度(关键、严重、中等或轻微)、对应的 WCAG 成功准则,以及它影响了多少元素和页面。
标出未通过的元素
一个示例元素的 HTML,以及一张标出该元素轮廓的页面截图,让您或您的开发人员无需猜测就能在模板中找到它。
需要人工判断的项目
当 axe-core 发现无法确定的情况时,例如背景图片上的文字无法测量对比度,该项目会被列为“需复核”。它绝不会被计为未通过。
键盘测试
在第一个页面上,我们按 40 次 Tab 键并记录焦点的去向:焦点是否移动,是否陷入循环(常见于 Cookie 横幅内),第一个停留位置是否为跳转链接,以及哪些获得焦点的元素没有可见的焦点指示。最后一项检查属于启发式判断,因此显示为“需复核”。
它无法检查什么
- 无法听到屏幕阅读器实际播报的内容。软件能确认按钮有名称,却无法确认这个名称朗读出来是否讲得通。
- 无法评判视频和音频的字幕、文字稿或音频描述。
- 无法评估认知和内容方面的准则,例如说明是否清晰,或错误提示能否帮助用户纠正错误。
- 无法测试需要登录、密码或有机器人防护的页面,也无法走完结账流程。
- 无法告诉您网站是否符合 WCAG 或任何法律的要求。自动化规则只能发现部分问题,其余问题需要人工检查。
为什么重要
无障碍问题往往是模板中的小错误,影响却很大。一个只有图标、没有可访问名称的购物车按钮,只会被播报为“按钮”,屏幕阅读器用户无从知道它的作用。白底灰字如果达不到 4.5:1 的对比度,许多低视力人士都难以阅读,在强烈阳光下使用手机的人也一样。
由于同样的页头、产品卡片和页脚出现在每个页面上,在模板中修复一处,就可能一次消除数百个未通过项。因此结果按规则分组,并统计受影响的元素和页面数量,而不是把每个实例都列为单独的问题。
在许多国家,无障碍还涉及法律层面。扫描无法告诉您某项法律是否适用于您,也无法判断您是否达到要求。它提供的是一份注明日期、列出您自己页面上真实障碍的清单,无论哪种情况,这都是切实可行的起点。
如何解读结果
- 关键
- 该障碍可能让部分用户完全无法使用这个元素,例如没有标签的表单字段或没有名称的按钮。请优先修复。
- 严重
- 该障碍会让部分用户完成任务的难度大增,例如正文文字未达到对比度要求。
- 中等
- 该障碍会造成困难或困惑,但用户通常可以设法绕过。
- 轻微
- 小问题或小麻烦。下次编辑该模板时仍值得一并修复。
- WCAG 成功准则
- 规则旁的编号(如 1.1.1 或 1.4.3)就是它所检测的准则。未列出准则的规则属于最佳实践,而不是 WCAG 的要求。
- 元素和页面
- 有多少元素未通过该规则,以及分布在多少个被测页面上。如果某条规则在每个页面都未通过,问题通常出在页头、菜单或页脚等共用部分。
- 需复核
- axe-core 发现了它无法判定的内容。请亲自查看该元素:它可能通过,也可能未通过。这些项目不计为未通过。
- 焦点陷阱
- 按 Tab 键时,焦点一直在同样几个元素之间循环。如果这些元素属于 Cookie 横幅,键盘用户可能无法到达页面的其余部分。
- 焦点不移动(Focus doesn’t move)
- 按 Tab 键始终没有任何元素获得焦点。链接和按钮可能是用 div 或 span 元素搭建的,也可能有脚本拦截了按键。
- 跳转链接
- 第一个 Tab 停留位置是否为“跳到主要内容”链接。没有它,键盘用户在每个页面都要先用 Tab 键穿过整个页头。地标(landmark)和标题同样可以满足 WCAG 2.4.1 绕过区块(Bypass Blocks)。
- 没有可见的焦点指示
- 我们在这些获得焦点的元素上没有看到轮廓线(outline)、阴影(box shadow)或下划线。其他样式(如颜色变化)也可能是可见的,所以请亲自用 Tab 键逐一检查确认。
如何修复最常见的问题
文字未达到对比度要求
普通文字与背景的对比度至少需要 4.5:1,大号文字(约 24 px,或粗体约 18.7 px)需要 3:1。请在主题设置或设计令牌(design tokens)中修改颜色,而不是逐个元素修改,然后再次检查占位文字、悬停状态以及图片上的文字。
图片缺少 alt 文本
为每张有意义的图片添加 alt 属性,说明它展示的内容或作用,例如产品名称和颜色。装饰性图片使用空 alt(alt=""),让屏幕阅读器跳过。在 Shopify 中,可在产品“媒体”部分的图片上添加替代文本;在 WordPress 中,可在媒体库的“替代文本”字段中填写。
表单字段缺少标签
用 <label for> 将标签与每个输入框关联,并与字段的 id 对应;没有可见文字时,使用 aria-label。不要只靠占位文字充当标签:用户一开始输入,它就会消失。邮件订阅表单和页头搜索框是最常见的问题来源。
没有可访问名称的按钮和链接
购物车、搜索、菜单或社交媒体主页的图标控件,往往只包含一个 SVG。请添加可见文字或 aria-label,说明控件的作用(“打开购物车”,而不是“图标”),并为 SVG 本身添加 aria-hidden="true"。
困住焦点的 Cookie 横幅
确保横幅上的每个按钮都能用 Tab 键到达,并能用 Enter 键或空格键操作;关闭横幅后,焦点回到页面;不遮挡页面的横幅完全不占用焦点。请检查您所用同意管理工具的设置,如果脚本版本较旧,请更新。
CSS 中去除了焦点轮廓
在样式表中搜索链接、按钮和 :focus 上的 outline: none 或 outline: 0,并替换为可见的样式,例如 :focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }。
关于此工具的问题
这个无障碍检测工具免费吗?
是的。无需注册,只需确认您拥有或管理该网站。付费的无障碍修复报告会从您的站点地图中再增加最多 20 个页面,并提供纯键盘操作流程测试、320 px 重排检查、根据您未通过的代码生成的修改前后对比代码、AI 提示词、PDF 以及 5 次复测。
自动化检测工具能测试 WCAG 的多少内容?
只能测试一部分。规则可以检查图片是否有 alt 文本,却无法判断文字是否描述了图片;可以检查字段是否有标签,却无法判断标签是否清晰。请把结果当作一份确定存在的问题清单,再用键盘和屏幕阅读器测试其余部分。
如果扫描没有发现问题,我的网站就符合 ADA 或 WCAG 吗?
不是。任何自动化测试都无法证明网站符合 WCAG,或遵守 ADA、《欧洲无障碍法案》(European Accessibility Act)或其他任何法律。结果干净只说明自动化规则在被测页面上没有发现未通过项。
可以检测测试环境网站或需要登录的页面吗?
需要登录、密码或有机器人防护的页面无法测试。如果您的机器人防护拦截了扫描,请放行 FixReportsScanner 用户代理(user agent),或测试一个公开的测试环境副本。
我已经修复了问题,为什么结果看起来没变?
同一网址的结果可能会沿用过去一小时内的扫描。请等这一小时过去,并清除页面缓存或 CDN 缓存后再测试。
需要修复方案,而不只是问题清单?
无障碍修复报告($174,一次性)以完整的免费扫描为起点,增加更多页面、每项发现需要做的修改、PDF 以及验证修复的复测。