浅析HTML5 Landmark

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

什么是 Landmark

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

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

如何使用 Landmark

事实上，在HTML5 landmark出现之前，就已经有landmark的概念了。
landmark有以下几种main，navigation，complementary，banner，contentinfo，form，region，search。通过使用<p 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>和<p role="main">是完全等价的。

对于search landmark没有定义专用的HTML标签，通常使用<form role="search">来实现。

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

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

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

在HTML5之前，只能通过role属性来定义landmark，HTML5推出的新标签能够在保持可访问性的情况下简化标记。但并不是每个用户使用的辅助工具都支持最新的标准，因此许多教程