屏幕阅读器不读类名且不猜测意图，仅依赖语义化html和aria属性；导航需用带aria-label的而非，正文必须唯一，按钮应使用原生而非，标题层级须严格递进。

为什么

和

对屏幕阅读器完全不是一回事

屏幕阅读器不读类名，也不猜你“想表达什么”。<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> 当作“页面主体内容”的唯一可信锚点。没它，系统退而求其次：先找 role="main"，再找不到就从第一个 <h1></h1> 开始算正文——但页眉里可能有 <h1></h1>，结果用户下拉 7–12 次才摸到真正要读的内容。

  硬约束必须遵守：

  • 全 DOM 树中只能有一个 <main></main>
  • 不能嵌套在 <header></header>、<footer></footer>、<nav></nav> 或 <section></section> 内部
  • 不能包裹广告位、侧边栏、弹窗等非核心内容；否则 M 键跳入后，用户第一眼听到的是“双11大促Banner”，而不是商品列表

  用还是

  ？键盘交互差在哪

  二者在读屏器里可能都读成“按钮”，但行为天差地别：<button></button> 自动支持空格/回车触发、disabled 状态禁用朗读与交互、默认焦点样式；<div role="button"> 必须手动补全全部逻辑，漏一项，键盘用户就会卡住。 <p>典型漏项包括：</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a> <p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p> </div> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <ul> <li>没加 <code>tabindex="0"，Tab 键无法聚焦

• 没监听 keydown 事件处理空格/回车，仅靠 onclick 不够
• 没同步设置 aria-disabled="true" 和视觉禁用状态，读屏器仍会提示“可点击”

标题层级错乱会让读屏用户彻底迷失上下文

很多开发者用 <h2></h2> 开头，中间穿插 <h1></h1>，再回到 <h3></h3>——这种跳跃会让屏幕阅读器把结构理解成“子章节突然变成父章节”，用户无法建立稳定的认知地图。

正确做法是严格遵循视觉与逻辑一致的层级：

• 每个 <section></section> 或 <article></article> 应以 <h2></h2> 起始（如果整体页面已用 <h1></h1>）
• 内部子模块用 <h3></h3>，依此类推
• 禁止在 <header></header> 外单独使用 <h1></h1>，除非它是页面唯一主标题
• 动态渲染的标题（如 React 中通过 props 注入）必须确保 DOM 插入时层级连续

跳级不是 bug，是可访问性阻断点——它让屏幕阅读器的“大纲视图”失效，用户失去全局定位能力。