HTML文档流决定屏幕阅读器读取顺序，依赖语义标签嵌套、标题大纲、地标元素和可访问性树规则；display:flex、order、position:absolute等CSS布局不影响文档流解析，但会破坏屏幕阅读器导航。
HTML文档流决定屏幕阅读器实际读取顺序，不是CSS视觉位置，也不是DOM节点出现顺序的简单拼接——它依赖语义标签嵌套层级、标题大纲、地标元素（landmark）和可访问性树的构建规则。
为什么 display: flex 或 order 会破坏屏幕阅读器导航
CSS布局重排完全不影响文档流解析。屏幕阅读器按HTML源码中语义化节点的嵌套深度和顺序生成可访问性树，display: flex 只改变视觉排列，不移动DOM位置。常见错误现象包括：
- 用
order: -1把<nav></nav>视觉上提到顶部，但源码中它仍在<main></main>后面 → 屏幕阅读器用户 Tab 到第5个元素才进入导航 -
flex-direction: column-reverse让页脚显示在上方，但可访问性树里它仍是最后一个地标 → “跳转到页脚”快捷键失效 - 用
position: absolute把搜索框塞进<header></header>视觉区，但源码中它在底部 → 键盘焦点无法自然抵达，aria-labelledby关联也常断开
<main> 和 <section> 如何影响可访问性树的根路径
<main></main> 是可访问性树的“主干锚点”，所有支持地标导航的屏幕阅读器（NVDA、VoiceOver、TalkBack）都提供“跳转到主内容”快捷键（如 Insert+M）。它的存在与否、唯一性、嵌套深度直接决定用户能否快速切入核心信息：
- 多个
<main></main>：W3C 验证报错，部分 AT 直接忽略全部，降级为普通<div> <li> <code><main></main>嵌套在<div class="wrapper"> 内：可访问性树中 <code><main></main>的父节点变成无语义<div>，导致“主内容”上下文丢失 <li>用 <code><section></section>替代<main></main>：AT 不识别其为主内容区，不会暴露“跳转到主内容”入口，且该<section></section>若无<h2></h2>级标题，会被视为无结构片段 - SPA 路由切换后未销毁旧
<main></main>：DOM 中残留多个，可访问性树混乱，部分 AT 随机选取一个作为主干 -
h2下直接h4：AT 解析为“h2结束 → 新主题从h4开始”，中间所有段落、列表被归入“无标题上下文”，朗读时失去逻辑分组 - Vue/React 动态渲染组件时未校验标题层级：子组件输出
h4，但父组件没提供h3，导致大纲断裂，Lighthouse “Document structure” 检查直接标红 - 用 CSS 放大
span模拟标题：AT 完全无视，既不加入大纲，也不触发导航快捷键（如H键循环标题） - JS 执行
document.head.appendChild(el)：即使el是<nav></nav>，浏览器自动移入开头，但部分 AT（尤其旧版 TalkBack）不监听内变动，也不会重建可访问性树 - 用
innerHTML替换<main></main>内容但未重置tabindex或aria-live：动态加载的新按钮若没设tabindex="0"，键盘用户无法聚焦 - 将
<aside></aside>放在<main></main>外部但同级：虽符合 HTML 规范，但部分 AT 将其归类为“全局侧边栏”，而非当前主内容的附属说明，语义关联断裂 - 通过
transform: translateY()把元素“视觉上”拉进视口，但 DOM 位置仍在屏幕外区域：AT 仍按原始坐标判断是否在视口内，可能跳过朗读
标题层级断裂（h2 后直接 h4）为何比样式错乱更危险
标题不是字体大小开关，而是可访问性树中的“大纲节点”。屏幕阅读器靠 h1–h6 的嵌套关系构建文档结构，跳级会切断父子连接：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
哪些 DOM 位置变动会让屏幕阅读器彻底“看不见”内容
不是所有插入或移动都安全。以下操作会绕过可访问性树更新机制，导致内容不可发现：
真正关键的不是“内容有没有渲染出来”，而是它在可访问性树里有没有正确的位置、角色和关系。检查时别只看 DevTools 的 Elements 面板，要打开 Chrome 的 Accessibility 面板，或用 NVDA 的“文档结构视图”确认节点是否挂载在预期的父节点下——这才是屏幕阅读器实际看到的结构。
