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

main、nav 和 aside 等 HTML5 元素可用作地标，即网页上屏幕阅读器和其他辅助技术可跳转到的特殊区域。通过使用地图项，您可以显著改善辅助技术用户在您网站上的导航体验。如需了解详情，请参阅 Deque University 的 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> 元素应包含与网页主题直接相关的所有内容，因此每个网页应只有一个 <main> 元素。如需了解如何使用每个地图注点，请参阅 MDN 中的内容分区元素摘要。
  • 请谨慎使用地标。实际上，地标过多可能会使辅助技术用户更难以导航，因为这会妨碍他们轻松跳转到所需的内容。

如需了解详情，请参阅标题和地标一文。

资源