主頁(yè) > 知識(shí)庫(kù) > 淺析HTML5 Landmark

淺析HTML5 Landmark

熱門標(biāo)簽:機(jī)器人外呼系統(tǒng)存在哪些能力 高德地圖標(biāo)注地點(diǎn)糾錯(cuò) 拓展地圖標(biāo)注 平?jīng)龅貓D標(biāo)注位置怎么弄 電話機(jī)器人電銷系統(tǒng)掙話費(fèi) 南昌仁和怎么申請(qǐng)開通400電話 如何獲取地圖標(biāo)注客戶 只辦理400電話 電話機(jī)器人黑斑馬免費(fèi)

最近在進(jìn)行無(wú)障礙相關(guān)文檔翻譯的時(shí)候遇到了 landmark 的概念,在網(wǎng)上搜了下發(fā)現(xiàn)沒有相關(guān)的中文資料,因此寫一篇博客簡(jiǎn)單介紹一下。

什么是 Landmark

Landmark 是一種用來表示網(wǎng)頁(yè)組織結(jié)構(gòu)的方法。通常一個(gè)網(wǎng)頁(yè)可以被切分成幾個(gè)大塊

以一個(gè)視頻網(wǎng)站為例,網(wǎng)頁(yè)的最上方是一條banner,左側(cè)是一個(gè)導(dǎo)航欄,右側(cè)顯示視頻。網(wǎng)頁(yè)可以通過這種切分方式來分割出不同的功能區(qū)。當(dāng)然在一個(gè)功能區(qū)內(nèi)也可以遞歸地進(jìn)行切分,這里先不展開。
對(duì)于一個(gè)視力障礙者,他無(wú)法像常人一樣理解從視覺角度傳達(dá)出的網(wǎng)頁(yè)結(jié)構(gòu)信息,那么就需要網(wǎng)頁(yè)開發(fā)者預(yù)先將網(wǎng)頁(yè)的結(jié)構(gòu)規(guī)劃好,并將結(jié)構(gòu)信息寫在HTML代碼里,最終將網(wǎng)頁(yè)的結(jié)構(gòu)信息通過讀屏軟件表達(dá)出來。
而landmark就是連接網(wǎng)頁(yè)結(jié)構(gòu)信息和讀屏軟件的橋梁。網(wǎng)頁(yè)開發(fā)者通過landmark對(duì)網(wǎng)頁(yè)區(qū)域進(jìn)行標(biāo)注,讀屏軟件讀取landmark信息并傳達(dá)給視力障礙者。

如何使用 Landmark

事實(shí)上,在HTML5 landmark出現(xiàn)之前,就已經(jīng)有l(wèi)andmark的概念了。
landmark有以下幾種main,navigation,complementary,banner,contentinfo,form,region,search。通過使用<div role="main">就定義了一個(gè)main landmark。

而在HTML5中定義了一些全新的標(biāo)簽,并賦予他們隱式的landmark語(yǔ)義。
HTML5 Landmark主要有以下幾種

HTML Element Landmark Role
<main> main
<nav> navigation
<aside> complementary
<header> banner
<footer> contentinfo
<form> form
<section> region

這些標(biāo)簽本身就隱含著landmark的含義,也就是說<main><div role="main">是完全等價(jià)的。

對(duì)于search landmark沒有定義專用的HTML標(biāo)簽,通常使用<form role="search">來實(shí)現(xiàn)。

也就是說,在上一節(jié)引用的網(wǎng)頁(yè)中

  1. 對(duì)于1號(hào)區(qū)域,應(yīng)當(dāng)把所有的內(nèi)容放到一個(gè)<header></header>中,標(biāo)識(shí)該部分是banner
  2. 對(duì)于2號(hào)區(qū)域,應(yīng)當(dāng)把所有的內(nèi)容放到一個(gè)<nav></nav>中,標(biāo)識(shí)該部分是導(dǎo)航欄
  3. 對(duì)于3號(hào)區(qū)域,應(yīng)當(dāng)把所有的內(nèi)容放到一個(gè)<main></main>中,標(biāo)識(shí)該部分是網(wǎng)頁(yè)的主要內(nèi)容
     

讀屏軟件會(huì)生成一系列的跳轉(zhuǎn)鏈接來幫助視力障礙者確定網(wǎng)頁(yè)的結(jié)構(gòu)并迅速跳轉(zhuǎn)至需要的部分。

在HTML5之前,只能通過role屬性來定義landmark,HTML5推出的新標(biāo)簽?zāi)軌蛟诒3挚稍L問性的情況下簡(jiǎn)化標(biāo)記。但并不是每個(gè)用戶使用的輔助工具都支持最新的標(biāo)準(zhǔn),因此許多教程推薦使用<main role="main">的寫法來同時(shí)兼容兩種標(biāo)準(zhǔn)。W3C的標(biāo)準(zhǔn)不鼓勵(lì)在已經(jīng)含有隱式語(yǔ)義的情況下使用role屬性,因?yàn)閮烧哒Z(yǔ)義沖突的情況下可能導(dǎo)致無(wú)法預(yù)計(jì)的表現(xiàn)。

區(qū)分同類型的 Landmark

有時(shí)候頁(yè)面中可能會(huì)有多個(gè)導(dǎo)航欄,分別有不同的作用。比如一個(gè)電商網(wǎng)站有一個(gè)主導(dǎo)航來跳轉(zhuǎn)到購(gòu)物車、收藏夾等不同的頁(yè)面;還有一個(gè)產(chǎn)品導(dǎo)航來跳轉(zhuǎn)到電子產(chǎn)品、嬰兒產(chǎn)品。如何對(duì)兩者進(jìn)行區(qū)分呢,這里需要使用aria-label或者aria-labelledby屬性。

<nav aria-label="主導(dǎo)航">
  <ul>
    <li>主頁(yè)</li>
    <li>購(gòu)物車</li>
    <li>收藏夾</li>
  </ul>
</div>
        
<nav aria-label="產(chǎn)品導(dǎo)航">
  <ul>
    <li>嬰兒產(chǎn)品</li>
    <li>電子產(chǎn)品</li>
    <li>體育產(chǎn)品</li>
  </ul>
</div>

這樣讀屏軟件會(huì)分別生成以下兩個(gè)鏈接

  • 導(dǎo)航,主導(dǎo)航
  • 導(dǎo)航,產(chǎn)品導(dǎo)航
     

這樣就將不同的landmark區(qū)分開了。

使用讀屏軟件讀取 Landmark

為了更好地理解landmark,我嘗試使用讀屏軟件來測(cè)試網(wǎng)頁(yè)上的landmark。這里我使用的是Windows系統(tǒng)自帶的講述人。

按下Caps Lock + F5來顯示網(wǎng)頁(yè)中所有的landmark。

按下Caps Lock + N,可以看到講述人光標(biāo)移動(dòng)到了網(wǎng)頁(yè)的主要內(nèi)容部分。

使用D或Shift + D可以在landmark間切換,同時(shí)會(huì)朗讀出每個(gè)landmark的信息。
這里可以看到有一個(gè)search landmark,它在banner landmark的內(nèi)部,這就是landmark嵌套的情況。對(duì)于landmark嵌套有一系列的規(guī)則,感興趣的讀者可以自己了解。

總結(jié)

和單詞的原意一樣,landmark就像是一個(gè)網(wǎng)頁(yè)的許多個(gè)“入口”或“地標(biāo)”。通過landmark標(biāo)注網(wǎng)頁(yè)結(jié)構(gòu)的信息,可以幫助視力障礙者通過讀屏軟件了解網(wǎng)頁(yè)的結(jié)構(gòu),并迅速到達(dá)需要的部分。
然而正如并非所有的讀屏軟件都支持HTML5 Landmark一樣,并非所有視力障礙者都了解landmark的概念并知道如何使用landmark。因此提供傳統(tǒng)的跳轉(zhuǎn)鏈接來跳過導(dǎo)航直接跳轉(zhuǎn)到內(nèi)容仍然是有必要的。

以上就是淺析HTML5 Landmark的詳細(xì)內(nèi)容,更多關(guān)于HTML5 Landmark的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!

標(biāo)簽:新疆 永州 漯河 遼源 西藏 池州 棗莊 青島

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《淺析HTML5 Landmark》,本文關(guān)鍵詞  淺析,HTML5,Landmark,淺析,HTML5,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無(wú)關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《淺析HTML5 Landmark》相關(guān)的同類信息!
  • 本頁(yè)收集關(guān)于淺析HTML5 Landmark的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章