最近在進行無障礙相關文檔翻譯的時候遇到了 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主要有以下幾種
這些標籤本身就隱含著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。因此提供傳統的跳轉連結來跳過導航直接跳轉到內容仍然是有必要的。