螢幕閱讀器提供指令,可讓您在標題或特定地標區域之間快速切換。事實上,螢幕閱讀器使用者的問卷調查發現,他們經常透過瀏覽標題來瀏覽不熟悉的網頁。
您可以使用正確的標題和地標元素,為輔助技術的使用者大幅改善網站上的瀏覽體驗。
使用標題概述頁面內容
使用 h1
-h6
元素來為網頁建立結構大綱。目標是建立頁面骨架或鷹架,讓使用者在瀏覽標題時,能夠形成心理狀態。
常見的做法是使用單一 h1
做為網頁上的主要廣告標題或標誌,使用 h2
元素指定主要區段,以及使用 h3
元素做為支援子區段:
<h1>Company name</h1>
<section>
<h2>Section Heading</h2>
…
<h3>Sub-section Heading</h3>
</section>
不要略過標題層級
開發人員通常會略過標題層級,使用瀏覽器預設樣式,且樣式與其設計相符。系統會將這視為反模式,因為會破壞外框模型。
與其依賴瀏覽器的預設字型大小,改為使用自己的 CSS,且不要略過層級。
舉例來說,這個網站有一個名為「最新消息」的區段,後面接著兩個標題:
區段標題「屬於新聞」可以是 h2
,輔助標題也可以是 h3
元素。
由於「報導」的 font-size
比廣告標題「小」,因此您可能會想將第一個故事的標題設為 h2
,並將「即時新聞」設為 h3
。這可能會與瀏覽器的預設樣式相符,但會破壞向螢幕閱讀器使用者傳達的外框!
你可以使用 Lighthouse 檢查網頁是否略過任何標題層級。執行無障礙功能稽核 (依序點選「Lighthouse」>「Options」>「Accessibility」),然後尋找「Headings notSkip levels」稽核的結果。
使用位置標記輔助導航
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 可協助您檢查網頁是否含有跳轉連結。再次執行無障礙功能稽核,然後查看「本頁包含標題、略過連結或地標區域」的稽核結果。