| HTML Element | Landmark Role |
|---|---|
| <main> | main |
| <nav> | navigation |
| <aside> | complementary |
| <header> | banner |
| <footer> | contentinfo |
| <form> | form |
| <section> | region |
這些標(biāo)簽本身就隱含著landmark的含義，也就是說(shuō)<main>和<div role="main">是完全等價(jià)的。
對(duì)于search landmark沒(méi)有定義專(zhuān)用的HTML標(biāo)簽，通常使用<form role="search">來(lái)實(shí)現(xiàn)。
也就是說(shuō)，在上一節(jié)引用的網(wǎng)頁(yè)中
<header></header>中，標(biāo)識(shí)該部分是banner<nav></nav>中，標(biāo)識(shí)該部分是導(dǎo)航欄<main></main>中，標(biāo)識(shí)該部分是網(wǎng)頁(yè)的主要內(nèi)容讀屏軟件會(huì)生成一系列的跳轉(zhuǎn)鏈接來(lái)幫助視力障礙者確定網(wǎng)頁(yè)的結(jié)構(gòu)并迅速跳轉(zhuǎn)至需要的部分。
在HTML5之前，只能通過(guò)role屬性來(lái)定義landmark，HTML5推出的新標(biāo)簽?zāi)軌蛟诒３挚稍L問(wèn)性的情況下簡(jiǎn)化標(biāo)記。但并不是每個(gè)用戶(hù)使用的輔助工具都支持最新的標(biāo)準(zhǔn)，因此許多教程推薦使用<main role="main">的寫(xiě)法來(lái)同時(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ū)分同類(lèi)型的 Landmark
有時(shí)候頁(yè)面中可能會(huì)有多個(gè)導(dǎo)航欄，分別有不同的作用。比如一個(gè)電商網(wǎng)站有一個(gè)主導(dǎo)航來(lái)跳轉(zhuǎn)到購(gòu)物車(chē)、收藏夾等不同的頁(yè)面；還有一個(gè)產(chǎn)品導(dǎo)航來(lái)跳轉(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)物車(chē)</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è)鏈接
這樣就將不同的landmark區(qū)分開(kāi)了。
使用讀屏軟件讀取 Landmark
為了更好地理解landmark，我嘗試使用讀屏軟件來(lái)測(cè)試網(wǎng)頁(yè)上的landmark。這里我使用的是Windows系統(tǒng)自帶的講述人。
按下Caps Lock + F5來(lái)顯示網(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)”。通過(guò)landmark標(biāo)注網(wǎng)頁(yè)結(jié)構(gòu)的信息，可以幫助視力障礙者通過(guò)讀屏軟件了解網(wǎng)頁(yè)的結(jié)構(gòu)，并迅速到達(dá)需要的部分。
然而正如并非所有的讀屏軟件都支持HTML5 Landmark一樣，并非所有視力障礙者都了解landmark的概念并知道如何使用landmark。因此提供傳統(tǒng)的跳轉(zhuǎn)鏈接來(lái)跳過(guò)導(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)問(wèn)題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無(wú)關(guān)。