標題和位置標記

螢幕閱讀器提供指令,可快速在標題或特定地標區域之間跳轉。事實上,螢幕閱讀器使用者調查發現,使用者最常透過瀏覽標題,瞭解不熟悉的網頁。

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

使用標題來規劃網頁大綱

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

一般做法是在網頁上使用單一 h1 做為主要標題或標誌,使用 h2 元素指定主要區段,並在支援的子區段中使用 h3 元素:

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

不要略過標題層級

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

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

舉例來說,這個網站有一個名為「IN THE NEWS」的版面,後面接著兩則新聞標題:

新聞網站,包含標題、主頁橫幅和子章節。

「新聞報導」的章節標題可以是 h2,而支援的標題都可以是 h3 元素。

由於「新聞報導」的 font-size 比標題,因此您可能會想將第一則報導的標題設為 h2,並將「新聞報導」設為 h3。雖然這可能符合瀏覽器的預設樣式,但會中斷傳達給螢幕閱讀器使用者的輪廓!

雖然聽起來有些違反直覺,但視覺上 h3h4 元素是否大於對應的 h2h1 元素,並不重要。重要的是元素傳達的輪廓和元素順序。

您可以使用 Lighthouse 檢查網頁是否略過任何標題層級。執行無障礙稽核 (依序點選「Lighthouse」>「選項」>「無障礙」),然後查看「標題不得略過層級」稽核的結果。

使用地標輔助導覽

mainnavaside 等 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《紐約時報》Wikipedia) 都包含略過連結。請前往這些網頁,然後在鍵盤上按幾次 TAB 鍵。

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