淺析HTML5 Landmark

最近在進(jìn)行無(wú)障礙相關(guān)文檔翻譯的時(shí)候遇到了 landmark 的概念,在網(wǎng)上搜了下發(fā)現(xiàn)沒(méi)有相關(guān)的中文資料,因此寫(xiě)一篇博客簡(jiǎn)單介紹一下。
什么是 Landmark
Landmark
是一種用來(lái)表示網(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è)可以通過(guò)這種切分方式來(lái)分割出不同的功能區(qū)。當(dāng)然在一個(gè)功能區(qū)內(nèi)也可以遞歸地進(jìn)行切分,這里先不展開(kāi)。
對(duì)于一個(gè)視力障礙者,他無(wú)法像常人一樣理解從視覺(jué)角度傳達(dá)出的網(wǎng)頁(yè)結(jié)構(gòu)信息,那么就需要網(wǎng)頁(yè)開(kāi)發(fā)者預(yù)先將網(wǎng)頁(yè)的結(jié)構(gòu)規(guī)劃好,并將結(jié)構(gòu)信息寫(xiě)在HTML代碼里,最終將網(wǎng)頁(yè)的結(jié)構(gòu)信息通過(guò)讀屏軟件表達(dá)出來(lái)。
而landmark就是連接網(wǎng)頁(yè)結(jié)構(gòu)信息和讀屏軟件的橋梁。網(wǎng)頁(yè)開(kāi)發(fā)者通過(guò)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
。通過(guò)使用<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的含義,也就是說(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è)中
- 對(duì)于1號(hào)區(qū)域,應(yīng)當(dāng)把所有的內(nèi)容放到一個(gè)
<header></header>
中,標(biāo)識(shí)該部分是banner - 對(duì)于2號(hào)區(qū)域,應(yīng)當(dāng)把所有的內(nèi)容放到一個(gè)
<nav></nav>
中,標(biāo)識(shí)該部分是導(dǎo)航欄 - 對(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)鏈接來(lái)幫助視力障礙者確定網(wǎng)頁(yè)的結(jié)構(gòu)并迅速跳轉(zhuǎn)至需要的部分。
在HTML5之前,只能通過(guò)role屬性來(lái)定義landmark,HTML5推出的新標(biāo)簽?zāi)軌蛟诒3挚稍L(fǎng)問(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è)鏈接
- 導(dǎo)航,主導(dǎo)航
- 導(dǎo)航,產(chǎn)品導(dǎo)航
這樣就將不同的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)文章!
相關(guān)文章
- Microdata作為HTML5新增的一個(gè)特性,它允許開(kāi)發(fā)者在HTML文檔中添加更多的語(yǔ)義信息,以便于搜索引擎和瀏覽器更好地理解頁(yè)面內(nèi)容,本文將探討HTML5中Microdata的使用方法以及2025-04-21
- 在HTML語(yǔ)法中,表格主要通過(guò)< table >、< tr >和< td >3個(gè)標(biāo)簽構(gòu)成,本文通過(guò)實(shí)例代碼講解HTML5表格語(yǔ)法格式,感興趣的朋友一起看看吧2025-04-21
- 這篇文章主要介紹了HTML5中使用媒體查詢(xún)和Flexbox進(jìn)行響應(yīng)式布局的方法,簡(jiǎn)要介紹了CSS Grid布局的基礎(chǔ)知識(shí)和如何實(shí)現(xiàn)自動(dòng)換行的網(wǎng)格布局,感興趣的朋友一起看看吧2025-04-21
基于Canvas的Html5多時(shí)區(qū)動(dòng)態(tài)時(shí)鐘實(shí)戰(zhàn)代碼
本文介紹了如何使用Canvas在HTML5上實(shí)現(xiàn)一個(gè)多時(shí)區(qū)動(dòng)態(tài)時(shí)鐘的web展示,通過(guò)Canvas的API,可以繪制出6個(gè)不同城市的時(shí)鐘,并且這些時(shí)鐘可以動(dòng)態(tài)轉(zhuǎn)動(dòng),每個(gè)時(shí)鐘上都會(huì)標(biāo)注出對(duì)應(yīng)的2025-03-11HTML5 data-*自定義數(shù)據(jù)屬性的示例代碼
HTML5的自定義數(shù)據(jù)屬性(data-*)提供了一種標(biāo)準(zhǔn)化的方法在HTML元素上存儲(chǔ)額外信息,可以通過(guò)JavaScript訪(fǎng)問(wèn)、修改和在CSS中使用,文章還介紹了高級(jí)用法,如存儲(chǔ)JSON數(shù)據(jù)、事2025-03-11HTML5中下拉框<select>標(biāo)簽的屬性和樣式詳解
在HTML5中,下拉框(<select>標(biāo)簽)作為表單的重要組成部分,為用戶(hù)提供了一個(gè)從預(yù)定義選項(xiàng)中選擇值的方式,本文將深入探討<select>標(biāo)簽的屬性、樣式,并重點(diǎn)介2025-02-27- 本文介紹了HTML5InputDatePicker對(duì)象表示HTML``元素,是HTML5中的新對(duì)象,介紹了日期、周、月份、時(shí)間、日期+時(shí)間、本地日期時(shí)間等不同類(lèi)型的日期選擇器,感興趣的朋友一起看2025-02-17
- 本文介紹了HTML5中的超鏈接、相對(duì)路徑和圖片的使用方法,超鏈接可以創(chuàng)建指向另一個(gè)文檔或頁(yè)面內(nèi)部書(shū)簽的鏈接,相對(duì)路徑用于在同一服務(wù)器內(nèi)部跳轉(zhuǎn)頁(yè)面,圖片標(biāo)簽用于引入外部圖2025-02-17
- 本文介紹了HTML5超鏈接的創(chuàng)建方法,包括基本語(yǔ)法、創(chuàng)建圖像超鏈接的邊框去除方法以及錨點(diǎn)鏈接的使用,還討論了超鏈接的四種不同狀態(tài)(link、visited、hover、active)的CSS樣2025-02-17
HTML5使用details標(biāo)簽:展開(kāi)/收縮信息
最近看一些技術(shù)網(wǎng)站發(fā)現(xiàn)了details 標(biāo)簽的妙用,這個(gè)不用js即可實(shí)現(xiàn)展開(kāi)/收縮信息,很方便用來(lái)讓用戶(hù)先才答案,然后下面點(diǎn)擊再給出答案的效果,這里就為大家簡(jiǎn)單介紹一下,2024-11-03