浅析HTML5 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号地区，该当把全部的内容放到一个<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>

这样读屏软件会别离天生以下两个链接

导航，主导航

导航，产物导航
 

这样就将差异的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。因此提供传统的跳转链接来跳过导航直接跳转到内容如故是有须要的。

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!