螢幕閱讀器可以使用指令,透過指令快速在標題或特定標題之間快速跳轉 地標區域。事實上 針對螢幕閱讀器使用者問卷調查 他們發現,最常瀏覽的網頁是 標題。
只要使用正確的方向和界限元素,就能大幅 為輔助技術的使用者改善網站的瀏覽體驗。
使用標題概述頁面內容
使用 h1
-h6
元素建立網頁的結構大綱。目標為
建立網頁的骨架或鷹架,
標題就能形成一個心理感。
常見做法是使用單一h1
做為主要廣告標題或標誌
用於指定主要區段的 h2
元素,以及用於支援子區段的 h3
元素:
<h1>Company name</h1>
<section>
<h2>Section Heading</h2>
…
<h3>Sub-section Heading</h3>
</section>
不要略過標題層級
開發人員通常會略過標題層級,以使用瀏覽器預設樣式 它們的設計就會非常契合他們的設計這屬於反面模式,因為 也可以使用外框模型
不使用瀏覽器的預設字型大小設定 且不會略過層級
舉例來說,這個網站有一個名為「In the NewsS」(新聞內容) 的版面,後面接著兩個 標題:
「最新消息」專區標題可以是 h2
,而這可能是輔助鍵
廣告標題都是 h3
元素。
因為「最新消息」的 font-size
比廣告標題小,因此可能會
您可能會想將第一則報導的標題設為h2
「最新消息」h3
。雖然可能符合瀏覽器的預設樣式
這麼做會中斷向螢幕閱讀器使用者傳達的大綱!
你可以使用 Lighthouse 檢查網頁是否略過任何標題層級。執行 無障礙稽核 (Lighthouse > 選項 > 無障礙功能) ,確認標題未略過層級稽核的結果。
使用地標輔助導航
HTML5 元素 (例如 main
、nav
和 aside
) 則是地標,
螢幕閱讀器可跳至網頁上的特殊區域
使用標記標記來定義網頁的主要部分,不要依賴
div
秒。請務必小心,因為有太多地標
我實在太驚人了舉例來說,請只使用一個 main
元素,而非 3,
4.
Lighthouse 建議手動審核網站,確認是否「HTML5 地標」 都能改善導覽品質」你可以查看這份地標清單 元素 檢查您的網頁。
略過含有跳轉連結的重複內容
許多網站的標頭包含重複導覽,這可能會造成困擾 以輔助技術進行瀏覽使用略過連結,讓使用者略過這項內容。
跳轉連結是螢幕外的錨定廣告,始終是其內第一個可聚焦的項目 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、The NY
時間和維基百科全部
包含跳轉連結。請嘗試造訪這些區域,然後按下裝置上的 TAB
鍵
反覆嘗試。
Lighthouse 可用於檢查網頁是否包含跳轉連結。執行 再次進行無障礙稽核,查找網頁中的結果 標題、略過連結或地標區域稽核。