能跳转而完全静默：前者自带role="navigation"被读屏器识别为地标，后者为generic角色；缺失时读屏器误判正文起点；原生支持键盘交互，需手动补全焦点、事件与禁用逻辑。

为什么 `

` 能跳转而 `

` 完全静默

屏幕阅读器不解析 CSS 类名，也不猜你“想表达什么”。<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"，键盘和语音指令都聚焦不到
• React 里用 <div id="app"> 包全局，子组件却没放 <code><nav></nav>，整个导航区块不可跳转

  <main></main> 缺失时，屏幕阅读器怎么“瞎找正文”

  几乎所有读屏工具把 <main></main> 当作“页面主体内容”的唯一可信锚点。缺失时，系统退而求其次：先找 role="main"，再找不到就从第一个 <h1></h1> 开始算正文——但页眉里可能已有 <h1></h1>，结果用户发出“跳到主要内容”指令后，听到的是 Logo 文字或 Banner 标语。

  硬约束必须遵守：

  

  html-ppt-to-pdf

  将使用 `

  ` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

  下载
  • <main></main> 全页只能有一个
  • 不能嵌套在 <header></header>、<footer></footer>、<nav></nav> 或 <section></section> 内部
  • 里面只能放用户真正要操作/阅读的核心内容（如商品列表、表单主区域），不能混入广告、侧边栏、弹窗

  <button></button> 和 div[role="button"] 的键盘交互差距

  二者在读屏器里可能都读成“按钮”，但行为天差地别：<button></button> 自动支持空格/回车触发、disabled 状态禁用朗读与交互、默认焦点样式；<div role="button"> 必须手动补全： <ul> <li> <code>tabindex="0"（否则键盘用户根本点不到）

• onkeydown 监听空格和回车事件
• aria-disabled="true" + 对应逻辑（否则禁用后仍能触发）
• CSS 处理 :focus 样式（否则无视觉反馈）

漏一项，键盘用户就会卡住。真实场景：Vue 里写 <div>提交</div>，测试只点鼠标，上线后视障用户完全无法提交。

<label></label> 和 <fieldset></fieldset> 绑定失效的兼容性陷阱

辅助技术对 <label></label> 和 <fieldset></fieldset> 的识别高度依赖原生嵌套关系。用 <div> 替代 <code><fieldset></fieldset>，哪怕补上 aria-labelledby，旧版 JAWS 仍可能跳过分组标题；仅靠视觉位置或 aria-label 绑定 <input>，在 Safari + VoiceOver 下朗读不稳定。

关键约束：

• <label></label> 必须显式绑定：for="xxx" + id="xxx"，或直接包裹 <input>
• <fieldset></fieldset> 必须是 <input> 的直接父容器，不能被 <div> 中间隔开 <li> <code><legend></legend> 必须作为 <fieldset></fieldset> 的第一个子元素，不能用 <h2></h2> 或其他标签替代

最常被忽略的是 DOM 层级：哪怕结构语义全对，只要 <main></main> 或 <nav></nav> 被浏览器因嵌套错误丢弃（比如塞进 <table>），可访问性树就直接断裂——读屏器不是“读错”，而是根本看不见那块内容。</table>