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

HTML5 元素(例如 mainnavaside)可充当网页上的地标,或屏幕阅读器和其他辅助技术可以跳转到的特殊区域。通过使用地标元素,您可以显著改善网站上的导航体验,为辅助技术用户提供更好的体验。如需了解详情,请参阅德克大学的 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 的屏幕截图,其中通过无障碍功能数据分析扩展程序突出显示了地标

如何有效使用地标

  • 请使用地标元素定义网页的主要版块,而不是依赖于 <div><span> 等通用元素。
  • 使用地标来传达网页的结构。 例如,<main> 元素应包含与网页主旨直接相关的内容,因此每个网页应该只有一项内容。如需了解如何使用每个地标,请参阅 MDN 的内容版块元素摘要
  • 谨慎使用地标。实际上,有太多地标可能会让辅助技术用户更难以进行导航,因为这会导致他们无法轻松跳至所需的内容。

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

资源