冗余html会让屏幕阅读器“听不懂”语义上下文和可访问名称：三层包裹导致丢失“导航栏中的搜索按钮”等上下文；与aria-label重复引发两次播报或忽略；无class/id/事件/css引用的、空注释、废弃标签及语义容器外层wrapper均属dom噪声，破坏可访问性链路。
冗余HTML会让屏幕阅读器“听不懂”什么
不是所有冗余都会报错，但很多会直接破坏可访问性链路。比如一个被三层 <div> 包裹的 <code><button></button>，屏幕阅读器可能只读出“按钮”，却跳过它实际所在的语义上下文（如“导航栏中的搜索按钮”）；又比如同时存在 <label for="x"></label> 和 aria-label 且内容重复，部分读屏软件会两次播报，或直接忽略其中一个——这取决于其内部可访问名称计算逻辑。
日常检查时优先盯这三类冗余节点
别等测试报告出来再修，维护阶段就得主动过滤：
- 无 class、无 id、无事件绑定、无 CSS 选择器引用的
<div> 或 <code><span></span>—— 它们几乎从不参与语义，纯属 DOM 噪声 - 空注释
<!-- -->和废弃标签如<font></font>、<center></center>—— 不影响渲染，但干扰辅助技术解析 DOM 树层级 - 重复语义容器：比如
<nav></nav>外再套<div class="nav-wrapper">，或 <code><main></main>内嵌<section></section>后又加一层<div class="section-inner"> <h3>用 DevTools 快速验证是否已影响可访问性</h3> <p>打开 Chrome DevTools → 切换到 **Accessibility** 面板 → 点击左侧 DOM 节点，右侧会显示“Accessible Name”和“Role”。如果：</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/shouce/1862" title="使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件"><img src="https://img.php.cn/upload/manual/000/000/010/170901721079108.gif" alt="使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/shouce/1862" title="使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件" class="overflowclass">使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件</a> <p class="overflowclass">如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更</p> </div> <a rel="nofollow" href="/xiazai/shouce/1862" title="使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <ul> <li>某个按钮的 Accessible Name 是空的，但 HTML 里明明写了 <code><label for="btn"></label>→ 检查for值是否拼错，或对应id是否被删了 - 一个输入框的 Role 显示为
generic（而非textbox或combobox）→ 很可能是外层冗余<div> 阻断了语义冒泡，或缺失 <code>type属性 - 同一区域多个节点都标着
no role且父级是纯<div> → 这些节点大概率没被任何语义容器包裹，屏幕阅读器只能线性读，无法跳转<h3>删之前务必确认 CSS 是否强依赖这些冗余</h3> <p>很多“看起来没用”的 <code><div> 其实被 CSS 选择器锁死了，比如 <code>.container > .row > .col。删掉中间层会导致样式失效。操作前必须：- 在 Console 执行
getComputedStyle(document.querySelector('.row'))，看是否真有生效样式 - 全局搜索该 class 名（如
"row"）是否出现在 CSS 文件中，尤其注意后代选择器、属性选择器（如[class*="row"]） - 删完立刻用键盘 Tab 测试焦点流是否断裂，因为某些冗余节点意外承担了
tabindex或focus-within触发作用
真正难处理的从来不是怎么删，而是删完之后谁来保证那个被隐藏了十年的
.clearfix类没在某个角落悄悄撑开高度。 - 在 Console 执行
