landmark浅析

作为WAI-ARIA中的一个角色，landmark作为页面的路标可以使辅助技术客户端方便快捷的在相应的区域

间进行快速切换，并读出辅助信息。

以NVDA为例子，按D或者shift+D可以顺序或者逆序的在这些标记了landmark的role的元素间切换，比如

下列代码：

<div role="navigation"><!--导航区书签-->

<ul>

<li><a href="#">news</a></li>

<li><a href="#">books</a></li>

</ul>

</div>

会读成：导航区书签，列表有二个项目，链接news，链接books，推出列表。

landmark有8个值，在NVDA除了application和form没有读出辅助信息，其余6个值对应辅助信息如下(xp

ie7环境/7 ie9环境)：

banner：横幅区书签

navigation：导航区书签

search：搜索区书签

main：工作区书签/主内容区书签

complementary：补充区书签/补充内容区书签

contentinfo：内容信息书签

遇到的问题：

1.最开始看到contentinfo的时候，下意识认为是标注给文章的，其实是应该标注给版权和隐私信息区

域。

2.如果一个页面里有多个role="navigation"的话，可使用arai-labelledby来进行关联。推荐的导航标准结构是：

<h2>主导航</h2>

<ul>

<li><a></a></li>

...

<li><a></a></li>

</ul>

那么添加role和arai-labelledby之后的样子应该是：

<h2 id="mainNav">主导航</h2>

<ul role="navigation" aria-labelledby="mainNav">

<li><a></a></li>

...

<li><a></a></li>

</ul>

<h2 id="subNav">副导航</h2>

<ul role="navigation" aria-labelledby="subNav">

<li><a></a></li>

...

<li><a></a></li>

</ul>

3.如果一个表单里只有跟搜索相关的东西，那么这个表单的role设置为search要好与设置为form。

4.complementary和main的层级关系，原文如下：A supporting section of the document, designed to be complementary to the main content at a similar level in the DOM hierarchy, but remains meaningful when separated from the main content.有上下文中对此层级的描述并没有涉及到SHOULD和MUST等关键词，所以如果可以的话尽量保证一个平行的兄弟层级关系，如果不能的话，也不必纠结。

读屏软件支持情况：

国内，不支持，本地测试环境：争渡公益，永德6.3，另外争渡团队成员也告诉我永德最新版也不支持。

国外，支持，本地测试环境：NVDA

landmark算是成本最小见效最快的一种无障碍的优化方式了，据悉争渡下个版本也要开始支持landmark了。