HTML5的Landmark如何使用

本篇內容介紹了“HTML5的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. 對于1號區域，應當把所有的內容放到一個<header></header>中，標識該部分是banner

2. 對于2號區域，應當把所有的內容放到一個<nav></nav>中，標識該部分是導航欄

3. 對于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嵌套有一系列的規則，感興趣的讀者可以自己了解。

“HTML5的Landmark如何使用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！