欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

淺析HTML5 Landmark

  發(fā)布時間:2020-09-11 16:49:07   作者:卷卷子   我要評論
這篇文章主要介紹了HTML5 Landmark的相關(guān)資料,幫助大家了解和學(xué)習(xí)Landmark,感興趣的朋友可以了解下

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

什么是 Landmark

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

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

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

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

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

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

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

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

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

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

區(qū)分同類型的 Landmark

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

<nav aria-label="主導(dǎo)航">
  <ul>
    <li>主頁</li>
    <li>購物車</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>

這樣讀屏軟件會分別生成以下兩個鏈接

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

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

使用讀屏軟件讀取 Landmark

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

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

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

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

總結(jié)

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

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

相關(guān)文章

  • HTML5中的Microdata與歷史記錄管理詳解

    Microdata作為HTML5新增的一個特性,它允許開發(fā)者在HTML文檔中添加更多的語義信息,以便于搜索引擎和瀏覽器更好地理解頁面內(nèi)容,本文將探討HTML5中Microdata的使用方法以及
    2025-04-21
  • HTML5表格語法格式詳解

    在HTML語法中,表格主要通過< table >、< tr >和< td >3個標簽構(gòu)成,本文通過實例代碼講解HTML5表格語法格式,感興趣的朋友一起看看吧
    2025-04-21
  • html5的響應(yīng)式布局的方法示例詳解

    這篇文章主要介紹了HTML5中使用媒體查詢和Flexbox進行響應(yīng)式布局的方法,簡要介紹了CSS Grid布局的基礎(chǔ)知識和如何實現(xiàn)自動換行的網(wǎng)格布局,感興趣的朋友一起看看吧
    2025-04-21
  • 基于Canvas的Html5多時區(qū)動態(tài)時鐘實戰(zhàn)代碼

    本文介紹了如何使用Canvas在HTML5上實現(xiàn)一個多時區(qū)動態(tài)時鐘的web展示,通過Canvas的API,可以繪制出6個不同城市的時鐘,并且這些時鐘可以動態(tài)轉(zhuǎn)動,每個時鐘上都會標注出對應(yīng)的
    2025-03-11
  • HTML5 data-*自定義數(shù)據(jù)屬性的示例代碼

    HTML5的自定義數(shù)據(jù)屬性(data-*)提供了一種標準化的方法在HTML元素上存儲額外信息,可以通過JavaScript訪問、修改和在CSS中使用,文章還介紹了高級用法,如存儲JSON數(shù)據(jù)、事
    2025-03-11
  • HTML5中下拉框<select>標簽的屬性和樣式詳解

    在HTML5中,下拉框(<select>標簽)作為表單的重要組成部分,為用戶提供了一個從預(yù)定義選項中選擇值的方式,本文將深入探討<select>標簽的屬性、樣式,并重點介
    2025-02-27
  • HTML5 Input 日期選擇器詳解

    本文介紹了HTML5InputDatePicker對象表示HTML``元素,是HTML5中的新對象,介紹了日期、周、月份、時間、日期+時間、本地日期時間等不同類型的日期選擇器,感興趣的朋友一起看
    2025-02-17
  • HTML5超鏈接和圖片基礎(chǔ)用法詳解

    本文介紹了HTML5中的超鏈接、相對路徑和圖片的使用方法,超鏈接可以創(chuàng)建指向另一個文檔或頁面內(nèi)部書簽的鏈接,相對路徑用于在同一服務(wù)器內(nèi)部跳轉(zhuǎn)頁面,圖片標簽用于引入外部圖
    2025-02-17
  • HTML5超鏈接的創(chuàng)建方法

    本文介紹了HTML5超鏈接的創(chuàng)建方法,包括基本語法、創(chuàng)建圖像超鏈接的邊框去除方法以及錨點鏈接的使用,還討論了超鏈接的四種不同狀態(tài)(link、visited、hover、active)的CSS樣
    2025-02-17
  • HTML5使用details標簽:展開/收縮信息

    最近看一些技術(shù)網(wǎng)站發(fā)現(xiàn)了details 標簽的妙用,這個不用js即可實現(xiàn)展開/收縮信息,很方便用來讓用戶先才答案,然后下面點擊再給出答案的效果,這里就為大家簡單介紹一下,
    2024-11-03

最新評論