地标
另见： ARIA landmark, 地标区域
通过 HTML5 元素或 ARIA 角色标识的页面区域，屏幕阅读器用户可直接跳转至此。地标（banner、navigation、main、complementary、contentinfo）构成页面的结构骨架。
地标是屏幕阅读器用户可通过专用键盘快捷键直接跳转的页面级区域。它们相当于书中的章节划分：视力正常的用户通过布局线索获取页面结构（顶部的可见页眉、右侧的侧边栏、底部的页脚）；屏幕阅读器用户则通过地标获取页面结构。
标准地标列表
以下每项都同时对应一个 HTML5 元素和一个 ARIA 角色。尽可能使用 HTML5 元素；当无法使用原生元素时，再使用 ARIA 角色。
| 区域 | HTML5 元素 | ARIA 角色 |
|---|---|---|
| 页面横幅（Logo、主导航） | <header>（页面顶层） | role="banner" |
| 主导航 | <nav> | role="navigation" |
| 主要内容 | <main> | role="main" |
| 辅助内容（侧边栏） | <aside> | role="complementary" |
| 页面页脚（版权、次要链接） | <footer>（页面底层） | role="contentinfo" |
| 搜索 | <search>（HTML5）或 <form role="search"> | role="search" |
| 需要标识的通用区域 | — | role="region"（需有标签） |
| 表单（非搜索） | <form> | role="form" |
注意，<header> 和 <footer> 分别映射到 banner 和 contentinfo，仅当它们是 <body> 的直接子元素时有效。位于 <article> 内的 <header> 只是文章级页眉，不会成为 banner 地标。
屏幕阅读器用户如何使用地标
各主流屏幕阅读器均提供专属的地标导航模式：
- JAWS：
R键循环切换地标，Shift+R反向切换，Insert+F7打开所有地标的列表。 - NVDA：
D键循环切换地标，Shift+D反向切换，Insert+F7打开元素列表。 - VoiceOver（macOS）：VO+U 打开转子，旋转至”地标”，用方向键浏览。
- VoiceOver（iOS）：双指旋转转子至”地标”，上下滑动浏览。
- TalkBack（Android）：向上再向右滑动打开阅读控制菜单，选择”地标”模式，向右滑动逐项浏览。
拥有良好地标的页面，能为屏幕阅读器用户提供一键访问的目录。
常见的地标错误
- 缺少
<main>。 没有 main 地标，屏幕阅读器用户每次加载页面都需要 Tab 跳过页眉才能到达主内容。每个页面应有且仅有一个<main>。 - 多个未标注的
<nav>。 一个页面同时有顶部导航和侧边栏导航，各自使用<nav>，会让用户在两个无法区分的”导航”条目之间无所适从。用aria-label为每个导航区域命名：<nav aria-label="主导航">、<nav aria-label="页面目录">。 - 在内部元素上使用
role="banner"。 位于<main>或<article>内的<header>不是 banner，而是文章级页眉。不要为其添加role="banner"。 - 重复的地标。 同一页面出现两个
<main>违反”landmark-no-duplicate-main”规则，axe 和 Lighthouse 均会捕获此问题。 - region 缺少标签。
role="region"需要配合aria-label或aria-labelledby，否则屏幕阅读器会忽略它。
如何审计地标
在任何现代屏幕阅读器中打开页面，按下地标列表快捷键，验证：
- 恰好有一个 banner、一个 main、一个 contentinfo。
- 每个
<nav>都有独特的无障碍名称。 - 地标结构与页面的视觉结构一致。
若地标列表显示”横幅、导航、导航、主要内容、补充内容、页脚信息”，且没有进一步标注，用户则无法区分两个导航区域。应当修复。