必须存在且唯一，否则语音助手和屏幕阅读器会多次盲扫才能定位正文；<nav>自带role="navigation"并被系统固化为地标支持快捷跳转，而<div class="nav">无语义；多个<nav>需用aria-label区分；<nav>缺失tabindex="0"则键盘与语音指令失效；<main>必须是<body>直接子元素、全页唯一、不可嵌套于其他地标内；<button>与<div role="button">在语音交互中行为不同，后者需手动补全全部交互逻辑；语义标签须匹配真实结构，如<nav>需含标题，<input type="date">格式须合法。
<main></main> 必须存在且唯一，否则语音助手和屏幕阅读器会从页眉开始盲扫 7–12 次才能定位正文——这不是体验问题，是功能级缺失。
为什么 <nav></nav> 能被 Siri 和 VoiceOver 直接识别为“导航”，而 <div class="nav"> 完全静默
<p>语音助手和屏幕阅读器不解析 CSS 类名，也不猜测开发者意图。<code><nav></nav> 自带 role="navigation"，且被主流系统固化为地标（landmark），支持快捷键跳转（如 NVDA 的 N 键、VoiceOver 的 Ctrl+Option+U）；<div class="nav"> 的 computed role 是 <code>generic，读屏器只当它是普通容器，连“导航”两个字都不会提。
- 多个
<nav></nav> 必须加 aria-label 区分，否则 Siri 会全部朗读为“导航”，用户无法判断哪个是主导航、哪个是页脚面包屑
- 用
<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>，结果用户发出“跳到主要内容”指令后，听到的是 Logo 文字或 Banner 标语。
-
<main></main> 必须是 <div class="container"> 或 <code><header></header> 包裹
- 全 DOM 树中只能有一个
<main></main>；SSR/CSR 混合项目中，布局组件和页面组件各 render 一个，就会触发重复警告并破坏跳转逻辑
- 不能嵌套在
<header></header>、<footer></footer>、<nav></nav> 或 <aside></aside> 内部；否则语音指令“进入主要内容”会失败或跳入广告位
<button></button> 和 role="button" 在语音交互中的行为断层
二者在 VoiceOver 或 Siri 里可能都读成“按钮”，但底层行为天差地别：<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>
<ul><li>真机测试时，Siri 说“点击搜索按钮”，但实际无响应——大概率是用了 <code><div onclick="..."> 而非 <code><button></button>
-
<button type="button"></button> 是安全默认；若用 <input type="button">，需确保 value 属性可读（不能为空或仅含图标字符）
- 动态渲染按钮（如 React 中根据 props 显示/隐藏）必须保证 DOM 插入时已带完整语义，不能靠 JS 后续补
role 和 tabindex
最常被忽略的一点：语义标签不是“加了就完事”，而是要匹配内容真实结构。<section></section> 必须有标题（<h2></h2>–<h6></h6>），否则语音助手不会把它当作可跳转单元；<time datetime="2025-09-12"></time> 的格式必须合法，否则 Siri 不会触发日期快捷操作——这些细节不报错，但会让语音交互在关键节点彻底失效。
<nav></nav> 必须加 aria-label 区分，否则 Siri 会全部朗读为“导航”，用户无法判断哪个是主导航、哪个是页脚面包屑<div role="navigation"> 替代 <code><nav></nav> 时，漏掉 tabindex="0"，键盘用户根本无法聚焦，语音指令也无响应目标
<div id="app"> 包全局，但子组件里没放 <code><nav></nav>，导致整个导航区块不可跳转、不可语音唤起
<main></main> 缺失或嵌套错误时，语音助手如何“瞎找正文”
几乎所有语音助手和读屏器把 <main></main> 当作页面主体内容的唯一可信锚点。缺失时，系统退而求其次：先找 role="main"，再找不到就从第一个 <h1></h1> 开始算正文——但页眉里可能已有 <h1></h1>，结果用户发出“跳到主要内容”指令后，听到的是 Logo 文字或 Banner 标语。
-
<main></main>必须是的直接子元素，不能被<div class="container"> 或 <code><header></header>包裹 - 全 DOM 树中只能有一个
<main></main>；SSR/CSR 混合项目中，布局组件和页面组件各 render 一个，就会触发重复警告并破坏跳转逻辑 - 不能嵌套在
<header></header>、<footer></footer>、<nav></nav>或<aside></aside>内部；否则语音指令“进入主要内容”会失败或跳入广告位 -
<button type="button"></button>是安全默认；若用<input type="button">，需确保value属性可读（不能为空或仅含图标字符） - 动态渲染按钮（如 React 中根据 props 显示/隐藏）必须保证 DOM 插入时已带完整语义，不能靠 JS 后续补
role和tabindex
<button></button> 和 role="button" 在语音交互中的行为断层
二者在 VoiceOver 或 Siri 里可能都读成“按钮”，但底层行为天差地别：<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>
<ul><li>真机测试时，Siri 说“点击搜索按钮”，但实际无响应——大概率是用了 <code><div onclick="..."> 而非 <code><button></button>
最常被忽略的一点：语义标签不是“加了就完事”，而是要匹配内容真实结构。<section></section> 必须有标题（<h2></h2>–<h6></h6>），否则语音助手不会把它当作可跳转单元；<time datetime="2025-09-12"></time> 的格式必须合法，否则 Siri 不会触发日期快捷操作——这些细节不报错，但会让语音交互在关键节点彻底失效。
