標題和位置標記

Rob Dodson

螢幕閱讀器的指令可讓使用者快速在標題之間或特定地標區域之間跳轉。事實上，針對螢幕閱讀器使用者進行的調查發現，他們最常透過探索標題來瀏覽不熟悉的網頁。

只要使用正確的標題和地標元素，就能大幅改善輔助技術使用者在網站上的導覽體驗。

使用標題概述網頁

使用 h1-h6 元素為網頁建立結構大綱。目標是建立網頁的骨架或架構，讓任何透過標題瀏覽網頁的使用者都能在腦中形成圖像。

一般做法是使用單一 h1 做為網頁上的主要標題或標誌，h2 元素用於指定主要章節，h3 元素則用於支援子章節：

<h1>Company name</h1>
<section>
  <h2>Section Heading</h2>
  …
  <h3>Sub-section Heading</h3>
</section>

不要略過標題層級

開發人員經常會略過標題層級，使用與設計相符的瀏覽器預設樣式。這屬於反模式，因為它會破壞大綱模型。

請使用自己的 CSS，不要跳過層級，並且不要依賴瀏覽器的預設標題字型大小。

舉例來說，這個網站有一個名為「IN THE NEWS」的版面，後面接著有兩個標題：

新聞網站含有標題、主頁橫幅圖片和子部分。

區段標題「IN THE NEWS」可以是 h2，而相關標題則可以是 h3 元素。

由於「IN THE NEWS」的 font-size 比標題字型較小，因此您可能會想將第一則報導的標題設為 h2，並將「IN THE NEWS」設為 h3。雖然這可能符合瀏覽器的預設樣式，但會破壞傳達給螢幕閱讀器使用者的大綱！

您可以使用 Lighthouse 檢查網頁是否略過任何標題層級。執行無障礙稽核 (Lighthouse > 選項 > 無障礙)，並查看「標題不會跳過層級」稽核結果。

使用地標協助導航

main、nav 和 aside 等 HTML5 元素可做為地標，也就是螢幕閱讀器可跳轉的網頁上特殊區域。

請使用地標標記定義網頁的主要部分，而非依賴 div。請注意不要過度使用，因為過多地標可能會讓使用者感到困惑。例如，請只使用一個 main 元素，而非 3 或 4 個。

Lighthouse 建議您手動稽核網站，檢查「HTML5 地標元素是否用於改善導覽」。你可以使用這個地標元素清單來檢查網頁。

使用略過連結略過重複內容

許多網站的標頭都包含重複的導覽選單，使用輔助技術時可能會造成困擾。使用跳過連結讓使用者略過這項內容。

跳過連結是畫面外錨點，一律是 DOM 中的第一個可對焦項目。通常會包含網頁內連結，可連往網頁的主要內容。由於這是 DOM 中的第一個元素，只要使用輔助技術的單一動作，就能將焦點放在該元素上，並略過重複的導覽。

<!-- index.html -->
<a class="skip-link" href="#main">Skip to main</a>
…
<main id="main">
  [Main content]
</main>

/* style.css */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000000;
  color: white;
  padding: 8px;
  z-index: 100;
}

.skip-link:focus {
  top: 0;
}

許多熱門網站 (例如 GitHub、紐約時報和 維基百科) 都包含略過連結。請嘗試造訪這些網站，並按幾下鍵盤上的 TAB 鍵。

Lighthouse 可協助您檢查網頁是否包含略過連結。再次執行無障礙稽核，並查看「網頁包含標題、略過連結或標記區域」稽核結果。