标题和地标

Rob Dodson

屏幕阅读器提供了命令，可在标题之间快速跳转或跳转到特定标题 地标区域。事实上 屏幕阅读器用户调查问卷 发现，他们最常通过浏览 标题。

通过使用正确的标题和地标元素，您可以大幅 为辅助技术用户改善您网站上的导航体验。

使用标题概述页面内容

使用 h1-h6 元素为网页创建结构轮廓。目标是 为网页创建框架或基架 标题会形成一张心理图画。

常见做法是对广告上的主要标题或徽标使用单个 h1。 页面，用于指定主要版块的 h2 元素，以及辅助子版块中的 h3 元素：

<h1>Company name</h1>
<section>
  <h2>Section Heading</h2>
  …
  <h3>Sub-section Heading</h3>
</section>

不要跳过标题级别

开发者通常会跳过标题级别，以使用浏览器的默认样式， 贴近他们的设计这被视为反模式，因为它会损坏 大纲模型。

请不要使用浏览器的默认字体大小来调整标题，而是使用 自己的 CSS，不要跳过关卡。

例如，此网站有一个名为“IN THE NEWS”的版块，后面有两 标题：

包含标题、主打图片和子版块的新闻网站。

“IN THE NEWS”版块的标题可以是 h2，而辅助 两个标题都可以是 h3 元素。

因为《IN THE NEWS》的font-size小于标题的尺寸，那么它可能小于标题 很想把第一个故事的标题写成h2， “新闻热点”h3。虽然这可能会与浏览器的默认样式保持一致 否则就会破坏向屏幕阅读器用户传达的大纲！

您可以使用 Lighthouse 检查您的页面是否跳过任何标题级别。运行 无障碍功能审核（Lighthouse > 选项 > 无障碍功能），并查看 标题不要跳过级别审核的结果。

使用地标辅助导航

HTML5 元素（例如 main、nav 和 aside）用作地标，或 页面中屏幕阅读器可以跳转到的特殊区域。

使用地标标记来定义网页的主要版块，而不是依赖于 div。请注意不要过度使用，因为过多的地标 无从下手。例如，坚持只使用一个 main 元素，而不是 3 个，或者 4.

Lighthouse 建议您手动审核您的网站，以检查“HTML5 地标” 用于改进导航功能。"您可以使用此地标列表 元素 检查您的网页。

使用跳过链接绕过重复内容

许多网站的标题中包含重复的导航元素，这可能会让用户感到厌烦 来利用辅助技术导航使用跳过链接可让用户绕过此内容。

跳过链接是屏幕外锚点，始终是 DOM通常，它包含指向网页主要内容的页内链接。因为这是 第一个元素时，它只需执行从辅助技术到聚焦 并绕过重复性导航。

<!-- index.html -->
<a class="skip-link" href="#main">Skip to main</a>
…
<main id="main">
  [Main content]
</main>

/* style.css */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000000;
  color: white;
  padding: 8px;
  z-index: 100;
}

.skip-link:focus {
  top: 0;
}

许多热门网站，例如 GitHub、The NY 《时报》和维基百科全部 包含跳转链接。请尝试访问这些设备，然后按下您的设备上的 TAB 键 来回切换

Lighthouse 可以帮助您检查您的页面是否包含跳过链接。运行 请再次审核无障碍功能，并查看该网页包含 标题、跳过链接或地标区域审核。