屏幕阅读器依赖标题层级而非视觉样式，因为它按DOM顺序解析<h1>到<h6>的嵌套关系生成导航大纲，用户按M键跳转时听到的是“一级标题：产品介绍”，而非视觉样式；仅用CSS将<p或<div>伪造成标题，无法被识别为可跳转节点，导致可访问性失效。
为什么屏幕阅读器依赖标题层级而非视觉样式
屏幕阅读器不“看”页面，它按 DOM 顺序解析 <h1> 到 <h6> 的嵌套关系生成导航大纲。用户按 M 键跳转时，听到的是“一级标题：产品介绍”，不是“大号黑体字：产品介绍”。如果仅靠 CSS 把 <p class="title"> 做成视觉大字，它在可访问性树里仍是普通段落，完全不可跳转。
常见错误现象：
• 页面有 3 个视觉醒目的“标题”，但全是 <div> + CSS 样式
• <h2> 后直接出现 <h4>，屏幕阅读器会把 <h4> 当作 <h3> 处理，导致子节归属错乱
• <h1> 被 display: none 隐藏，DOM 中仍存在，但语义结构已断裂，辅助技术无法识别核心主题
如何用 <section> 修复长网页的标题归属问题
<section> 是 sectioning root，它会让内部标题层级“重置”。没有它，两个并列的 <h2> 在大纲中只是兄弟节点；加上它，每个 <section> 内的 <h3> 自动成为该区块下的子级，且能被辅助技术识别为独立可跳转单元。
- ✅ 正确写法：
<section><h2>用户评价</h2><h3>评分分布</h3></section> - ❌ 错误写法：
<div><h2>用户评价</h2><h3>评分分布</h3></div>（<div>不重置层级） - ⚠️ 注意：
<section>必须带标题，空<section>会出现在大纲中显示为“无标题”，破坏导航流
标题跳级（如 <h2> 后直接 <h4>）的实际后果
浏览器不会报错，但文档大纲会断裂。Chrome DevTools 的 Accessibility > Document Outline 面板会标红警告，axe-cli 运行 axe http://localhost:3000 --rule=heading-order 会明确指出“Heading level is skipped”。更隐蔽的问题是：屏幕阅读器可能反复回溯 DOM 寻找逻辑起点，语音响应延迟明显，尤其对长网页滚动区域或 Tab 切换面板影响显著。
立即学习“前端免费学习笔记（深入）”；
实操建议：
• 动态注入内容时，用 DocumentFragment 包裹 <section> + 合法标题，别直接 appendChild 一堆 <h4>
• 模板中避免条件渲染漏掉中间层级（比如只渲染了 <h2> 和 <h4>，忘了 <h3>）
• 检查工具链中加入 pa11y 或 axe-core 的 heading-order 规则，在 CI 阶段拦截
一个页面到底能不能有多个 <h1>
HTML5 允许，但实际中应避免。搜索引擎和主流屏幕阅读器仍以第一个 <h1> 为页面唯一核心主题。CMS 模板常在页头塞一个 <h1>（如站点名），正文又加一个，结果是大纲根节点漂移，SEO 权重稀释，辅助技术用户第一跳就落到无关内容上。
替代方案：
• 页头用 <header> + <p> 或 <div>，不滥用 <h1>
• 独立内容块（如博客摘要卡片）可用 <article> + 内部 <h1>，这是语义隔离，不是全局多 <h1>
• 唯一 <h1> 必须位于 <main> 内，且与 <title> 标签语义高度一致
最容易被忽略的是：标题层级错乱本身不阻断渲染、不触发控制台报错，但会让可访问性测试失败、SEO 权重分散、内容摘要生成错乱——问题藏得深，修复却只需改几处标签和容器。
