使用 HTML5 地标元素改善导航体验

HTML5 元素（例如 main、nav 和 aside）将用作地标， 或特殊区域 屏幕阅读器和其他辅助技术可以跳跃 通过使用地标元素， 您可以大幅改善您网站上的导航体验 辅助技术用户所需掌握的知识 如需了解详情，请访问德克大学 HTML 5 和 ARIA 地标。

如何手动查看地标

使用 W3C 的地标元素列表 检查网页的每个主要版块是否包含地标元素。 例如：

<header>
  <p>Put product name and logo here</p>
</header>
<nav>
  <ul>
    <li>Put navigation here</li>
  </ul>
</nav>
<main>
  <p>Put main content here</p>
</main>
<footer>
  <p>Put copyright info, supplemental links, etc. here</p>
</footer>

您还可以使用 Microsoft 的 无障碍功能数据分析扩展程序 直观呈现您的网页结构并捕获位置标记中未包含的部分：

web.dev 的屏幕截图，其中突出显示了 Accessibility Insights 扩展程序中的地标

如何有效使用地标

  • 使用地标元素定义网页的主要版块 而不是依赖于 <div> 或 <span> 等通用元素。
  • 使用地标传达网页的结构。 例如，<main> 元素应包含所有直接相关的内容 网页的主要内容，因此每个网页应只有一个广告素材。 请参阅 MDN 的内容部分元素摘要 来了解如何使用各个地标。
  • 谨慎使用地标。拥有太多的地标 加大辅助技术用户浏览体验的难度，因为 使用户无法轻松跳到想要查看的内容
。

请参阅标题和地标帖子 。

资源