本地提交前用html-validate拦截可访问性硬伤，需手动启用a11y preset并设关键规则为error，配合lint-staged+husky校验html/vue/jsx模板，vs code中实时提示但不自动修复，真正落地的自动纠正仅限提交前拦截与编辑器提示环节。
本地提交前用 html-validate 拦截可访问性硬伤
直接在保存或 commit 时拦截 alt 缺失、id 重复、aria-label 拼错这类问题，比等 CI 报错再返工快得多。关键不是装插件，而是让它真起作用。
- 别只配
html-validate默认规则——默认不校验img[alt]是否为空字符串，也不拦button缺type，得手动启用a11ypreset："extends": ["html-validate:a11y"] -
lint-staged+Husky联动时，确保只跑.html、.vue、.jsx中的模板片段：对.vue文件需加html-validate-vue插件，否则<template></template>里的<img>根本不进校验流程 - 报错级别必须设为
error，比如"html-validate/no-alt-text": "error"；设成warn等于白配，git commit 仍会通过
VS Code 里实时提示但不自动修复？换 eslint-plugin-jsx-a11y
纯 HTML 文件用 html-validate 够用，但 React/Vue 项目里大量 JSX 或模板语法，html-validate 解析不了 {props.children} 这类动态内容。这时得靠 AST 级 lint 工具。
-
eslint-plugin-jsx-a11y能识别<img src="https://img.php.cn/?x-oss-process=image/resize,p_40" alt="怎么在编写HTML时通过插件自动纠正可访问性偏差">中desc是否可能为null，而html-validate只看字面量 - 重点开这几个规则：
jsx-a11y/alt-text（强制img有alt）、jsx-a11y/label-has-associated-control（表单控件必须绑label），都设为error - VS Code 安装
ESLint插件后，这些规则会实时下划线标出，但注意：它不自动补alt=""或加for/id关联——所谓“自动纠正”其实是靠你点灯泡快捷修复，不是后台静默改代码
别信浏览器插件一键修复 HTML 可访问性
像 HTML 标签检测器 或某些“AI 修 HTML”插件，只能抓未闭合标签或属性拼写，对可访问性是盲区。它们看不到 aria-hidden="true" 是否误删了关键文案，也判不出 color-contrast 是否在 hover 态崩掉。
-
axe DevTools浏览器插件能扫出color-contrast、heading-order等问题，但它只报告，不修改——点击“Quick Fix”按钮弹出的建议，往往只是加个aria-label字符串，没上下文判断是否冗余或冲突 -
document.designMode = "on"不是修复工具，开启后所有 React/Vue 组件交互失效，手动改的 DOM 下次 re-render 直接被覆盖，等于白干 - 真正能“自动修复”的只有极少数场景：比如 Prettier 配合
prettier-plugin-html可强制统一引号、闭合自闭合标签，但它不碰语义逻辑
CI 中 axe-core 扫描失败，先查环境差异而非代码
本地 axe.run() 全绿，CI 里突然爆一堆 color-contrast 错误？大概率不是你代码坏了，而是 axe 在不同环境看到的 DOM 不一样。
- React 应用必须等 hydration 完成再扫：
await page.waitForFunction(() => document.querySelector('#root')?.children.length > 0)，否则扫到的是空壳div - CI 容器常缺字体渲染引擎，导致 computed color 值和本地不同——用
page.emulateMedia({ media: 'screen' })显式声明媒体类型，避免 fallback 到 print 样式 - 不要在 CI 里用
page.accessibility.snapshot()替代axe-core：前者只返回基础属性，不执行 WCAG 规则校验，漏掉 80% 的可访问性缺陷
alt 写什么、role 该不该加、tabindex 设几。可访问性没有银弹，只有持续校验+人工决策。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
