removeRedundantAttributes: true 会彻底删除空 alt 属性及冗余 aria-* 属性,违反 WCAG 可访问性规范;必须设为 false,并配合 customAttributes 白名单(/^aria-/, /^data-/)保护语义属性。

html-minifier-terser 的 removeRedundantAttributes 会删掉 alt 和 aria-* 吗
会,而且删得非常彻底——removeRedundantAttributes: true(默认开启)不仅删掉空的 alt="",还会把整个 alt 属性从 标签里抹掉,变成 。这直接违反 WCAG 1.1.1,屏幕阅读器完全无法识别图片用途。
同理,role、aria-label、aria-describedby 这些属性若值为空或被压缩器判定为“冗余”,也会被一并清除,尤其当它们出现在动态生成的 HTML 中时,连 warning 都不会抛。
实操建议:
- 必须显式关闭:
removeRedundantAttributes: false - 同时禁用
removeAttributeQuotes: false(否则role="dialog"变成role=dialog,IE11/JAWS 解析失败) - 加白名单保护语义属性:
customAttributes: [/^aria-/, /^data-/],确保自定义行为不误伤
collapseWhitespace 看似省体积,实际破坏可访问性语义
第一段。collapseWhitespace: true 不只是删掉换行和多余空格,它会把 压成 (视觉无变化),但对某些 AT 来说,“按钮”二字的语义依赖于标签闭合前后的空白节奏;更严重的是,它会吃掉 中的
第二段。 前后空格,导致朗读粘连成“第一段。第二段。”,丢失段落分隔意图。
使用场景判断:
- 纯展示型静态页(无 AT 用户)可开,但需人工抽检朗读效果
- 表单、操作按钮、带
white-space: pre-wrap的说明区域,一律关掉 - 若页面含
、或display: inline-block元素,collapseWhitespace必须为false,否则布局错位
如何安全地批量清理 class 和 style 属性
多数混淆打包流程会把 class="btn btn-primary js-submit" 压成 class="a b c",再配合 CSS 提取工具删掉未用 class,结果是:JS 依赖的 js-submit 被删,按钮失活;或者 aria-hidden="true" 所在元素的 class 被清空,导致隐藏逻辑失效。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面,使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力: - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面; - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”; - 提及位于 `apps/console/src/featur
真正安全的做法不是“删 class”,而是“只留必要 class”:
- 用
customAttributes白名单机制保留class,但配合 JS 层过滤:只允许特定前缀,如class="a11y-*、class="js-* - 对
style属性,别用removeStyleTags: true全删,改用正则清洗:minifyCSS: true+ 自定义ignoreCustomFragments排除内联关键样式 - 若用 Webpack,优先在
html-webpack-plugin的minify配置中禁用removeAttributeQuotes和removeRedundantAttributes,而非事后用 JS 补救
打包时 ID 关联断裂:aria-describedby 和 for 属性怎么保得住
Webpack 的 html-loader 或 file-loader 在重写资源路径时,**默认不追踪 ID 引用关系**。你写 ,打包后可能变成 ,关联直接断开,表单控件失去可访问性锚点。
这不是配置问题,是 loader 架构限制。解决路径只有两条:
- 放弃自动 ID 哈希,改用稳定 ID(如
id="user-name")+ CSP 与MutationObserver监控 DOM 注入(见拦截恶意插件策略) - 用构建时插件(如
html-id-replacer)做双向映射:扫描所有for、aria-labelledby、aria-describedby值,同步重写对应id,并在压缩前完成 - 终极兜底:服务端渲染阶段用模板引擎注入唯一哈希,保持引用一致性,避免前端 loader 干预
ID 关联是静态分析最难覆盖的一环,工具链越深,断裂风险越高。宁可手动维护几个关键 ID,也别依赖全自动哈希。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










