可訪問性 標題級別
為什麼
人們使用標題結構來瀏覽頁面並瞭解主要內容。這對於有視力的人和螢幕閱讀器使用者都是如此。
什麼
標題透過 <h1> 到 <h6> 標籤定義。使用者透過標題來瀏覽您的頁面。
使用標題來顯示文件結構和不同部分之間的關係非常重要。<h1> 標題應用於主標題，然後是 <h2> 標題，接著是不那麼重要的 <h3>，以此類推。
如何操作
讓我們來看一個好的和壞的標題級別示例。
良好的文件大綱：The Strait Times
- 下載 瀏覽器擴充套件 Web Developer。它適用於 Chrome、Firefox 和 Opera。
- 開啟 The Straits Times。
- 開啟 Web Developer。在“資訊”選項卡下，單擊“檢視文件大綱”。
- 瀏覽文件大綱。
現在您對文件大綱的樣子有了瞭解。
糟糕的文件大綱：The New York Times
- 開啟 The New York Times。
- 開啟 Web Developer。在“資訊”選項卡下，單擊“檢視文件大綱”。
- 瀏覽文件大綱。
問題
此文件結構令人困惑。它有很多問題
- 沒有主標題
<h1>。 - 前三個
<h2>在沒有視覺上下文的情況下令人困惑。 - 關於特朗普的
<h3>與 DealBook 政策專案不相關。 - 一個
<h3>組合了多個標題。 - 一個
<h3>重複了資訊。
請檢視視覺層次結構。
最醒目的標題是“特朗普無罪”。下一個標題是“7 名共和黨人在關於第二次彈劾的投票中脫離前總統”。從視覺上看，接下來的三個標題顯然是同一級別的副標題，即使“最跨黨派的…”比“分析…”更大。
解決方案
讓我們逐一解決每個問題。
沒有主標題
我們至少有四種選擇來設定主標題
- 使用徽標作為主標題。The Straits Times 就是這樣做的。
- 使用“特朗普無罪”作為主標題。
- 將“特朗普無罪”和“7 名共和黨人在關於第二次彈劾的投票中脫離前總統”一起作為主標題。即使這兩個標題在視覺上是不同的，從語義角度來看，它們可以被視為一個標題。它們都描述了後續內容。
- 新增一個隱藏的標題“頭版”。
這裡沒有絕對的對錯。作為報紙的頭版，**使用徽標作為主標題**是很有意義的。請記住要為影像提供一個備用文字。
令人困惑的 h2
這三個標題在沒有視覺上下文的情況下令人困惑
- 收聽“The Daily”
- 觀點：收聽“Sway”
- DealBook D.C. 政策專案
我們可以至少透過兩種方式解決這個問題
- 新增一個隱藏的標題。
- 將標題級別從 h2 更改為 h3。
- 將標題更改為列表。
有時新增僅供螢幕閱讀器使用是有意義的。這種情況就是如此。一種常見的做法是使用 CSS 類 .sr-only，其中 sr 表示螢幕閱讀器。
<h2 class="sr-only">簡報</h2>
並新增此樣式將其移出螢幕
CSS 類 .sr-only，僅螢幕閱讀器可訪問
.sr-only {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
} 然後將簡報的級別從 h2 更改為 h3 是有意義的。但它們真的是標題嗎？它們是否呈現了後續內容？我們假設不是。如果我們同意這一點，我們可以將這三個連結更改為一個列表。
特朗普的 <h3>
醒目的標題“特朗普無罪”和隨後的標題“7 名共和黨人…”都指向同一篇文章。因此，它們可以成為同一個標題的一部分。同樣，這裡沒有絕對的對錯。我們可以將其更改為 h2，或者為此 <section> 新增一個隱藏的標題：
<h2 class="sr-only">標題</h2>
標題“標題”在文件大綱中與“簡報”*一起*執行得很好。
重複資訊
標題“7 名共和黨人…”重複了兩次。這是因為一個 h3 巢狀在另一個 h3 中。讓我們刪除它，然後前往 Web Developer 來顯示我們新的文件大綱。
好多了。
在此頁面上，您已經閱讀了許多標題。檢查文件大綱。它好嗎？
