屏幕阅读器有命令可以快速在标题或特定地标区域之间跳转。事实上，一项针对屏幕阅读器用户的调查发现，他们最常通过浏览标题来导航不熟悉的页面。
通过使用正确的标题和地标元素，您可以显著改善使用辅助技术的用户在您网站上的导航体验。
使用标题来概述页面
使用 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 元素（例如 main、nav 和 aside）充当地标，或页面上的特殊区域，屏幕阅读器可以跳转到这些区域。
使用地标标签定义页面的主要部分，而不是依赖 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 可以帮助您检查您的页面是否包含跳过链接。再次运行“无障碍功能”审核，并查找 页面包含标题、跳过链接或地标区域 审核的结果。