在無障礙網站設計中，該如何分區塊？答案是用地標（landmark）區域：以 header、nav、main、aside、footer 等語意元素，或在元素加上 role 屬性，把頁首、導覽、主要內容、補充資訊與頁尾標示出來，螢幕閱讀器使用者就能直接跳到想去的區塊。常見選擇題把 landmark、title、aria-role 並列，其中 title 只定義頁面標題，不能用來分區；ARIA 角色是寫在 role 屬性裡，HTML 並沒有 aria-role 這個屬性，而用來分區的正是地標這一類角色，所以答案是 landmark，而不是以上皆是。分好區塊之後，再用標題層級交代每一區的內容。
八種地標角色與對應的 HTML 元素
全球資訊網協會的 ARIA 實作指南說明，地標角色用來標示網頁的組織與結構。所謂 landmark 不是一個 HTML 標籤，而是一組角色，多數可以直接用 HTML 語意元素產生：
| 地標角色 | 對應的 HTML 元素 | 通常放什麼 |
|---|---|---|
| banner | 頁面層級的 header | 網站標誌與名稱 |
| navigation | nav | 主選單、麵包屑、頁尾選單 |
| main | main | 這一頁的主要內容 |
| complementary | aside | 側欄、相關文章等補充資訊 |
| contentinfo | 頁面層級的 footer | 版權與聯絡資訊 |
| search | search | 站內搜尋 |
| form | 有可及名稱的 form | 聯絡表單、訂閱表單 |
| region | 有可及名稱的 section | 需單獨被找到的內容區 |
header 與 footer 只有在頁面層級時才等同 banner 與 contentinfo；section 與 form 則要透過 aria-label 或 aria-labelledby 等方式取得名稱，才會被當成地標。
title 元素與 role 屬性各自負責什麼
為什麼不選 title？MDN 的說明指出，title 元素定義的是文件標題，顯示在瀏覽器的標題列或分頁上，而且放在 head 裡，不屬於頁面內容，自然無法把頁面切成區塊。它對無障礙仍然重要：輔助科技使用者常先聽頁面標題來判斷內容，所以每頁的標題要不同，並把頁面主旨放在網站名稱前面。
至於 aria-role，ARIA 的角色是寫在 role 屬性裡，例如在 div 加上 role 屬性並設為 navigation，並沒有名為 aria-role 的屬性。實務上能用 HTML 原生元素就不要用 role 模擬，nav、main、aside 本身就帶有地標角色，舊版型無法更換元素時才用 role 補上。MDN 也提醒地標要節制使用，太多會在螢幕閱讀器裡形成噪音。
劃分地標時要遵守的幾條規則
- 所有內容都放進地標：實作指南建議頁面上可感知的內容都位於某個地標區域內，使用者靠地標瀏覽時才不會漏掉資訊。
- 每頁一個 main：主要內容只有一塊，跳到 main 就該抵達這一頁的重點。
- 同類地標要命名：頁面若有主選單與頁尾選單兩個 nav，分別加上「主選單」「頁尾選單」這類名稱，讓使用者分得出來。
- 名稱不要重複角色：指南提醒標籤不要含地標角色的名稱，因為螢幕閱讀器已經會唸出角色，名稱寫成「主選單導覽」就會重複。
- region 一定要有名稱：沒有名稱的 section 只是一般區塊，不會成為地標。
地標的劃分方式在全站各頁要維持一致，使用者熟悉一次就能套用到每一頁。
標題標籤的正確用法與常見誤解
地標負責大區塊的劃分，標題則是區塊內的第二道導覽。MDN 說明 h1 到 h6 代表六個層級的段落標題，螢幕閱讀器使用者常在標題之間跳讀，多數螢幕閱讀器也能列出整頁的標題清單。考題常問「關於標題標籤，以下哪一項是錯誤的」，以下是對照 MDN 整理的正確觀念：
- 不要用標題標籤調整字級：想放大文字用 CSS 處理，標題標籤只用來表示內容層級。
- 不要跳層：從 h1 開始依序往下，避免使用者以為漏掉某一層。
- 一頁通常一個 h1：HTML 標準允許多個 h1，但不被視為良好做法，建議用一個 h1 描述頁面主題。
- 不是標題就不要套標題標籤：只是想加粗強調的文字，用一般段落搭配粗體即可。
反過來說，「標題層級可以依畫面喜好自由挑選」「標題只是視覺樣式，對輔助科技沒有影響」這類敘述都是錯的。
略過區塊連結與網站導覽機制
分區也是為了讓使用者略過每頁重複的頁首與選單。WCAG 的「略過區塊」準則要求，多個頁面重複出現的內容區塊要有略過的機制，可用的技術包括：在頁面開頭放一個跳到主要內容的連結、在每個內容區塊開頭使用標題，以及使用 ARIA 地標。相關技術文件也舉例，使用者可以直接跳到 main 地標，略過數十個選單連結。
另一個常和分區一起出題的概念是「導覽機制」。WCAG 的「多種方式」準則要求，在一組網頁中要提供一種以上找到某一頁的方法，列出的技術包括相關頁面連結、目錄、網站地圖、站內搜尋、所有頁面的連結清單，以及從首頁連到所有頁面。主選單、麵包屑與跳到主要內容的連結也都屬於導覽的一環；頁面上的裝飾圖片、背景色、字型這類視覺樣式，則不是導覽機制。
畫面區塊與程式結構的對應檢查
視覺上的分區和程式裡的分區要說同一件事。設計稿上用留白、底色或分隔線切出的每一塊，都應該對應到程式裡的某個地標或標題；程式裡標成地標的區塊，畫面上也要看得出邊界。常見的落差有幾種：畫面上看起來是同一塊的內容，程式裡卻被拆進不同區塊；頁尾的訂閱表單沒有名稱，螢幕閱讀器只唸出「表單」；或是為了版面效果，用 CSS 把區塊的顯示順序調得和程式順序不同，鍵盤與螢幕閱讀器使用者感受到的順序就和畫面對不上。
檢查方式是在設計稿上圈出每一塊，標上它該是哪個地標、標題屬於哪一層，再和實際程式結構對照。在設計階段做這一步，比上線後修改省力。
用螢幕閱讀器與鍵盤驗證分區
分區做得對不對，實際操作一次就知道。可以照以下步驟檢查：
- 開啟作業系統內建或免費的螢幕閱讀器，叫出地標清單，確認頁首、導覽、主要內容與頁尾都在，名稱分得出來。
- 叫出標題清單，檢查層級是否連貫、每個標題單獨聽也能懂。
- 只用 Tab 鍵從頁面開頭往下走，確認先聚焦到的是跳到主要內容的連結，而且按下後真的跳到 main。
- 用瀏覽器開發者工具的無障礙檢視，查看各區塊被辨識成什麼角色，再搭配自動化檢測工具找出缺名稱的地標與跳層的標題。
自動化工具只能找出規則明確的問題，順序與名稱是否好懂仍要靠人判斷。建議從首頁、服務頁與聯絡頁開始，再把修正後的版型套用到全站。
常見問題
HTML 有 landmark 這個標籤嗎？
沒有。landmark 是一組角色的統稱，實作時用 header、nav、main、aside、footer 等語意元素，或在元素加上 role 屬性，輔助科技就能把它們辨識成地標。
用 div 排版的舊網站要全部改寫嗎？
不必一次改完。可以先在既有的 div 加上對應的 role 屬性，補齊 main、navigation 等地標，再於改版時逐步換成語意元素。
地標和標題兩者都要做嗎？
都要。地標讓使用者在大區塊之間跳轉，標題讓使用者在區塊內快速瀏覽。兩者搭配，螢幕閱讀器使用者可以先選區塊、再找段落，比只用其中一種有效率。
一個頁面可以有幾個 nav？
可以有多個，例如主選單、麵包屑與頁尾選單。重點是每個 nav 都要有不同的名稱，讓使用者在地標清單中分辨用途，名稱裡不必再加「導覽」字樣。
表單也算地標嗎？
有名稱的 form 會成為表單地標，建議為聯絡表單這類重要表單加上名稱，讓使用者知道用途。站內搜尋則用 search 元素或 search 角色標示，和一般表單分開。
本文由京采數位科技整理。我們自 2005 年起提供官網設計、系統開發與 Google SEO 服務，實際案例可見成果與案例。
想直接討論你自己的網站狀況，或需要一份初步的搜尋機會評估？
相關主題
下一步
可以先挑網站首頁，用螢幕閱讀器叫出地標與標題清單，看看缺了哪些區塊、名稱是否清楚，再把問題列成清單。若檢查後發現版型需要重新規劃，京采的高轉換網頁設計會在設計階段定義頁首、導覽、主要內容與頁尾的結構，並以語意元素與清楚的標題層級實作。想討論現有網站的無障礙調整，歡迎與我們聯繫。
