這篇文章主要介紹HTML5中Landmark的示例分析，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
我們提供的服務有：網(wǎng)站設計、網(wǎng)站建設、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認證、蒲縣ssl等。為1000+企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務，是有科學管理、有技術的蒲縣網(wǎng)站制作公司
什么是 Landmark
Landmark 是一種用來表示網(wǎng)頁組織結構的方法。通常一個網(wǎng)頁可以被切分成幾個大塊
以一個視頻網(wǎng)站為例，網(wǎng)頁的最上方是一條banner，左側是一個導航欄，右側顯示視頻。網(wǎng)頁可以通過這種切分方式來分割出不同的功能區(qū)。當然在一個功能區(qū)內也可以遞歸地進行切分，這里先不展開。
對于一個視力障礙者，他無法像常人一樣理解從視覺角度傳達出的網(wǎng)頁結構信息，那么就需要網(wǎng)頁開發(fā)者預先將網(wǎng)頁的結構規(guī)劃好，并將結構信息寫在HTML代碼里，最終將網(wǎng)頁的結構信息通過讀屏軟件表達出來。
而landmark就是連接網(wǎng)頁結構信息和讀屏軟件的橋梁。網(wǎng)頁開發(fā)者通過landmark對網(wǎng)頁區(qū)域進行標注，讀屏軟件讀取landmark信息并傳達給視力障礙者。
如何使用 Landmark
事實上，在HTML5 landmark出現(xiàn)之前，就已經(jīng)有l(wèi)andmark的概念了。
landmark有以下幾種main，navigation，complementary，banner，contentinfo，form，region，search。通過使用就定義了一個
main landmark。
而在HTML5中定義了一些全新的標簽，并賦予他們隱式的landmark語義。
HTML5 Landmark主要有以下幾種
| HTML Element | Landmark Role | | main |
| navigation |
| complementary |
| banner |
| contentinfo |
| form |
| region |
這些標簽本身就隱含著landmark的含義，也就是說是完全等價的。
對于search landmark沒有定義專用的HTML標簽，通常使用
也就是說，在上一節(jié)引用的網(wǎng)頁中
對于1號區(qū)域，應當把所有的內容放到一個
對于2號區(qū)域，應當把所有的內容放到一個
對于3號區(qū)域，應當把所有的內容放到一個
讀屏軟件會生成一系列的跳轉鏈接來幫助視力障礙者確定網(wǎng)頁的結構并迅速跳轉至需要的部分。
在HTML5之前，只能通過role屬性來定義landmark，HTML5推出的新標簽能夠在保持可訪問性的情況下簡化標記。但并不是每個用戶使用的輔助工具都支持最新的標準，因此許多教程推薦使用的寫法來同時兼容兩種標準。W3C的標準不鼓勵在已經(jīng)含有隱式語義的情況下使用role屬性，因為兩者語義沖突的情況下可能導致無法預計的表現(xiàn)。
區(qū)分同類型的 Landmark
有時候頁面中可能會有多個導航欄，分別有不同的作用。比如一個電商網(wǎng)站有一個主導航來跳轉到購物車、收藏夾等不同的頁面；還有一個產品導航來跳轉到電子產品、嬰兒產品。如何對兩者進行區(qū)分呢，這里需要使用aria-label或者aria-labelledby屬性。
這樣讀屏軟件會分別生成以下兩個鏈接
這樣就將不同的landmark區(qū)分開了。
使用讀屏軟件讀取 Landmark
為了更好地理解landmark，我嘗試使用讀屏軟件來測試網(wǎng)頁上的landmark。這里我使用的是Windows系統(tǒng)自帶的講述人。
按下Caps Lock + F5來顯示網(wǎng)頁中所有的landmark。
按下Caps Lock + N，可以看到講述人光標移動到了網(wǎng)頁的主要內容部分。
使用D或Shift + D可以在landmark間切換，同時會朗讀出每個landmark的信息。
這里可以看到有一個search landmark，它在banner landmark的內部，這就是landmark嵌套的情況。對于landmark嵌套有一系列的規(guī)則，感興趣的讀者可以自己了解。
以上是“HTML5中Landmark的示例分析”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
分享文章：HTML5中Landmark的示例分析
網(wǎng)頁網(wǎng)址：http://www.yuzhuanjia.cn/article/jeshhs.html
