axe-core是ci中唯一值得卡点的a11y工具，因其断言式设计可直接抛错中断构建，支持细粒度规则开关、多dom环境注入、精准css路径定位，且需确保ci中dom与用户一致才能真正卡住问题。
CI 里加可访问性卡点，不是装个工具跑一下就完事——关键得让它真能拦住问题，且不误伤、不漏报。axe-core 是目前最可靠的选择，它能在构建阶段直接抛错中断流水线，而不是生成一份没人看的报告。
为什么 axe-core 是 CI 中唯一值得卡点的 a11y 工具
axe-core 天生为断言设计，axe.run() 返回结果后你只需检查 results.violations.length > 0，就能让 CI 立刻失败；Lighthouse 默认不因 a11y 分低而中断，还得额外配 lhci assert 规则，且必须启动 Chromium 实例，资源开销大、定位模糊；vnu.jar 和 html-validate 只校验 HTML 结构，对 aria-label 缺失、焦点顺序错乱这类运行时问题完全无感。
- axe-core 支持细粒度规则开关，比如只开
"wcag2aa"，避免被color-contrast这类易受环境干扰的规则反复误报 - 它可注入任意 DOM 环境：JSDOM（快但不完整）、Playwright page（推荐）、真实浏览器，不用强绑 Chrome
- 错误精准到
violation.nodes[0].target，返回类似["#main > .step:nth-child(2) button"]的 CSS 路径，开发能立刻定位
在 Playwright 测试中嵌入 axe 断言的最小可行写法
别用 page.accessibility.snapshot()，它只返回基础属性，不执行 WCAG 规则校验。真正起作用的是把 axe-core 注入页面上下文后调用 axe.run()。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 安装：
npm install axe-core - 注入脚本：
await page.addScriptTag({ path: require.resolve('axe-core') }) - 等 hydration 完成再扫（React/Vue）：
await page.waitForFunction(() => document.querySelector('#root')?.children.length > 0) - 执行扫描：
const results = await page.evaluate(() => (window as any).axe.run()) - 断言：
expect(results.violations).toHaveLength(0)，失败时打印results.violations.map(v => v.help)快速查修复指引
CI 环境下 axe 扫描失真的三个高频原因
本地全绿、CI 突然爆一堆 color-contrast 或 heading-order 错误？大概率不是代码退化，而是 axe 看到的 DOM 和你本地不一致。
- 字体未就绪：
getComputedStyle拿不到真实字号/颜色，加await page.waitForFunction(() => document.fonts.check('1em "Inter"')) - CSS 未加载完成：尤其用
@import或动态link标签时，需加await page.waitForLoadState('networkidle')或显式等待关键样式表 - JS 渲染未完成：某些组件依赖异步数据或微任务更新 DOM，不能只靠
DOMContentLoaded，得等具体元素出现，例如await page.waitForSelector('[data-testid="step-2"]')
真正卡得住的可访问性检查，从来不是“有没有工具”，而是能不能让 axe 在 CI 里看到和用户一模一样的 DOM，以及敢不敢把 violations.length > 0 当作构建失败的硬条件——中间任何妥协，都会让卡点变成摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
