深度剖析HTML语义化对辅助功能的影响（干货满满）-html教程-PHP中文网

必须全局唯一且不得含广告或导航，因其是屏幕阅读器“m键直达”的唯一语义锚点；多个或混入非核心内容会导致跳转失效、可访问性崩溃。

深度剖析html语义化对辅助功能的影响（干货满满）

main 必须全局唯一，且不能包裹导航、广告或页脚；否则屏幕阅读器“M键跳转”直接失效——这不是警告，是可复现的崩溃点。

为什么 `main` 多一个或混进广告就出事

辅助技术（如 NVDA、VoiceOver）把 main 当作页面的语义锚点：用户按 M 键，工具会跳过所有 nav、header、aside，直抵 main 内容起始。但规范明确要求：全 DOM 树中只能有一个 main，且它必须代表“用户当前最需要操作/阅读的核心内容”。

常见崩坏场景：

Next.js 布局组件里写了一个 main，子页面又套一个——浏览器通常只认第一个，第二个被忽略；用户从首页跳进详情页，M 键仍停在旧位置
微前端子应用在 iframe 中自行声明 main，脱离主文档上下文，辅助技术无法将其纳入整体可访问性树
把顶部 banner、左侧菜单、广告位全塞进同一个 main，导致“主要内容”被稀释，读屏工具播报时堆砌无关信息，用户被迫听完整段噪音才能定位表单

`section` 和 `article` 不是 `div` 的高阶替代品

它们不解决布局问题，只解决“文档大纲（outline）”和“内容可分发性”。滥用会导致屏幕阅读器导航节点爆炸式增长，反而更难定位。

判断依据极简：

section 必须自带 <h2></h2>–<h6></h6> 标题；没标题？用 div
article 要能独立存在：删掉周围所有内容后仍语义完整；能被 RSS 抓取、邮件推送、聚合页引用；否则别硬套
错误示例：<section><p>欢迎关注我们</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8961" title="html-to-pptx-converter"><img src="https://img.php.cn/upload/skill/000/000/081/179232667384043.jpg" alt="html-to-pptx-converter" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill8961" title="html-to-pptx-converter" class="overflowclass">html-to-pptx-converter</a> <p class="overflowclass">使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。</p> </div> <a rel="nofollow" href="/xiazai/skill8961" title="html-to-pptx-converter" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div></section>——无标题、不可分发、无结构意义，纯属污染大纲

嵌套在 `div` 里真不影响可访问性？看标签类型

对 header、footer、nav、main 这类块级语义标签，被 div 包裹一般无害——辅助技术仍能识别其角色，DOM 中语义未丢失。

但以下两类标签绝不允许随意嵌套：

ul / ol：子元素只能是 li；中间插 div 或 span → HTML 无效 → 浏览器降级解析 → 屏幕阅读器可能跳过整段列表，或把 div 当成空项播报
table：只接受 thead、tbody、tr、td 等表格专用子元素；用 div 包 tr 或往 td 里塞 section → 表格语义断裂 → 读屏工具无法构建正确行列关系，数据表格彻底不可读