可借助chrome浏览器内置lighthouse工具开展无障碍专项审计,具体包括:一、通过开发者工具启动;二、使用官方扩展程序;三、命令行cli方式;四、报告中识别关键问题如对比度、alt属性、可访问名称、标题层级及id唯一性。

如果您希望验证网站是否满足屏幕阅读器用户的使用需求,则可借助Chrome浏览器内置的Lighthouse工具执行无障碍(A11y)专项审计。以下是开展此项检测的具体路径:
一、通过Chrome开发者工具启动Lighthouse无障碍审计
此方式直接调用浏览器原生集成的Lighthouse引擎,无需额外安装组件,能完整捕获页面结构、语义标记及键盘导航行为,生成符合WCAG标准的可访问性评分报告。
1、在Chrome浏览器中打开待测网站页面。
2、按下 F12 键 或在页面空白处右键选择“检查”,打开开发者工具。
3、点击顶部标签栏中的 Lighthouse 选项卡;若未显示,点击右上角“更多工具”按钮展开后选择。
4、在左侧面板中,取消勾选“性能”“SEO”等其他类别,仅保留 “可访问性”(Accessibility) 一项。
5、确保设备模式设置为 “移动设备” 并启用 “Slow 4G”网络节流,以覆盖更严苛的辅助技术运行环境。
6、点击 “生成报告” 按钮,等待约30–60秒完成自动审计。
二、使用Chrome官方Lighthouse扩展程序执行无障碍检测
该方法提供独立操作入口,绕过开发者工具界面,适合非技术人员或需快速复用检测流程的场景,支持一键触发并生成含详细问题定位的HTML格式报告。
1、访问 Chrome 网上应用店,搜索“Lighthouse”,确认发布者为 Google LLC 后点击“添加至 Chrome”。
2、安装完成后,刷新目标网页,在浏览器右上角工具栏找到蓝色 灯塔图标。
3、点击图标,在弹出窗口中取消其他维度,仅勾选 “Accessibility” 选项。
4、点击 “Generate report”,插件将接管当前标签页并执行无障碍专项扫描。
5、分析结束后,系统自动在新标签页中打开HTML报告,其中所有失败项均标注具体DOM节点位置与修复指引。
三、通过命令行(CLI)运行Lighthouse无障碍审计
此方式面向开发与测试人员,支持参数化配置、批量网址扫描及CI/CD流程集成,可导出JSON或HTML报告用于自动化比对与归档,且能精确控制axe-core规则集版本。
1、确保本地已安装 Node.js 18.0+ 及npm包管理器。
2、在终端中执行命令:npm install -g lighthouse 完成全局安装。
3、运行指令:lighthouse https://example.com --only-categories=accessibility --output=json --output-path=./a11y-report.json --view。
4、命令执行后,Lighthouse将自动启动Chrome实例,加载页面并运行axe-core无障碍规则集,最终在浏览器中打开可视化报告,并保存结构化JSON结果至指定路径。
四、在Lighthouse报告中识别关键无障碍问题
报告生成后,需重点关注“可访问性”大类下的具体失败项,每项均对应WCAG 2.1标准条款,Lighthouse会明确指出违反的准则编号(如 WCAG 1.1.1、1.3.1、2.4.6 等)及对应DOM元素。
1、查看 “Contrast”(颜色对比度) 条目,确认所有文本节点是否满足最小对比度要求(正常文本 ≥ 4.5:1,大号文本 ≥ 3:1)。
2、定位 “Image elements do not have [alt] attributes” 类错误,核查缺失alt属性的标签并补充有意义的替代文本。
3、检查 “ 提示,确认所有
4、审查 “Heading elements are not in a sequentially-descending order”,修正跳级使用的
–标签,确保语义层级连续。
5、验证 “[id] attributes on active, focusable elements are unique”,排查重复ID导致屏幕阅读器焦点错位的问题。











