HTML文档大纲算法从未被浏览器或屏幕阅读器实现,实际依赖的是真实heading级别与地标元素;标题必须严格递进且唯一h1,地标(如<main>、<nav>)和ARIA才是可访问性有效支撑。

HTML文档大纲算法在现实中并不存在于任何主流浏览器或屏幕阅读器中,它只是HTML5规范里一个从未被实现的理论模型。依赖它来组织标题层级、期待屏幕阅读器“自动理解嵌套关系”,只会让可访问性变得更差。
为什么不能信“大纲算法”
W3C在HTML5初稿中提出过“文档大纲”概念:认为只要用语义化标签(如 <section>、<article>)包裹 <h1>–<h6>,浏览器就能自动生成逻辑嵌套结构。但至今没有一个浏览器引擎(Blink、WebKit、Gecko)真正实现它;所有主流屏幕阅读器(NVDA、JAWS、VoiceOver)也完全不读这个“虚拟大纲”,只按DOM顺序+实际heading级别朗读。
- 你写
<section><h1>标题</h1></section><section><h1>另一个标题</h1></section>,屏幕阅读器会连续读两个“一级标题”,不会说“第二个一级标题属于新章节” - 把
<h2>放在<article>里,也不会让它“降级”成该文章内的<h1>—— 它就是<h2>,仅此而已 - 靠
<h1>→<h3>跳级来“模拟子节”,反而触发WCAG 1.3.1错误:标题层级断裂,破坏逻辑流
屏幕阅读器实际怎么读标题
它只做两件事:按DOM顺序遍历,对每个遇到的 <h1>–<h6> 标签,原样播报“一级标题”“二级标题”……不推导、不重映射、不跨容器合并。
-
<h1>必须且只能出现一次,代表整页唯一主主题;多用等于告诉用户“这页有多个主主题”,逻辑混乱 - 所有后续标题必须严格递进或同级,比如
<h1>→<h2>→<h2>→<h3>是合理流;<h1>→<h3>是明确违规 - 视觉上用CSS缩放/颜色区分“小标题”,但HTML里仍要用正确级别——屏幕阅读器看不见CSS
替代方案:用地标(landmark)补结构,别靠标题猜上下文
当需要表达“这块内容是独立模块”,与其硬调标题级别,不如用真实语义容器+ARIA名称。这才是屏幕阅读器真正响应的导航信号。
立即学习“前端免费学习笔记(深入)”;
- 用
<section>时,必须配<h2>–<h6>(不能只包<p>),否则它只是个无意义的div - 动态插入的卡片区块,加
role="region"+aria-labelledby="card-title",比塞个<h4>更准确 -
<main>、<nav>、<aside>这些隐式地标,比任何<h3>都更能帮用户一键跳转到功能区
标题层级不是装饰,是线性导航路径;地标不是可选项,是长页面的刚需骨架。把 <h2> 写对、把 <main> 放准、把 aria-label 配实——这些动作都落在DOM里,屏幕阅读器看得见,用户摸得着。那些藏在规范文档里的“大纲算法”,就让它留在草案里吧。



















