语义标签必须满足role、name、state三要素才有效；自带role="navigation"被读屏器识别为地标支持n键跳转，而的computed role为generic，仅被当作普通容器。
语义标签不是“写了就有效”，屏幕阅读器只认 DOM 中的 role、name、state 三要素；没这三样， 常见错误现象： 容易被忽略的边界情况： 正确做法：全页 DOM 中确保只有一个 必须满足的条件： 如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更 屏幕阅读器默认将 错误写法示例： 这会让 NVDA 或 VoiceOver 把两个链接当成连续字符串播报。 正确结构必须是： 别用 <nav></nav> 和 <div> 对它来说没区别。
<h3>为什么 <code><nav></nav> 能跳转而 <div class="nav"> 完全静默
<p>屏幕阅读器不解析 CSS 类名，也不猜测开发者意图。它依赖浏览器暴露的 ARIA role 属性：<code><nav></nav> 默认带 role="navigation"，被 NVDA/VoiceOver 固化为地标（landmark），支持快捷键（如 N 键）跳入；<div class="nav"> 的 computed role 是 <code>generic，读屏器只当它是普通容器，连“导航”两个字都不会提。
<nav></nav> 未加 aria-label，全部朗读为“导航”，用户无法区分主导航、页脚导航或面包屑<div role="navigation"> 替代 <code><nav></nav>，但漏掉 tabindex="0"，键盘用户根本无法聚焦
<div id="app"> 包全局，却没在子组件里放 <code><nav></nav>，导致整个导航区块不可跳转
<main></main> 缺失或重复时，屏幕阅读器如何“瞎找正文”<main></main> 是屏幕阅读器定位核心内容的唯一可靠锚点。它必须且只能出现一次——重复会导致读屏工具忽略全部或只识别第一个；缺失则迫使用户手动逐行听完整页才能找到正文。
<main></main>，子页面也带一个<main></main> 包裹侧边栏、广告位或弹窗，误以为“主要展示区域”就是“主要”<iframe></iframe> 或微前端子应用里擅自加 <main></main>，脱离主文档上下文<main></main>，且它包裹的是用户真正要读/操作的主体内容（如文章正文、产品列表、表单主区域）。
<nav></nav> 里没有链接，等于没用<nav></nav> 的语义锚点是“导航功能”，不是“横向排列的菜单样式”。如果里面全是 <div>、<code><span></span> 或 disabled 的 <button></button>，辅助设备会识别为 role="navigation" 但找不到可交互目标，反而造成困惑。
href 的 <a></a>，或带 onclick + role="link" 的可聚焦元素aria-label 或 aria-labelledby 明确区分用途，例如：<nav aria-label="主导航"></nav> 和 <nav aria-label="页脚快速链接"></nav>
<nav></nav> 范畴，该用 <section></section> + ARIA tablist 模式
<ul></ul> + <li> 不是可选项，是语义链关键一环<ul></ul> 识别为“列表”，并告知用户“共 X 项”，再逐项朗读。去掉 <ul></ul> 和 <li>，哪怕用了 <nav></nav>，读屏也会把所有链接连读成一串无结构的文本。<nav>首页 关于</nav>
<nav><ul>
<li><a href="/">首页</a></li>
<li><a href="/about">关于</a></li>
</ul></nav>
<div> 模拟列表：即使加了 <code>role="list" 和 role="listitem"，也比不上原生 <ul></ul>/<li> 的兼容性和稳定性。
