《移动网页设计与开发 HTML5+CSS3+JavaScript》—— 2.2　网页易读性倡议的无障碍的富因特网应用程序组件（WAI-ARIA）...

本节书摘来异步社区《移动网页设计与开发 HTML5+CSS3+JavaScript》一书中的第2章，第2.2节，作者：【英】Peter Gasston，更多章节内容可以访问云栖社区“异步社区”公众号查看。

2.2　网页易读性倡议的无障碍的富因特网应用程序组件（WAI-ARIA）

创建网页易读性倡议的无障碍的富因特网应用程序（Accessible Rich Internet Applications）组件（WAI-ARIA）的目的，就是为了解决可访问性的短缺。随着网络超越简单的文档标记，进入一个应用和交互的时代，可访问性短缺就产生了。

下面，我们来看看WAI-ARIA是如何做到这一点的。首先，创建一些HTML扩展（或者，事实上任何基于DOM语言的扩展都可以，例如SVG和XML的扩展）；其次，允许开发人员开发能识别交互式内容的浏览器和辅助技术。例如，如果有一个链接，单击它时，就会使用JavaScript创建一个屏幕上的对话框叠加，但没有办法让浏览器识别它；这个标记看起来就像一个标准的链接：

因为事件附加在使用脚本的链接上，所以，对于这里发生的事件，屏幕阅读设备没有任何信息，也就不能告诉用户事件的来龙去脉，用户对该事件仍然一无所知。WAI- ARIA引入一个新属性—aria-haspopup，只要出现上述的情况，它就会告诉用户到底发生了什么：

用户可以使用一系列的新属性，其中之一，就是所谓的landmark role。这些属性能使得屏幕阅读器和其他可访问导航设备能识别页面结构，这样的话，用户就可以轻松地找到文档。在某种程度上，这种解决方案履行了结构职责，而结构职责，本应是新创造的HTML5元素所应该履行的。

注释：
如前所述，眼下，一些用户代理和辅助技术不能正确解析新HTML5文档大纲，所以，使用landmark role可能会对提高向后兼容性有所帮助。
landmark role的应用使用了具有一系列预先定义值的role属性。这些值并不直接对应HTML5的结构元素，但它们大多都非常的相配。比方说，如果想要定义包含网站一般信息的文档区域，例如标识和品牌标语，则需添加banner：

banner大致类似于header元素，并且在大多数情况下，可以用它来代替header元素。

一些landmark role在HTML5中并没有对应物。在HTML5中，没有合适的元素来指明网页的主要内容在哪里，所以，要想让屏幕阅读器知道关键内容的位置，我们可以使用main：

WAI-ARIA规范所定义的8个landmark role：

application　显示页面的一个区域，这个页面是一个交互式应用程序，而不是一个文档。

banner　正如前面提到的，说明一般的网站内容，可能包含在标头中；在这种情况下，类似于header元素。

complementary　显示主要内容的相关内容，而不是主要内容的组成部分，像一个侧边栏；它类似于aside元素。

contentinfo　提供法律指令等文档信息。通常位于页脚，所以，在这种情况下类似于footer元素。

form　显示除搜索之外的任何形式，例如，联系人表单。

main　显示文档的核心内容。

navigation　包含导航这些文件或相关文件的链接组，类似于nav。

search　显示专门用来搜索这个网站或其他网站的格式。

landmark role不但可用于导航，而且有助于提供语义值，它还能为CSS制作便捷的样式钩子（hook）。使用确切属性值选择符（Exact Attribute Value Selector），就可以轻松地应用规则，例如，用在页眉中：

这个选择符几乎在所有过去10年的浏览器（我所知道的）中都已经实现，所以，除非使用一个非常旧的或一个非常基本的浏览器，否则确切属性值选择符就是有用—但请注意，复杂选择符可能对页面下载速度有不利的影响。