⊙^⊙浅谈HTML5 Landmark

日期:2021-01-20 类型:科技新闻 

关键词:怎么把小程序变成二维码,微信小程序怎么开通,微信小程序csdn,小程序开发,网络答题小程序

近期在开展无障有关文本文档汉语翻译的情况下碰到了 landmark 的定义,在网络上搜过下达现沒有有关的汉语材料,因而写一篇blog简易详细介绍一下。

什么叫 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关键有下列几类

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">来完成。

换句话说,在上一节引入的网页页面中

  1. 针对2号地区,理应把全部的內容放进一个<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>

那样读屏手机软件会各自转化成下列2个连接

  • 导航栏,核心航
  • 导航栏,商品导航栏
     

那样就将不一样的landmark区别开过。

应用读屏手机软件载入 Landmark

以便更强自然地理解landmark,我试着应用读屏手机软件来检测网页页面上的landmark。这儿我应用的是Windows系统软件内置的叙述人。

按住Caps Lock + F5来显示信息网页页面中常有的landmark。

按住Caps Lock + N,能看到叙述人鼠标光标移动来到网页页面的关键內容一部分。

应用D或Shift + D能够在landmark间转换,同时候诵读出每一个landmark的信息内容。
这儿能看到有一个search landmark,它在banner landmark的內部,这便是landmark嵌套循环的状况。针对landmark嵌套循环有一系列产品的标准,很感兴趣的阅读者能够自身掌握。

小结

和英语单词的原意一样,landmark如同是一个网页页面的很多个“通道”或“城市地标”。根据landmark标明网页页面构造的信息内容,能够协助眼睛视力阻碍者根据读屏手机软件掌握网页页面的构造,并快速抵达必须的一部分。
但是如同并不是全部的读屏手机软件都适用HTML5 Landmark一样,并不是全部眼睛视力阻碍者都掌握landmark的定义并了解怎样应用landmark。因而出示传统式的自动跳转连接来绕过导航栏立即自动跳转到內容依然是必须的。

之上便是浅谈HTML5 Landmark的详尽內容,大量有关HTML5 Landmark的材料请关心脚本制作之家其他有关文章内容!