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 的 Accessibility Insights 擴充功能等工具，以視覺化方式呈現網頁結構，並找出未包含在地標中的區段：

如何有效使用地標

• 請使用地標元素定義網頁的主要部分，不要依賴 <div> 或 <span> 等一般元素。
• 使用地標來傳達網頁結構。舉例來說，<main> 元素應包含與網頁主題直接相關的所有內容，因此每個網頁應只包含一個。請參閱 MDN 的內容區隔元素摘要，瞭解如何使用每個地標。
• 請謹慎使用地標。標記過多反而會讓輔助技術使用者更難瀏覽內容，因為他們無法輕鬆跳到所需的內容。

注意：如果您發現網頁有四個 <nav> 元素或十個 <aside> 元素，可能表示您需要簡化使用者介面或內容結構，這可能對所有使用者都有幫助。

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

資源

• HTML5 地標元素用於改善導覽功能稽核的來源程式碼
• HTML5 區隔元素 (W3C)
• HTML 5 和 ARIA 地標 (Deque University)