标题和地标

屏幕阅读器会提供一些命令,以便在标题之间或特定地标区域快速跳转。事实上,针对屏幕阅读器用户进行的问卷调查发现,他们最常通过浏览标题在陌生页面中导航。

通过使用正确的标题和地标元素,您可以显著改善辅助技术用户在网站上的导航体验。

使用标题概述页面内容

使用 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 > 选项 > 无障碍功能),并查看“标题不跳过级别”审核的结果。

使用地标来帮助导航

HTML5 元素(例如 mainnavaside)充当着“地标”或者屏幕阅读器能够跳转到的网页上的特殊区域。

请使用地标标记定义网页的主要版块,而不是依赖于 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纽约时报维基百科等许多热门网站都包含跳转链接。请尝试访问它们,然后按几次键盘上的 TAB 键。

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