屏幕阅读器不读css类名且不猜测意图，仅依赖语义化html和aria属性；自带role="navigation"，是固化地标，而的computed role为generic，被视为空容器。

为什么

能跳转而

完全静默

屏幕阅读器不解析 CSS 类名，也不猜测你“想表达什么”。<nav></nav>自带<code>role="navigation"，被 NVDA、VoiceOver、JAWS 固化为地标（landmark），按 N 键就能跳入；<div class="nav"> 的 computed role 是 <code>generic，读屏器只当它是空容器，连“导航”两个字都不会提。

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

  缺失时屏幕阅读器怎么“瞎找正文”

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

  

  html-to-pptx

  将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

  下载
  • <main></main> 必须是 的直接子元素，且全页唯一
  • 不能嵌套在 <header></header>、<footer></footer>、<nav></nav> 或 <section></section> 内部
  • 里面只能放用户真正要操作/阅读的核心内容（如商品列表、表单主区域），不能混入广告、侧边栏、弹窗
  • React/Vue 项目中用 <div id="app"> 包住整个应用，却忘了在内部放 <code><main></main>，就是典型漏项

    标题层级断裂为什么让读屏用户彻底迷失

    屏幕阅读器依赖标题层级构建文档大纲。断层会让 <h4></h4> 被误判为新章节起点，甚至被跳过。这不是样式问题，而是语义断裂。

    • 禁止用 <h2></h2> 开头后突然插入 <h1></h1>，或跨级使用（如 <h2></h2> 后直接 <h4></h4>）
    • 每个 <section></section> 或 <article></article> 应以逻辑上一级的标题起始（如整体用 <h1></h1>，则其内模块用 <h2></h2>）
    • 禁止单独在 <header></header> 外使用 <h1></h1>，除非它是页面唯一主标题
    • 动态渲染的标题（如 React 中通过 props 注入）必须确保 DOM 插入时层级连续

    和

    的键盘交互差距在哪

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

  • 必须监听 onkeydown 并处理空格和回车事件
  • 必须用 aria-disabled="true" + 对应逻辑，否则禁用后仍能触发
  • 必须用 CSS 处理 :focus 样式，否则无视觉反馈
  • 真实场景：Vue 里写 <div>提交</div>，测试只点鼠标，上线后视障用户完全无法提交
  关键点在于：语义标签不是“看起来更规范”，而是直接提供可访问性树所需的 role、name、state。一旦用错或漏掉，补救成本远高于一开始就写对——尤其 <main></main> 和标题层级，改起来常要动整页结构。