標題和位置標記

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

使用正確的標題和界標元素,即可為輔助技術的使用者大幅提升網站的瀏覽體驗。

使用標題概述頁面內容

使用 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 > 選項 > 無障礙),並查看「標題不會跳過層級」稽核結果。

使用地標輔助導航

HTML5 元素 (例如 mainnavaside) 可當做地標,或是螢幕閱讀器可跳轉的網頁上的特殊區域。

請使用地標標記定義網頁的主要部分,而非依賴 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 可協助您檢查網頁是否包含略過連結。再次執行無障礙稽核,並查看「網頁包含標題、略過連結或標記區域」稽核結果。