axe-core在浏览器控制台手动检测可访问性问题是最轻量直接的实时方式，只需打开页面、f12进入console，先注入axe.min.js再执行axe.run()，即可输出violation列表及影响节点数。
用 axe-core 在浏览器控制台手动检测可访问性问题
axe-core 是最轻量、最直接的实时检测方式，不需要构建流程介入，适合快速验证单页 HTML 的可访问性缺陷。它不依赖编辑器插件或打包工具，只要页面能运行 JavaScript 就能用。
- 在 Chrome 或 Firefox 打开目标页面，按
F12打开开发者工具，切换到Console标签页 - 粘贴执行：
await (await fetch('https://cdn.jsdelivr.net/npm/axe-core@4.10.0/axe.min.js')).text().then(eval)（注意：仅用于临时调试，生产环境勿用） - 再执行：
await axe.run().then(results => console.table(results.violations.map(v => ({ id: v.id, description: v.description, nodes: v.nodes.length })))); - 每个
violation对应一个可访问性错误，比如color-contrast、image-alt、heading-order，nodes字段告诉你影响了多少个 DOM 节点
VS Code 中用 axe-linter 插件实现保存时自动检查
axe-linter 是目前对纯 HTML 文件支持最稳定的 VS Code 插件，它基于 axe-core，但做了编辑器层适配，能解析未运行的 HTML 源码并定位到行号。
- 在 VS Code 扩展市场搜索并安装
axe-linter（作者是deque-systems） - 安装后默认启用，无需额外配置；若失效，检查是否被其他 linter 插件（如
HTMLHint）禁用了html语言模式的验证 - 它只报告
error和warning级别问题，不会提示incomplete（因静态分析无法完全模拟 DOM 状态） - 常见误报场景：自定义元素（如
<my-button></my-button>）缺少role会被标为implicit-role，此时需显式加role="button"或改用标准语义化标签
Webpack + html-webpack-plugin 场景下集成 axe-core 进行构建时校验
如果项目用 Webpack 构建 HTML，且 HTML 由 html-webpack-plugin 注入模板生成，可在构建阶段插入 axe 检查，把可访问性问题卡在 CI 流程里。
- 安装依赖：
npm install --save-dev axe-core
- 在
webpack.config.js的plugins数组中添加自定义插件： - 关键限制：axe 必须在浏览器环境运行，所以该检查只能在
html-webpack-plugin的afterEmit钩子中启动一个 Puppeteer 实例加载生成的 HTML 文件，再执行axe.run() - 性能敏感：每次构建都启动 Chromium 开销大，建议仅在
process.env.CI === 'true'时启用 - 错误不会中断构建（避免阻塞开发），但会输出
axe violation count: X到终端，并返回非零退出码供 CI 判定失败
为什么不能靠 ESLint 或 Prettier 检查 HTML 可访问性
ESLint 和 Prettier 处理的是 JavaScript 和格式化逻辑，它们对 HTML 的支持非常有限——ESLint 的 eslint-plugin-html 只能提取 script/style 块，Prettier 的 HTML 支持仅限缩进和引号，都不具备语义分析能力。
-
eslint-plugin-jsx-a11y只适用于 JSX（React），对原生 HTML 文件完全无效 - 试图用正则匹配
<img>标签并检查alt属性，会漏掉动态生成内容、aria-*属性组合、焦点顺序等深层问题 - 可访问性必须结合 DOM 结构、计算样式、用户交互路径判断，静态文本分析做不到这点
真正可靠的实时提示，始终要回到浏览器上下文或模拟 DOM 的运行时检查。编辑器插件只是把这一步提前到了保存时刻，而不是绕过它。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
