Question

WAI-ARIA是Web Accessibility Initiative - Accessible Rich Internet Applications的缩写，指无障碍网页应用技术，它主要解决一个问题：让残障人士能无障碍地访问网页上的动态内容。这种技术提供了一种描述自定义组件（网页应用中的动态片段）的角色、状态和属性的方法，这样这些组件就可以被依赖辅助技术的用户找到并加以利用。

例如，屏幕上的一个组件正在显示不断变化的股票价格，如何让访问网页的盲人用户也知道这一点呢？无障碍网页应用技术就在尝试解决这类问题。本书着眼点不在于全面讲解无障碍网页应用技术（想要全面了解，请查看http://www.w3.org/WAI/intro/aria），但我们可以采纳其中一部分容易实施的技术，将其应用到HTML5网站中，以方便残障用户。

如果你接了一个为客户制作网站的任务，除了基本要求之外通常不会给你专门的时间/经费来增加无障碍支持（悲剧的是，无障碍性经常被完全抛诸脑后）。但我们还是可以使用无障碍网页应用技术中的地标角色（landmark role）来修正HTML语义元素的一些明显的不足，从而使支持无障碍网页应用技术的屏幕阅读器可以在不同的页面区块之间轻松跳转。

ARIA的地标角色

在响应式网页设计中实现ARIA的地标角色，跟响应式设计没有什么关系。可是，在某种程度上支持它一下又非常简单（而且不必作任何修改就保证通过HTML5验证），假如为了省那么点事儿，就对从今往后编写的所有HTML5页面持放任态度，似乎也真不值得。好了，不贫了，来看看怎么做吧。

新的HTML5导航区域结构如下：

我们可以让导航区域在支持无障碍网页应用技术的屏幕阅读器上轻松地定位，只需为其追加一个地标角色属性role即可，如下面的代码片段所示：

够简单吧？针对文档结构的各部分分别有如下的地标角色。

application：用来定义用作网页应用的区域。

banner：用来定义一个站点级别（而不是某个特定文档的）的区域。如网站的头部和logo。

complementary：用来定义一个对页面主要区域进行补充说明的区域。在And the winner isn’t...这个网站中，UNSUNG HEROES和OVERHYPED NONSENSE区域就可以定义为complementary。

contentinfo：用来定义与页面主要内容相关的信息区域。例如页脚的网站版权信息区域。

form：你猜都能猜到，定义表单！但注意，如果表单用于搜索，则请使用search来替代。

main：定义页面的主体内容。

navigation：用来定义链向当前文档或相关文档的导航链接。

search：用来定义一个用于搜索的区域。

无障碍网页应用技术进阶

无障碍网页应用技术并非只有地标角色。想要做进阶应用，请参阅完整的角色列表及其简要使用说明：http://www.w3.org/TR/wai-aria/roles#role_definitions。

让我们从头开始，将现在HTML5版的And the winner isn’t...网站标签使用地标角色加以扩展：

使用非可视桌面阅读器（NVDA）免费测试网站可访问性

如果你是在Windows平台上开发且想使用屏幕阅读器测试网站的可访问性，可以免费使用NVDA。软件的官方地址如下：http://www.nvdaproject.org/。

希望本节对无障碍网页应用技术的简要介绍，让你看到了为使用辅助技术的用户提供一定可访问性支持还是很简单的，希望你能在下一个HTML5项目中考虑一下。

为使用了无障碍技术的元素设置样式

和其他属性一样，可以直接使用属性选择器来为其设置样式。如，使用nav[role＝"navigation"] {}可以为导航区域设置样式。