标题和地标

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，并将“IN THE NEWS”设为 h3。虽然这可能与浏览器的默认样式相符，但会破坏向屏幕阅读器用户传达的轮廓！

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

使用地标辅助导航

main、nav 和 aside 等 HTML5 元素可用作地标，即屏幕阅读器可以跳转到的网页上的特殊区域。

使用地图标记标记来定义网页的主要部分，而不是依赖于 div。请注意不要过度添加地图注点，因为地图注点过多可能会让用户感到信息量过载。例如，请仅使用一个 main 元素，而不是 3 个或 4 个。

Lighthouse 建议您手动审核您的网站，检查“HTML5 地图元素是否用于改进导航”。您可以使用此地图注点元素列表检查您的网页。

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

许多网站的标题中包含重复的导航栏，这会给使用辅助技术的用户带来不便。使用跳转链接可让用户跳过此类内容。

跳过链接是一种屏幕外锚点，始终是 DOM 中第一个可聚焦项。通常，它包含指向网页主要内容的页内链接。由于它是 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、纽约时报和 Wikipedia）都包含跳过链接。请尝试访问这些网页，然后按键盘上的 TAB 键几次。

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