语义化HTML直接决定屏幕阅读器能否准确识别关键区域：nav自带导航地标可跳转，main缺失会导致正文定位失败，标题层级断裂破坏文档结构，time/address等标签提供机器可解析元数据，DOM顺序必须匹配逻辑流。
语义化 HTML 不是“让页面看起来更规范”，而是直接决定屏幕阅读器能否准确识别导航、正文、表单等关键区域——没用对，读屏用户就得靠听完整页才能猜哪是菜单、哪是正文。
为什么 <nav></nav> 能跳转而 <div class="nav"> 完全静默
<p>屏幕阅读器不读类名，也不猜你“想表达什么”。<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"，键盘和语音指令都无响应目标
- React 中常见错误：
<div id="app"> 包全局，但子组件里没放 <code><nav></nav>，整个导航区块不可跳转
<main></main> 缺失或嵌套错误时，屏幕阅读器怎么“瞎找正文”
几乎所有读屏工具把 <main></main> 当作“页面主体内容”的唯一可信锚点。缺失时，系统退而求其次：先找 role="main"，再找不到就从第一个 <h1></h1> 开始算正文——但页眉里可能已有 <h1></h1>，结果用户发出“跳到主要内容”指令后，听到的是 Logo 文字或 Banner 标语。
-
<main></main> 必须是
- 不能嵌套在
<header></header>、<footer></footer>、<nav></nav> 或 <section></section> 内部
- 里面只能放用户真正要操作/阅读的核心内容（如商品列表、表单主区域），不能混入广告、侧边栏、弹窗
标题层级断裂比不用语义标签更伤可访问性
跳级使用标题（比如从 <h1></h1> 直接到 <h4></h4>）不是样式问题，而是语义断裂。读屏器依赖层级构建文档大纲，断层会让 <h4></h4> 被误判为新章节起点，甚至被跳过。
立即学习“前端免费学习笔记（深入）”；
- 每个
<section></section> 或 <article></article> 应以 <h2></h2> 起始，子模块用 <h3></h3>～<h6></h6>，严禁跳级
- 动态渲染的标题（如 React 中通过 props 注入）必须确保 DOM 插入时层级连续
- 用 DevTools 的「Accessibility」面板检查「Heading level」是否连续，比肉眼判断更可靠
<time></time> 和 <address></address> 这类标签不是“锦上添花”，而是机器可解析的元数据
单纯写“2025-09-12”或“北京市朝阳区XXX路”对人可读，但对辅助技术只是普通字符串。加上 <time datetime="2025-09-12"></time> 或 <address></address>，读屏软件就能识别类型并调整语调、提供快捷操作（如长按复制日期、唤起地图 App）。
-
<time></time> 的 datetime 值必须符合 ISO 8601（如 2025-09-12T14:30），不能是中文格式“2025年9月12日”
-
<address></address> 只适用于最近的或 <section></section> 级别的联系信息，不是所有“地址”都要套它
- 搜索引擎同样依赖这些属性提取结构化信息，比如富摘要（Rich Snippets）就要求
<time></time> 格式合法
最容易被忽略的点是：语义标签必须按逻辑流书写，DOM 顺序 ≠ 视觉顺序时（比如靠 CSS flex-order 或绝对定位挪动位置），屏幕阅读器会跳过关键内容——这问题不会报错，但可访问性检测直接扣分。
<nav></nav> 必须加 aria-label 区分，否则全部朗读为“导航”，用户无法判断哪个是主导航、哪个是页脚面包屑<div role="navigation"> 替代 <code><nav></nav> 时，漏掉 tabindex="0"，键盘和语音指令都无响应目标
<div id="app"> 包全局，但子组件里没放 <code><nav></nav>，整个导航区块不可跳转
<main></main> 缺失或嵌套错误时，屏幕阅读器怎么“瞎找正文”
几乎所有读屏工具把 <main></main> 当作“页面主体内容”的唯一可信锚点。缺失时，系统退而求其次：先找 role="main"，再找不到就从第一个 <h1></h1> 开始算正文——但页眉里可能已有 <h1></h1>，结果用户发出“跳到主要内容”指令后，听到的是 Logo 文字或 Banner 标语。
-
<main></main>必须是的直接子元素，且全页唯一 - 不能嵌套在
<header></header>、<footer></footer>、<nav></nav>或<section></section>内部 - 里面只能放用户真正要操作/阅读的核心内容（如商品列表、表单主区域），不能混入广告、侧边栏、弹窗
标题层级断裂比不用语义标签更伤可访问性
跳级使用标题（比如从 <h1></h1> 直接到 <h4></h4>）不是样式问题，而是语义断裂。读屏器依赖层级构建文档大纲，断层会让 <h4></h4> 被误判为新章节起点，甚至被跳过。
立即学习“前端免费学习笔记（深入）”；
- 每个
<section></section>或<article></article>应以<h2></h2>起始，子模块用<h3></h3>～<h6></h6>，严禁跳级 - 动态渲染的标题（如 React 中通过 props 注入）必须确保 DOM 插入时层级连续
- 用 DevTools 的「Accessibility」面板检查「Heading level」是否连续，比肉眼判断更可靠
<time></time> 和 <address></address> 这类标签不是“锦上添花”，而是机器可解析的元数据
单纯写“2025-09-12”或“北京市朝阳区XXX路”对人可读，但对辅助技术只是普通字符串。加上 <time datetime="2025-09-12"></time> 或 <address></address>，读屏软件就能识别类型并调整语调、提供快捷操作（如长按复制日期、唤起地图 App）。
-
<time></time>的datetime值必须符合 ISO 8601（如2025-09-12T14:30），不能是中文格式“2025年9月12日” -
<address></address>只适用于最近的或<section></section>级别的联系信息，不是所有“地址”都要套它 - 搜索引擎同样依赖这些属性提取结构化信息，比如富摘要（Rich Snippets）就要求
<time></time>格式合法
最容易被忽略的点是：语义标签必须按逻辑流书写，DOM 顺序 ≠ 视觉顺序时（比如靠 CSS flex-order 或绝对定位挪动位置），屏幕阅读器会跳过关键内容——这问题不会报错，但可访问性检测直接扣分。
