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 的內容分區元素摘要 ，瞭解如何使用各個地標。
  • 謹慎使用地標。如果有太多地標，實際上 讓輔助技術使用者「較不」瀏覽網站。 可避免他們輕鬆跳到想看的內容。
，瞭解如何調查及移除這項存取權。

查看「標題和地標」貼文 瞭解詳情

資源