浅析HTML5 Landmark

最近在举行无障碍相关文档翻译的时候碰到了 landmark 的概念，在网上搜了下发现没有相关的中文资料，因此写一篇博客简单先容一下。

什么是 Landmark

[code]Landmark[/code] 是一种用来表示网页构造结构的方法。通常一个网页可以被切分成几个大块

以一个视频网站为例，网页的最上方是一条banner，左侧是一个导航栏，右侧表现视频。网页可以通过这种切分方式来分割出不同的功能区。固然在一个功能区内也可以递归地举行切分，这里先不睁开。
对于一个视力障碍者，他无法像常人一样理解从视觉角度传达出的网页结构信息，那么就必要网页开发者预先将网页的结构规划好，并将结构信息写在HTML代码里，最终将网页的结构信息通过读屏软件表达出来。
而landmark就是毗连网页结构信息和读屏软件的桥梁。网页开发者通过landmark对网页区域举行标注，读屏软件读取landmark信息并传达给视力障碍者。

怎样利用 Landmark

事实上，在HTML5 landmark出现之前，就已经有landmark的概念了。
landmark有以下几种[code]main，navigation，complementary，banner，contentinfo，form，region，search[/code]。通过利用[code]<div role="main">[/code]就界说了一个[code]main[/code] landmark。

而在HTML5中界说了一些全新的标签，并赋予他们隐式的landmark语义。
HTML5 Landmark重要有以下几种

这些标签本身就隐含着landmark的寄义，也就是说[code]<main>[/code]和[code]<div role="main">[/code]是完全等价的。

对于[code]search[/code] landmark没有界说专用的HTML标签，通常利用[code]<form role="search">[/code]来实现。

也就是说，在上一节引用的网页中

1. 对于1号区域，应当把所有的内容放到一个[code]<header></header>[/code]中，标识该部门是banner
2. 对于2号区域，应当把所有的内容放到一个[code]<nav></nav>[/code]中，标识该部门是导航栏
3. 对于3号区域，应当把所有的内容放到一个[code]<main></main>[/code]中，标识该部门是网页的重要内容
    

读屏软件会生成一系列的跳转链接来帮助视力障碍者确定网页的结构并灵敏跳转至必要的部门。

在HTML5之前，只能通过role属性来界说landmark，HTML5推出的新标签能够在保持可访问性的情况下简化标志。但并不是每个用户利用的辅助工具都支持最新的尺度，因此许多教程推荐利用<main role="main">的写法来同时兼容两种尺度。W3C的尺度不鼓励在已经含有隐式语义的情况下利用role属性，因为两者语义辩说的情况下可能导致无法预计的表现。

区分同范例的 Landmark

有时候页面中可能会有多个导航栏，分别有不同的作用。比如一个电商网站有一个主导航来跳转到购物车、收藏夹等不同的页面；另有一个产物导航来跳转到电子产物、婴儿产物。怎样对两者举行区分呢，这里必要利用[code]aria-label[/code]大概[code]aria-labelledby[/code]属性。

这样读屏软件会分别生成以下两个链接

• 导航，主导航
• 导航，产物导航
   

这样就将不同的landmark区分开了。

利用读屏软件读取 Landmark

为了更好地理解landmark，我实行利用读屏软件来测试网页上的landmark。这里我利用的是Windows系统自带的报告人。

按下Caps Lock + F5来表现网页中所有的landmark。

按下Caps Lock + N，可以看到报告人光标移动到了网页的重要内容部门。

利用D或Shift + D可以在landmark间切换，同时会朗读出每个landmark的信息。
这里可以看到有一个[code]search[/code] landmark，它在[code]banner [/code]landmark的内部，这就是landmark嵌套的情况。对于landmark嵌套有一系列的规则，感兴趣的读者可以本身了解。

总结

和单词的原意一样，landmark就像是一个网页的许多个“入口”或“地标”。通过landmark标注网页结构的信息，可以帮助视力障碍者通过读屏软件了解网页的结构，并灵敏到达必要的部门。
然而正如并非所有的读屏软件都支持HTML5 Landmark一样，并非所有视力障碍者都了解landmark的概念并知道怎样利用landmark。因此提供传统的跳转链接来跳过导航直接跳转到内容仍旧是有须要的。

以上就是浅析HTML5 Landmark的详细内容，更多关于HTML5 Landmark的资料请关注脚本之家其它相关文章！