地標結構：螢幕閱讀器如何瀏覽頁面

螢幕閱讀器使用者不會像捲動文件那樣由上至下閱讀頁面，他們在有名稱的區域之間跳轉：頁首、導覽、主要內容、頁尾，就像視力正常的使用者目光直接跳到選單列，而不去閱讀上面的所有內容。 這些區域稱為地標（landmark），沒有它們，螢幕閱讀器使用者只能按順序讀完所有內容，無法直接跳到自己真正要找的地方。

重點

• 地標是語意化的 HTML 區域，<header>、<nav>、<main>、<footer>、<aside>，它們為頁面提供一張看不見的地圖。螢幕閱讀器可以直接在它們之間跳轉。
• 沒有地標，螢幕閱讀器使用者就必須按順序聽完所有內容：同一個導覽選單在每個頁面、每一次都重複出現，無法跳過。
• 一個頁面應當恰好有一個 <main>。 多於一個會擾亂地標導覽，並直接導致自動掃描失敗。
• 多個 <nav> 元素需要標籤來區分。 兩個導覽區域都只被讀作「導覽」，使用者無從得知哪個是哪個。
• 把所有內容都包在通用 <div> 標籤裡而不用語意化元素，會徹底抹掉這張地圖。 <div> 沒有角色，所以螢幕閱讀器無處可跳。

確切的錯誤訊息及修正方法

如果掃描工具把您帶到這裡，以下是 axe-core（大部分自動無障礙檢查工具背後的開源引擎）針對地標問題報告的訊息。措辭與 axe-core 4.11 一致，並保留英文原樣，與報告中顯示的一致。

"Document does not have a main landmark"

這是規則 landmark-one-main（「文件應有一個 main 地標」）。頁面沒有 <main> 元素，也沒有 role="main"。請把頁面的主要內容包在唯一的 <main> 中，網站的頁首和頁尾放在它之外。

"All page content should be contained by landmarks"

這是規則 region；在失敗的元素上顯示為 "Some page content is not contained by landmarks"。文字、圖片或控制項位於所有 <header>、<nav>、<main> 和 <footer> 之外。把每一項移到它所屬的地標中，最常見的是 <main>。

"Document should not have more than one main landmark"

這是規則 landmark-no-duplicate-main。頁面上有兩個元素在充當 <main>，無論是透過標籤還是 role="main"。保留承載頁面真實內容的那個，把另一個改為 <div> 或帶標籤的 <section>。

"Landmarks should have a unique role or role/label/title (i.e. accessible name) combination"

這是規則 landmark-unique。兩個同類型的地標，通常是兩個 <nav> 元素，沒有名稱或名稱相同。給每個地標各自的 aria-label，例如 aria-label="Main" 和 aria-label="Footer"。

"Main landmark should not be contained in another landmark"

這是規則 landmark-main-is-top-level。<main> 被巢狀在 <header>、<nav>、<aside> 或 <footer> 內。把它移出來，使其處於頁面的頂層。

其中哪些由 Axeazy 自動修正、哪些等待您批准，見下文「Axeazy 在這裡能修正甚麼」。地標是螢幕閱讀器使用者在頁面中移動的兩種方式之一；另一種是標題，詳見會破壞無障礙的標題結構錯誤。

地標究竟起甚麼作用

地標是標示頁面主要區域的語意化 HTML 元素：<header> 用於頂部區域，<nav> 用於導覽選單，<main> 用於人們真正要閱讀的內容，<footer> 用於底部內容，<aside> 用於側邊欄這類間接相關的內容。

每一個都帶有螢幕閱讀器自動識別的隱含角色。這正是它們成為地標而不僅是容器的原因：螢幕閱讀器可以列出頁面上的每個地標，讓使用者直接跳到其中任何一個，這與視力正常的使用者只要掃一眼頁面視覺版面就能免費獲得的捷徑是一樣的。

螢幕閱讀器的快速鍵因軟件而異，但思路處處相同：NVDA 使用者用 D 鍵在地標間循環，JAWS 使用者用 R 鍵，VoiceOver 使用者透過轉盤。三者都能讓人跳過重複的頁首和導覽選單，直達真正的內容，而那個選單他們在網站其他每個頁面上都已經聽過了。

為甚麼這比看上去更重要

想像一下，每個網站都被一口氣不間斷地讀給您聽：標誌、完整的導覽選單、各種公告橫額，最後才是頁面的真正內容，每個頁面都如此，且無法跳過。這就是沒有地標時的體驗。在網店裡瀏覽十個商品頁面的人，要把完整的頁首和導覽聽上十遍，才能到達自己真正想比較的內容。

地標把這條直線變成了一張真正的地圖。這就是 A 級的 WCAG 1.3.1「資訊及關係」：頁面結構和關係必須能被程式確定，而不僅僅是視覺上顯而易見。它還與 2.4.1「略過區塊」相關，即使用者必須有辦法跳過重複內容；地標是滿足這一要求的標準方法之一。

破壞這張地圖的常見錯誤

把所有內容都包在 <div> 裡，而不用語意化元素。 <div> 完全沒有角色。視覺上它可能與規範的 <header> 或 <nav> 一模一樣，但螢幕閱讀器無處可跳，這個地標根本不存在。

<!-- 失敗：視覺上是頁首，對地標導覽不可見 -->
<div class="header">
  <div class="logo">Site Name</div>
</div>

<!-- 通過：螢幕閱讀器可以跳轉的真正地標 -->
<header>
  <a href="/zh-hant" class="logo">Site Name</a>
</header>

一個頁面上有多個 <main>。 HTML 規範只允許一個。第二個不僅是違反規則，還會主動擾亂地標導覽，並導致自動掃描失敗。

多個沒有標籤的 <nav> 元素。 如果頁面有主導覽選單和單獨的頁尾導覽，螢幕閱讀器會把兩者都讀成「導覽」，無法區分，除非每個都帶有區別性的標籤。

<!-- 失敗：兩者都被讀成相同的、無標籤的 "navigation" -->
<nav>...</nav>
<nav>...</nav>

<!-- 通過：每個都被有區別地讀出 -->
<nav aria-label="Main">...</nav>
<nav aria-label="Footer">...</nav>

把 <header> 或 <footer> 巢狀在 <article> 或 <section> 內。 這樣巢狀後，它們會完全失去地標角色；只有在文件頂層時才會被識別為頁面級地標，而不是在另一個內容區域內。

使用沒有標籤的 <section>。 <section> 只有透過 aria-label 或 aria-labelledby 取得可存取名稱時，才成為真正的地標。沒有標籤的 <section> 根本不會被登記為地標。

如何檢查您自己的網站

您不需要安裝螢幕閱讀器就能發現其中大部分問題。

1. 檢視頁面原始碼或開啟 DevTools 的 Elements 面板。 搜尋 <div class="header"> 或類似內容，用通用容器頂替真正地標元素是最常見的失敗。
2. 數一數您的 <main> 元素。 每個頁面應當恰好有一個。
3. 檢查每個 <nav> 是否有標籤，如果頁面上有多個的話。
4. 或者執行掃描，而不是逐個元素檢查。 Axeazy 的免費掃描大約 60 秒就能檢查頁面的完整地標結構，同時涵蓋它支援的其他修正類別。

Axeazy 在這裡能修正甚麼

這一類別乾淨地分成兩種更改，只有一種可以在不先詢問的情況下進行。

加入缺失的標籤是純粹的加入：不移動任何東西，不重新命名任何東西，所以 Axeazy 會自動修正：沒有標籤的孤立內容區域會得到一個根據其 id、class 或標籤名稱產生的標籤，缺少區別性標籤的重複地標會被加上一個。兩者都是真實可用的自動修正。

重構現有地標，例如把重複的 <header> 改為普通 <div>、把巢狀的 <main> 移到頂層、修正被埋在不該在的位置的 <nav>，是可見的結構性更改，而不是悄悄的加入。Axeazy 會為這些情況計算出正確的修正方案，但在您或您的開發人員在控制台中明確批准之前，不會寫入任何內容。這是一條刻意的界線：加入一個不可見的標籤不需要批准，更改頁面的實際結構則需要。

常見問題

一個頁面應該有多少個 <main> 元素？

恰好一個。HTML 規範只允許一個，多於一個會破壞螢幕閱讀器使用者的地標導覽，並導致自動無障礙掃描失敗。

我需要給頁面上的每個 <nav> 都加標籤嗎？

只有在有多個時才需要。單個導覽區域不需要標籤，螢幕閱讀器把它讀作「導覽」，意思很明確。一旦有兩個或更多，每個都需要區別性的標籤，如 aria-label="Main" 或 aria-label="Footer"，以便使用者區分。

使用 <section> 會自動建立地標嗎？

不會。<section> 只有在擁有可存取名稱（透過 aria-label 或 aria-labelledby 提供）後才成為地標。沒有的話，它只是一個通用容器，在地標方面與 <div> 沒有分別。

我可以把 <header> 巢狀在 <article> 裡嗎？

可以，但這樣巢狀後它會失去頁面級地標角色。<header> 或 <footer> 只有直接位於頁面層級時才會被識別為頂層地標，而不是位於另一個內容區域內。

只修正地標就能讓我的網站易於瀏覽嗎？

沒有任何單一修正能涵蓋一切。地標解決的是一個特定問題：讓使用者在主要區域之間跳轉，而不是按順序閱讀全部內容。頁面仍可能有其他導覽問題，如標題結構錯亂或令人困惑的 Tab 鍵順序，需要各自單獨檢查。

參考來源

• W3C：理解成功準則 1.3.1，資訊及關係
• W3C：理解成功準則 2.4.1，略過區塊