现代屏幕阅读器解析DOM语义角色、名称和状态，语义化标签直接提供信息；非语义标签需手动补全ARIA且易漏项；自带navigation角色并支持地标跳转，则无；必须为body直接子元素且不可嵌套；与role="button"行为差异大，后者需手动实现全部交互逻辑；标题层级断裂会误导朗读流。

现代屏幕阅读器（如 NVDA、VoiceOver、JAWS）不是“读 HTML”，而是解析 DOM 的语义角色（role）、名称（name）和状态（state）。语义化标签直接提供这些信息，跳过手动补全 ARIA 的繁琐路径；不写语义标签，等于把所有结构理解成本甩给开发者自己——而且 90% 的补救都漏项。

为什么 <nav></nav> 能被跳转而 <div class="nav"> 完全静默 <p>屏幕阅读器不解析 CSS 类名，也不猜测你“想表达什么”。<code><nav></nav> 自带 role="navigation"，且被主流读屏器固化为地标（landmark），支持 N 键跳入；<div class="nav"> 的 computed role 是 <code>generic，读屏器只当它是普通容器，连“导航”两个字都不会提。

• 多个 <nav></nav> 必须加 aria-label 或 aria-labelledby，否则全部朗读为“导航”，用户无法区分主导航、页脚导航或面包屑
• 用 <div role="navigation"> 替代 <code><nav></nav> 时，漏掉 tabindex="0"，键盘与语音指令均无响应目标
• React 场景中常见错误：<div id="app"> 包全局，但子组件里没放 <code><nav></nav>，导致整个导航区块不可跳转

  <main></main> 缺失或嵌套错误时，朗读流会“瞎找正文”

  几乎所有屏幕阅读器把 <main></main> 当作“页面主体内容”的唯一可信锚点。缺失时，系统退而求其次：先找 role="main"，再找不到就从第一个 <h1></h1> 开始算正文——但页眉里可能已有 <h1></h1>，结果用户下拉 7–12 次才摸到真正要读的内容。

  • <main></main> 必须是 的直接子元素，不能被 <div class="wrapper"> 或 <code><section></section> 套住
  • 检查方法：DevTools 控制台执行 document.querySelector('main').parentElement === document.body，返回 true 才算合格
  • <main></main> 不可嵌套在 <header></header>、<footer></footer>、<nav></nav> 内，否则辅助技术直接忽略

  <button></button> 和 role="button" 在朗读流中的行为差异

  二者在读屏器里可能都读成“按钮”，但行为天差地别：<button></button> 自动支持空格/回车触发、disabled 状态禁用朗读与交互、默认焦点样式；<div role="button"> 必须手动补全全部逻辑，漏一项，键盘用户就会卡住。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill9263" title="Html2md"><img src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill9263" title="Html2md">Html2md</a> <p>使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p> </div> <a href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <ul> <li> <code><div onclick="submitForm()">提交</div> → 屏幕阅读器读作“提交”，不说明这是可交互控件，也无法用空格/回车触发

  • 若真要用 role="button"，必须同时确保：tabindex="0"、onkeydown 监听空格/回车、同步控制 aria-disabled 与 JS 逻辑
  • 纯图标按钮（如 <i class="icon-close"></i>）必须配 aria-label，否则读屏器只读“空白”

  标题层级断裂会让朗读流“误判章节起点”

  跳级使用标题（比如从 <h1></h1> 直接到 <h4></h4>）不是样式问题，而是语义断裂。浏览器和辅助技术依赖层级建立内容索引，断层会让 <h4></h4> 被误判为新章节起点，甚至被跳过。

  • 单页应用中动态渲染内容时，JS 插入的标题常忽略已有层级上下文
  • CMS 输出模板未约束标题深度，导致文章正文内 <h3></h3> 下突然出现 <h1></h1>
  • 用 DevTools 的「Accessibility」面板检查「Heading level」是否连续，比肉眼判断更可靠

  真正影响朗读流质量的，从来不是标签数量，而是每个语义标签是否匹配真实结构——<nav></nav> 里塞搜索框、<section></section> 不带标题、<main></main> 嵌套在 <div> 里，这些都会让屏幕阅读器在解析时反复回溯、误判、跳过关键节点。</div>