跳至主要内容

網頁結構教學

良好結構的內容可以實現更有效率的導覽與處理。使用 HTML 與 WAI-ARIA 改進網頁與應用程式中的導覽與定向。

  • 頁面區域：**使用 HTML5 與 WAI-ARIA 識別與標記網頁上的區域。

  • 標記區域：標記區域以允許使用者區分與存取它們。

  • 標題：新增標題並根據標題的關係與重要性對網頁部分進行邏輯巢狀與標記。

  • 內容結構：使用適當且有意義的元素來標記頁面上的內容。

為什麼這很重要？​

內容結構良好的頁面對於許多網路使用者來說至關重要，例如：

  • 有認知與學習障礙的人可以更輕鬆地找並優先處理到頁面內容。
  • 使用螢幕報讀的使用者可以直接跳到主要內容並導覽到對他們來說重要的段落。
  • 鍵盤使用者可以更有效地瀏覽頁面及其段落。否則，使用者必須多次按 Tab 鍵才能瀏覽每個段落中的所有連結。
  • 使用僅顯示網頁主要內容的軟體的人(例如有認知障礙的人)如果正確標記頁面結構，將會獲得更好的結果。
  • 有視覺障礙的人(含視力低下的人)可以在頁面與內容中找到提供定位的提示。
  • 行動網路使用者通常可以使用所謂的「閱讀器」或「閱讀」模式，該模式僅在正確標記的情況下顯示頁面的主要內容。
  • 使用某些瀏覽器外掛程式的使用者可以使用標誌性作用跳到頁面上的特定段落。
  • 良好的、無障礙性的頁面結構還有其他好處，超越了身心障礙者的體驗。例如，搜尋引擎可以使用這些資料來更好地索引頁面內容。

相關 WCAG 資源​

這些教學提供了在不同情況下實現輔助功能的最佳實踐指南。本網頁結合了以下 WCAG 成功標準與來自不同一致性等級的技術：

成功標準：​

原始資料連結