深度剖析HTML语义化对辅助功能的影响：干货满满

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

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>–<h6> 标题；没标题？用 div
• article 要能独立存在：删掉周围所有内容后仍语义完整；能被 RSS 抓取、邮件推送、聚合页引用；否则别硬套
• 错误示例：<section><p>欢迎关注我们</p></section>——无标题、不可分发、无结构意义，纯属污染大纲

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

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

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

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

标题层级断裂比不用语义标签更伤可访问性

很多团队花力气替换了 div，却在 h1–h6 上翻车：页面从 h2 开始、main 外堆了三个 h1、产品页小节用了 h3 但主内容还没出现 h2。

后果是：屏幕阅读器生成的文档大纲（outline）完全错乱。用户依赖大纲快速跳转，而断裂的层级会让“下一级标题”键失效，或跳到意料之外的位置。

实操底线：

• 每个页面有且仅有一个 h1（通常是 header 里的站点名或页面主标题）
• main 内部标题必须严格递进：主内容用 h1 或 h2，章节用 h2 / h3，禁止跨级（如 h2 后直接 h5）
• 用浏览器 DevTools 的 Accessibility 面板实时检查 outline，别只靠肉眼

真正难的不是记住哪些标签该用，而是每次写完都问一句：这个结构，能让一个看不见屏幕的人，在不听完整页的前提下，三秒内定位到他要的内容吗？