最近在進行無障礙相關文件翻譯的時候遇到了 landmark 的概念，在網上搜了下發現沒有相關的中文資料，因此寫一篇部落格簡單介紹一下。
什麼是 Landmark
Landmark 是一種用來表示網頁組織結構的方法。通常一個網頁可以被切分成幾個大塊
以一個視訊網站為例，網頁的最上方是一條banner，左側是一個導航欄，右側顯示視訊。網頁可以通過這種切分方式來分割出不同的功能區。當然在一個功能區內也可以遞迴地進行切分，這裡先不展開。
對於一個視力障礙者，他無法像常人一樣理解從視覺角度傳達出的網頁結構資訊，那麼就需要網頁開發者預先將網頁的結構規劃好，並將結構資訊寫在HTML程式碼裡，最終將網頁的結構資訊通過讀屏軟體表達出來。
而landmark就是連線網頁結構資訊和讀屏軟體的橋樑。網頁開發者通過landmark對網頁區域進行標註，讀屏軟體讀取landmark資訊並傳達給視力障礙者。
如何使用 Landmark
事實上，在HTML5 landmark出現之前，就已經有landmark的概念了。
landmark有以下幾種main，navigation，complementary，banner，contentinfo，form，region，search。通過使用<div role="main">就定義了一個main landmark。
而在HTML5中定義了一些全新的標籤，並賦予他們隱式的landmark語義。
HTML5 Landmark主要有以下幾種
| HTML Element | Landmark Role |
|---|---|
| <main> | main |
| <nav> | navigation |
| <aside> | complementary |
| <header> | banner |
| <footer> | contentinfo |
| <form> | form |
| <section> | region |
這些標籤本身就隱含著landmark的含義，也就是說<main>和<div role="main">是完全等價的。
對於search landmark沒有定義專用的HTML標籤，通常使用<form role="search">來實現。
也就是說，在上一節引用的網頁中
- 對於1號區域，應當把所有的內容放到一個
<header></header>中，標識該部分是banner - 對於2號區域，應當把所有的內容放到一個
<nav></nav>中，標識該部分是導航欄 - 對於3號區域，應當把所有的內容放到一個
<main></main>中，標識該部分是網頁的主要內容
讀屏軟體會生成一系列的跳轉連結來幫助視力障礙者確定網頁的結構並迅速跳轉至需要的部分。
在HTML5之前，只能通過role屬性來定義landmark，HTML5推出的新標籤能夠在保持可訪問性的情況下簡化標記。但並不是每個使用者使用的輔助工具都支援最新的標準，因此許多教程推薦使用
<main role="main">的寫法來同時相容兩種標準。W3C的標準不鼓勵在已經含有隱式語義的情況下使用role屬性，因為兩者語義衝突的情況下可能導致無法預計的表現。
區分同型別的 Landmark
有時候頁面中可能會有多個導航欄，分別有不同的作用。比如一個電商網站有一個主導航來跳轉到購物車、收藏夾等不同的頁面；還有一個產品導航來跳轉到電子產品、嬰兒產品。如何對兩者進行區分呢，這裡需要使用aria-label或者aria-labelledby屬性。
<nav aria-label="主導航">
<ul>
<li>主頁</li>
<li>購物車</li>
<li>收藏夾</li>
</ul>
</div>
<nav aria-label="產品導航">
<ul>
<li>嬰兒產品</li>
<li>電子產品</li>
<li>體育產品</li>
</ul>
</div>
這樣讀屏軟體會分別生成以下兩個連結
- 導航，主導航
- 導航，產品導航
這樣就將不同的landmark區分開了。
使用讀屏軟體讀取 Landmark
為了更好地理解landmark，我嘗試使用讀屏軟體來測試網頁上的landmark。這裡我使用的是Windows系統自帶的講述人。
按下Caps Lock + F5來顯示網頁中所有的landmark。
按下Caps Lock + N，可以看到講述人游標移動到了網頁的主要內容部分。
使用D或Shift + D可以在landmark間切換，同時會朗讀出每個landmark的資訊。
這裡可以看到有一個search landmark，它在banner landmark的內部，這就是landmark巢狀的情況。對於landmark巢狀有一系列的規則，感興趣的讀者可以自己瞭解。
總結
和單詞的原意一樣，landmark就像是一個網頁的許多個“入口”或“地標”。通過landmark標註網頁結構的資訊，可以幫助視力障礙者通過讀屏軟體瞭解網頁的結構，並迅速到達需要的部分。
然而正如並非所有的讀屏軟體都支援HTML5 Landmark一樣，並非所有視力障礙者都瞭解landmark的概念並知道如何使用landmark。因此提供傳統的跳轉連結來跳過導航直接跳轉到內容仍然是有必要的。