直接删掉“没用”的属性会破坏可访问性：aria-label、role、tabindex等常是语义补救而非冗余，盲目删除会导致屏幕阅读器跳过内容或焦点错乱；class和data-*可能承载JS逻辑，需确认引用再清理；浏览器自动修正HTML结构会使ARIA关系失效，须用innerHTML比对验证。
直接删掉“没用”的属性会破坏可访问性
很多人看到 aria-label、role 或 tabindex 出现在非交互元素上，第一反应是“这没用，删掉”，结果导致屏幕阅读器跳过关键内容或焦点逻辑错乱。这些属性不是“冗余”，而是对语义缺失的补救——比如一个用 div 模拟按钮的组件，没有 role="button" 和 tabindex="0"，键盘用户根本无法聚焦操作。
常见错误现象：
- 删掉
aria-hidden="true"后，辅助技术开始朗读装饰性图标 - 移除
lang属性，导致屏幕阅读器用错误语言发音（如中文页面被读成英文） - 去掉
alt却没补上空字符串alt=""，触发无障碍扫描工具报严重错误
把 class 和 data-* 当成“可随意清理”的垃圾字段
class 不只是样式钩子，它可能是 JS 的行为触发器（如 class="js-toggle-menu"），也可能是 CSS-in-JS 或框架的绑定标识；data-* 更是运行时逻辑的关键载体，比如 data-product-id="12345" 被前端 API 直接读取。
清理前必须确认：
立即学习“前端免费学习笔记（深入）”；
- 是否存在
document.querySelector('[class*="js-"]')或类似选择器 - 是否有
element.dataset.productId这类 JS 读取逻辑 - 是否在构建流程中被 PostCSS、Tailwind JIT 或服务端模板引用
盲目清空 class 可能让整个下拉菜单失效；删掉 data-testid 会让 E2E 测试全部挂掉。
忽略浏览器自动修正导致的属性“幽灵残留”
HTML 解析器会静默修复非法结构，比如你写了 <p></p>
<div>hello</div>
<p></p>
<div>hello</div>。此时你看到的 DOM 中，div 已脱离原容器，但它的 id、class、data- 等属性还在，而关联的 ARIA 属性（如 aria-labelledby）早已失效——因为目标元素不在预期位置了。验证方法：
- 在控制台执行
document.body.innerHTML，和源码逐行比对 - 检查
aria-*属性指向的id是否真实存在于当前父级 DOM 树中 - 用 DevTools 右键父节点 → “Edit as HTML”，敲个空格回车：若子节点整体跳出，说明原始嵌套已被浏览器重排
用正则批量删除属性等于埋雷
写个 /\s+data-\w+="[^"]*"/g 把所有 data- 干掉？别。有些 data- 是 SSR 渲染必需的（如 Next.js 的 data-next-hide-fouc），有些是性能优化开关（如 data-loading="lazy"）。更危险的是，正则可能误伤合法 HTML 属性里的引号内容，比如 title='He said "Hello"' 会被截断。
安全做法只有两个：
- 逐个确认每个属性的用途，查 JS bundle、构建配置、服务端模板
- 用 AST 工具（如
cheerio或htmlparser2）解析后操作，而非字符串替换
真正难的不是“怎么删”，而是“删之前，你是否知道这个属性正在哪个环节起作用”。很多线上事故，都始于一次看似无害的属性清理。
