螢幕閱讀器提供指令,可快速在標題或特定地標區域之間跳轉。事實上,螢幕閱讀器使用者調查發現,使用者最常透過瀏覽標題,瞭解不熟悉的網頁。
使用正確的標題和地標元素,可大幅提升輔助技術使用者在網站上的瀏覽體驗。
使用標題來規劃網頁大綱
使用 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。雖然這可能符合瀏覽器的預設樣式,但會中斷傳達給螢幕閱讀器使用者的輪廓!
雖然聽起來有些違反直覺,但視覺上 h3 和 h4 元素是否大於對應的 h2 或 h1 元素,並不重要。重要的是元素傳達的輪廓和元素順序。
您可以使用 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、《紐約時報》和 Wikipedia) 都包含略過連結。請前往這些網頁,然後在鍵盤上按幾次 TAB 鍵。
Lighthouse 可協助您檢查網頁是否含有略過連結。再次執行無障礙稽核,並查看「這個網頁包含標題、略過連結或標記區域」稽核的結果。