HTML混淆打包会破坏可访问性，因混淆、内联、路径重写等操作无意剥离语义结构；JS混淆器默认不删aria-*属性，但html-minifier-terser的removeAttributeQuotes、collapseWhitespace、removeRedundantAttributes等配置会破坏AT兼容性，需显式禁用并保护关键属性。
混淆打包后，可访问性支持大概率被破坏——不是因为工具故意删掉 lang 或 aria-label，而是因为混淆、内联、路径重写、资源合并等操作会无意中剥离语义结构、打断 DOM 关系、覆盖关键属性。保留可访问性，核心在于「混淆不碰语义层」+「打包链路中显式保护」。
混淆工具默认会删掉 aria-* 和 role 属性吗？
大多数 JS 混淆器（如 Terser、UglifyJS）默认不处理 HTML，但若你用 Webpack 的 html-webpack-plugin + html-minifier-terser 做 HTML 压缩，问题就来了：
-
removeAttributeQuotes: true会导致role="tooltip"变成role=tooltip，部分旧版 AT（如 IE11 下的 JAWS）解析失败 -
collapseWhitespace: true会吃掉<button><span>提交</span></button>中的换行和空格，使屏幕阅读器朗读为“提交”而非“提交按钮”，丢失角色语义 -
removeRedundantAttributes: true（默认开启）会删掉<img alt="">中的alt属性本身，变成<img>，触发 WCAG 1.1.1 失败
解决办法：在 html-webpack-plugin 的 minify 配置中显式禁用这些项：
minify: {
removeAttributeQuotes: false,
collapseWhitespace: false,
removeRedundantAttributes: false,
customAttributes: [/^aria-/, /^data-/]
}打包时静态资源路径重写会破坏 aria-describedby 关联吗？
会。比如你写 <button aria-describedby="tip-1">帮助</button><div id="tip-1">这是说明</div>，Webpack 的 html-loader 或 file-loader 若对 HTML 做资源引用提取，可能把 id="tip-1" 改成哈希值（如 id="tip-1_abc3f"），而 aria-describedby 还是 "tip-1"，关联断裂。
立即学习“前端免费学习笔记（深入）”；
这不是 bug，是设计使然——loader 默认只处理 src、href 等资源属性，但不会追踪 ID 引用关系。应对方式：
- 避免用动态 ID（如 React 生成的随机 ID），改用稳定 ID 或
data-id配合 JS 绑定 - 若必须用 ID 关联，把提示内容和触发元素放在同一组件作用域内，并用
aria-labelledby替代aria-describedby（后者更易断裂） - 在构建后加一道校验：用 axe-core CLI 扫描输出 HTML，检查
aria-*属性是否指向真实存在的 ID
混淆后的 inline script 会覆盖 lang 或 charset 吗？
会，而且非常隐蔽。常见场景：
- Vue/React SSR 模板里写
<html lang="{{ locale }}">，构建时若未正确转义或注入，最终 HTML 可能变成<html lang="undefined"> - 某些打包插件（如
html-inject）在插入内联 JS 时，把<meta charset="UTF-8">插到<title>后面，违反 HTML 规范（charset必须在<head>最前面） - Terser 压缩后插入的 runtime 脚本，若用
document.write动态写入<html lang="zh-CN">，会覆盖原始声明，且导致lang出现在<body>之后
关键防线只有两条：
第一，<html lang="zh-CN"> 必须硬编码在源 HTML 模板最开头，前面不能有任何字符（包括 BOM、空格、注释）；第二，所有动态语言切换逻辑，只能通过 JS 修改 document.documentElement.lang，绝不能重写 <html> 标签本身。
真正难的不是加几个 aria-，而是让整个打包链路对语义保持敬畏——它不会主动破坏，但也不会主动保护。每一步压缩、替换、注入，都得有人盯着 DOM 结构是否还在呼吸。
