浅谈HTML5 Landmark

2021-04-03 19:45| 发布者: | 查看: |


浅谈HTML5 Landmark


本文关键详细介绍了HTML5 Landmark的有关材料,协助大伙儿掌握和学习培训Landmark,很感兴趣的朋友就行了解下。

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

什么叫 Landmark

Landmark是一种用于表明网页页面机构构造的方式。一般一个网页页面能够被分割成好多个大块

以一个视頻网站为例子,网页页面的最上边是一条banner,左边是一个导航栏栏,右边显示信息视頻。网页页面能够根据这类分割方法来切分出不一样的作用区。自然在一个作用区域内还可以递归地开展分割,这儿先不进行。

针对一个眼睛视力阻碍者,他没法像平常人一样了解从视觉效果视角传递出的网页页面构造信息内容,那麼就必须网页页面开发设计者事先将网页页面的构造整体规划好,并将构造信息内容写在HTML编码里,最后将网页页面的构造信息内容根据读屏手机软件表述出去。

而landmark便是联接网页页面构造信息内容和读屏手机软件的公路桥梁。网页页面开发设计者根据landmark对网页页面地区开展标明,读屏手机软件载入landmark信息内容并传递给眼睛视力阻碍者。

怎样应用Landmark

客观事实上,在HTML5 landmark出現以前,就早已有landmark的定义了。

landmark有下列几类main,navigation,plementary,banner,contentinfo,form,region,search。根据应用 div role="main" 就界定了一个main landmark。

而在HTML5中界定了一些全新升级的标识,并授予她们隐式的landmark词义。

HTML5 Landmark关键有下列几类

这种标识自身就暗含着landmark的含意,换句话说 main 和 code div role="main" /code 是彻底等额的的。

针对search landmark沒有界定专用型的HTML标识,一般应用 form role="search" 来完成。

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

针对2号地区,理应把全部的內容放进一个 header /header 中,标志该一部分是banner

针对2号地区,理应把全部的內容放进一个 nav /nav 中,标志该一部分是导航栏栏

针对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系统软件内置的叙述人。

应用D或Shift + D能够在landmark间转换,同时候诵读出每一个landmark的信息内容。

这儿能看到有一个search landmark,它在banner landmark的內部,这便是landmark嵌套循环的状况。针对landmark嵌套循环有一系列产品的标准,很感兴趣的阅读者能够自身掌握。

小结

和英语单词的原意一样,landmark如同是一个网页页面的很多个 通道 或 城市地标 。根据landmark标明网页页面构造的信息内容,能够协助眼睛视力阻碍者根据读屏手机软件掌握网页页面的构造,并快速抵达必须的一部分。

但是如同并不是全部的读屏手机软件都适用HTML5 Landmark一样,并不是全部眼睛视力阻碍者都掌握landmark的定义并了解怎样应用landmark。因而出示传统式的自动跳转连接来绕过导航栏立即自动跳转到內容依然是必须的。

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

来源于:脚本制作之家

连接:jb51/html5/744761.html


本文关键详细介绍了corewebapi多版本号操纵与swagger(nswag)配备,文中给大伙儿详细介绍的十分详尽,对大伙儿的学习培训或工作中具备一定的参照效仿使用价值,必须的朋友能够参照下


本文关键详细介绍了怎样应用Git完成转换支系开发设计全过程分析,原文中根据实例编码详细介绍的十分详尽,对大伙儿的学习培训或是工作中具备一定的参照学习培训使用价值,必须的朋友能够参照下


Dreamweaver如何做一个helloworld网页页面?针对新手应用Dreamweaver制作一个网页页面是很非常值得开心的一件事,该如何应用dw制作一个非常简单的helloworld网页页面呢?下边大家的就看来看详尽的实例教程,必须的朋友能够参照下


本文关键详细介绍了掩藏Web中的原素方式及优点和缺点实例教程,文中根据案例编码给大伙儿详细介绍的十分详尽,对大伙儿的学习培训或工作中具备一定的参照效仿使用价值,必须的朋友能够参照下


VS2019特性管理方法器沒有Microsoft.Cpp.x64.user的处理方法
<
>

 
QQ在线咨询
售前咨询热线
18720358503
售后服务热线
18720358503
返回顶部