HTML文档结构中语义化标签对屏幕阅读器辅助技术兼容性的优化

main必须直接子元素于body，否则屏幕阅读器无法识别为主内容锚点；导航区需含可聚焦元素；标题层级须连续；日期须用ISO 8601格式；address仅用于联系入口。

为什么 `` 包 `` 会让屏幕阅读器“找不到正文”

因为 `` 必须是 `` 的直接子元素，一旦被 `` 或 `` 套住，辅助技术就无法将其识别为页面主内容锚点。用户按快捷键（如 NVDA 的 Insert+M）跳转时会失败，只能手动逐项下移——实测平均需按 14 次“下一项”才能抵达第一段正文。

常见错误写法：<div class="wrapper"><main>...</main></div>；正确结构必须是：<header>...</header><main>...</main><footer>...</footer>。

检查方法：打开浏览器开发者工具，执行 document.querySelector('main').parentElement === document.body，返回 true 才算合格。

`` 里只放文字链接会导致屏幕阅读器跳过整个导航区

导航区域必须由可聚焦的交互元素构成，比如 ``、`` 或带 tabindex="0" 的元素。如果 `` 内只有纯文本（如 `首页 | 关于 | 联系`），屏幕阅读器会把它当普通段落朗读，不触发“导航区域”快捷键（如 NVDA 的 D 键），也无法用方向键快速遍历。

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

实操建议：

• 每个 `` 至少包含一个 `` 或 ``，不能全是 `` 或文本节点
• 多个 `` 必须加区分标识，例如：<nav aria-label="主导航"></nav> 和 <nav aria-label="页脚导航"></nav>
• 避免把 `` 嵌套在 `
  • ` 里——HTML 验证会报错，部分旧版读屏软件直接丢弃该节点

  标题层级断裂比不用语义标签更破坏阅读流

  屏幕阅读器靠标题建立上下文地图。`

  ` 后直接出现 `

  `，它不会朗读 `

  `，而是跳过整块内容，用户完全不知道下面还有信息。这不是“读得慢”，是结构性丢失。

  关键规则：

  • 每个 `` 或 `` 必须以 `

    ` 起始（前提是外层 `` 已用 `

    `）

  • 禁止在 `` 外单独用 `

    `，除非它是全页唯一主标题

  • 无视觉标题的内容（如评论列表），改用 `` 而非 ``，否则读屏报“无标题内容”并可能静默跳过
  • <hgroup></hgroup> 已废弃，副标题请用 `

    ` + `

    `，而非包裹

  `` 和 `` 不是装饰，是机器可解析的元数据

  写 `2025年9月12日` 对屏幕阅读器无效——它只读作“二零二五年九月十二日”，无法识别为日期类型，也不能唤起日历操作。必须用 ISO 8601 格式：<time datetime="2025-09-12">2025年9月12日</time>。

  同理，`

  ` 只适用于页面级或 `` 级联系信息，不是所有“地址”都要套。例如文章末尾作者邮箱和所在地可用 ``，但商品详情页里的“发货地：杭州市”就不该用——它只是属性值，不是联系入口。

  容易被忽略的细节：<time></time> 的 datetime 属性缺失或格式错误（如含中文“年/月/日”），会导致搜索引擎富摘要失效，且 VoiceOver 在 macOS 上可能完全跳过该节点。