关键在于正确使用语义化标签：main必须唯一且顶层，nav需带aria-label区分，标题层级不可跳级，time/address等需加datetime或contact属性，figure需含figcaption，aside用于独立旁注。

关键不是“加标签”，而是用对标签、放对位置、配对逻辑。屏幕阅读器靠内置角色（role）和 DOM 位置做判断，错一个就可能跳过正文或把面包屑当主导航。

必须唯一且顶层的

是读屏用户的“第一落点”

是屏幕阅读器执行“跳到主要内容”指令时的唯一可信锚点。它必须：

• 全页只出现一次
• 直接作为 的子元素，不能嵌在
  、

  、

  或

  里面
• 内部只放用户点进来真正要操作/阅读的核心内容（如文章正文、商品详情、表单主体）
• 不混入广告、侧边栏、弹窗、页脚链接等非核心区块

缺失

时，读屏器会退而求其次：先找 role="main"，再找不到就从第一个

开始算正文——但页眉里常有

Logo，结果用户一按快捷键，听到的是“公司名称”，而不是正文标题。

不是“所有带链接的盒子”，而是可跳转的导航地标

自带 role="navigation"，被 NVDA/VoiceOver 固化为地标（landmark），按 N 键就能跳入。而

的 computed role 是 generic，读屏器只当它是空容器，连“导航”两个字都不会提。

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

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

• 只包裹构成主路径的链接集合：顶部菜单、左侧栏目树、分页控件
• 页脚的“隐私政策”、文章末尾的“上一篇/下一篇”、分享按钮不属于
• 多个
  必须加 aria-label 区分，例如 aria-label="主导航" 和 aria-label="页脚快捷导航"，否则全部朗读为“导航”，用户无法分辨
• 用
  替代时，漏掉 tabindex="0"，键盘和语音指令都无响应目标

  标题层级 + 结构标签 = 屏幕阅读器的“认知地图”

  读屏器依赖标题（

  –

  ）和语义区块共同构建文档大纲。断层会让

  被误判为新章节起点，甚至被跳过。

  • 页面级

    应唯一，且通常放在

    内；不要在

    外单独用

  • 每个
    或

    应以合理层级标题起始（如整体用

    ，则其内

    用

    ，子模块用

    ）

• 禁止跳级：不用

  后直接

  ，也不在

  下突然插回

• 可多次出现（如每篇博客卡片自带一个），但它内部的标题属于该区块上下文，不破坏全局层级

细节标签补足机器可解析的元数据

单纯写“2025-09-12”或“北京市朝阳区XXX路”，对人可读，但对读屏器只是普通字符串；加上语义标签，它就能识别类型、调整语调、提供快捷操作。

• 2025年9月12日：datetime 必须符合 ISO 8601，中文格式无效
• 用于最近的或 级别的联系信息，不是所有地址都要套

• 是图片/图表的最小语义单元，缺失

  会导致读屏软件跳过说明

• 表示与主内容相关但可独立存在的旁注（如术语解释、作者简介），不是“右边栏”的视觉替代