本节书摘来自异步社区《HTML5开发手册》一书中的第2章，第2.10节,作者： 【美】Chuck Hudson , 【英】Tom Leadbetter 更多章节内容可以访问云栖社区“异步社区”公众号查看。

2.10　中级“菜谱”：在HTML5中使用WAI-ARIA

HTML5开发手册
Web Accessibility Initiatives Accessible Rich Internet Applications（WAI-ARIA）也称作ARIA，是一个旨在提高Web应用和Web页面可访问性的草稿规范。ARIA允许使开发者与内容作者开发能够被辅助技术识别和使用的富Internet应用和内容。通常，辅助技术无法知道一个组件（widget）是什么，组件也一般无法使用键盘访问。同样，试想一下，如果通过Ajax调用更新内容，辅助技术无法知道内容已经更新，因而无法通知用户。虽然这里不会讨论ARIA所能提供的所有解决方案，不过我们会讲解ARIA的Landmark Roles（地标角色）部分，以及如何将这些新角色添加到HTML5文档中。

Landmark Roles是页面中用作导航地标的区域。规范中列出了50多种角色，下面列出了最为常用的角色：

• role=”article”
• role=”banner”
• role=”complementary”
• role=”contentinfo”
• role=”form”
• role=”heading”
• role=”main”
• role=”navigation”
• role=”search”

你可以用如下的方法将它们添加到元素语言中：

这表示该表单（页面中可能存在多个表单）用于搜索。

纵览前面的列表，你可以看到上面一些角色有明显的配对HTML5元素。当你将它们添加到前面章节的主页面结构中，可以得到如图2.8所示的布局。

因为在此元素代码中使用了逻辑结构以及ARIA角色，终有一天辅助技术能够轻松地导航到页面的各个区域。不过，目前很少有屏幕阅读器支持HTML5，更不用说ARIA元素了。

你可以在文档顶部使用跳转链接（skip link），通常会使用CSS隐藏这些链接。这些链接允许使用屏幕阅读器、键盘或其他辅助技术的用户快速地“跳过”或“跳转”到重要的区域。这些区域通常是主导航或主页面内容。代码类似如下：

借助ARIA，“地标”会对用户高亮显示，以方便他们在这些选项之间循环。

HTML5验证接受ARIA角色。你也可以在HTML 4中使用ARIA角色，不过会造成验证错误。

这些角色同时还为你提供了巧妙的CSS“钩子”，方便你将它们加入选择器（selector）中。页面中可能有多个header或多个footer，但如果你想为主页面header和footer设置不同的样式，那么你可以在CSS中这样选择它们：

尽管没有必要这样使用CSS，但至少提供了一种备选方案。