HTML语义化能提升非标准阅读器渲染质量，但须正确使用标签；错用比不用更糟，因读屏器严格按语义解析，不猜测意图，且依赖正确结构、角色、属性与层级实现无障碍访问。

HTML语义化对非标准阅读器设备（如屏幕阅读器、盲文终端、语音助手、车载系统）的渲染质量有直接提升作用，但前提是标签用得对——错用比不用更糟。

为什么

能被NVDA识别而

完全静默

屏幕阅读器不解析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>，导致整个导航区块不可跳转

  必须是的直接子元素，否则M键失效

  <main></main>必须是的直接子元素，一旦被<div class="wrapper">或<code><section></section>套住，辅助技术就无法将其识别为主内容锚点。用户按M键跳转时会失败，只能手动逐项下移——实测平均需按14次“下一项”才能抵达第一段正文。

  • 检查方法：DevTools控制台执行document.querySelector('main').parentElement === document.body，返回true才算合格
  • <main></main>不能嵌套在<header></header>、<footer></footer>、<nav></nav>或<section></section>内部
  • 里面不能包裹广告位、侧边栏、弹窗等非核心内容，否则M键跳入后，用户第一眼听到的是“双11大促Banner”

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

  跳级使用标题（比如从<h1></h1>直接到<h4></h4>）不是样式问题，而是语义断裂。浏览器和辅助技术依赖层级建立内容索引，断层会让<h4></h4>被误判为新章节起点，甚至被跳过。

  

  HTML Extract

  使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

  下载

  立即学习“前端免费学习笔记（深入）”；

  • 单页应用中JS动态插入标题，常忽略已有层级上下文，导致结构错乱
  • CMS模板未约束标题深度，文章正文内<h3></h3>下突然出现<h1></h1>
  • 用DevTools的「Accessibility」面板检查「Heading level」是否连续
  • 服务端或构建时加校验规则，例如用remark-lint-heading-increment检查Markdown渲染出的HTML

  原生支持键盘交互，

  必须手动补全全部逻辑

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

• 没监听keydown中的Enter和Space → 按键无响应
• 没同步设置aria-disabled="true"和视觉禁用态 → 读屏器仍可触发，但逻辑被阻断

最容易被忽略的其实是嵌套关系和DOM位置——<main></main>不在直系下、<section></section>没配标题、<nav></nav>里塞了搜索框，这些都不是“语义不够”，而是“语义污染”。非标准阅读器设备不会纠错，只会照字面执行，结果就是功能可用性直接归零。