HTML5 地標元素可用於改善瀏覽體驗

main、nav 和 aside 等 HTML5 元素可做為地標或網頁上的特殊區域，供螢幕閱讀器和其他輔助技術跳轉。只要使用地標元素，就能大幅改善輔助技術的使用者網站的瀏覽體驗。進一步瞭解德克大學的 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 的 Accessibility Insights 擴充功能等工具，以視覺化方式呈現網頁結構，並擷取不屬於地標的部分：

web.dev 螢幕截圖，其中以「Accessibility Insights」擴充功能醒目顯示的地標

如何有效使用地標

  • 您可以使用地標元素來定義網頁的主要部分，而非依賴 <div> 或 <span> 等一般元素。
  • 使用地標來呈現網頁的結構。 舉例來說，<main> 元素應包含與網頁主要提案直接相關的所有內容，因此每個網頁只能有一個。 如要瞭解如何使用每個地標，請參閱 MDN 內容版面元素的摘要。
  • 請審慎使用地標。位置標記過多可能會使輔助技術使用者較難瀏覽「更難」，因為導覽會無法輕鬆跳至所需的內容片段。

詳情請參閱「標題和地標」一文。

資源