標題和位置標記

Rob Dodson

螢幕閱讀器可以使用指令，透過指令快速在標題或特定標題之間快速跳轉 地標區域。事實上 針對螢幕閱讀器使用者問卷調查 他們發現，最常瀏覽的網頁是 標題。

只要使用正確的方向和界限元素，就能大幅 為輔助技術的使用者改善網站的瀏覽體驗。

使用標題概述頁面內容

使用 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 可用於檢查網頁是否包含跳轉連結。執行 再次進行無障礙稽核，查找網頁中的結果 標題、略過連結或地標區域稽核。