9-Html5css3专题

第9章　构建无障碍应用

现在，你已经学会了如何使用HTML元素和微格式为Web应用程序添加标记，但你可能没有听说过，还有一个与它们目标不同但互相补充的规范。它就是WAI-ARIA——无障碍网页应用技术。

WAI-ARIA的目的，是让网页内容对残障人士更友好，它包括以下内容。

导航菜单、滑块和进度条等小组件。
定义网页动态更新区块的属性。
启用键盘导航的方法。
描述页面的结构的角色，包括标题、区域和表格（网格）。

这一切听起来很棒。除了为依靠辅助技术的用户提供有价值的帮助之外，Web设计师和开发人员还可以使用WAI-ARIA技术，来减少我们对表现型的 id 和 class 属性的依赖。那么，当我们能用CSS属性选择器来给WAI-ARIA元素绑定样式的时候，为什么还要仅仅为了样式为HTML元素添加 class 名呢？

WAI-ARIA特性简介

WAI-ARIA包括一组导航特性，帮助残障人士识别网页和Web应用程序的公共区域，并使用辅助技术为他们导航。这些特性可以结合HTML元素使用，从而最大限度地发挥其语义。

我们将介绍几个具体的WAI-ARIA特性，它们可以依赖很少的 class 和 id 来包装HTML，从而让HTML和CSS更加炫酷。这些WAI-ARIA特性包括 banner 、 complementary 、 contentinfo 、 main 、 navigation 和 search 。要使用WAI-ARIA的特性，只需要在任何适当的元素上添加 role 属性。例如，当我们想在某个区域展示品牌或横幅广告，应用 banner 特性即可。

banner特性

在HTML中， header 元素可以用于展示品牌或横幅广告，它通常出现在页面的顶部。WAI-ARIA的 banner 特性可以帮助使用辅助技术的用户辨识出这个特殊的 header 区域，以和页面中的其他区域区分。

<header role="banner"> 
<h1>It's Hardboiled</h1> 
</header>

需要区分的是，普通 header 元素可以根据需要在 section 和 article 元素中使用多次，而带有值为 banner 的 role 属性的 header 元素只能使用一次。

complementary特性

WAI-ARIA的 complementary 特性在功能上与HTML的 aside 元素类似。虽然它不必包含任何内容，或者直观地链接到该内容区域，但它是用来描述与页面相关的内容，并对其他内容提供支持。例如，假设我们写一篇关于侦探小说作家Mickey Spillane的文章，我们可以在有关他的名著《My Gun Is Quick》的 aside 元素上应用 complementary 特性。

<aside role="complementary"> 
   <h2>My Gun Is Quick</h2> 
   <p>Mickey Spillane's second novel featuring private
investigator Mike Hammer.</p> 
</aside>

contentinfo特性

WAI-ARIA将 contentinfo 特性定义为“包含有关父文档信息的可感知区域”，是不是听起来很像HTML的 footer 元素？我也这么认为。让我们为主页面的 footer 元素添加 contentinfo 特性，继续构建Get Hardboiled网站的存档页。

<footer role="contentinfo"> 
   <h3>It's Hardboiled</h3> 
   <p>Hardboiled Web Design, designed by Andy Clarke.</p> 
</footer>

正如 banner 特性一样，与HTML中的普通 footer 元素不同，我们只能在页面中使用一次带有 contentinfo 属性的 footer 元素。

main特性

跳转到内容的链接是最常用的网络无障碍技术之一，旨在帮助依靠辅助技术的人跳过啰嗦的导航区域。WAI-ARIA的 main 特性的主要作用是消除对跳转链接的需求，因为它可以帮助依赖辅助技术的用户直接导航至某个页面的主要内容区域。

在哪里添加 main 特性完全取决于内容，在我们正在构建的Get Hardboiled网站存档页上，我们可以选择将它添加到包含最新、最重要的新闻的 section 元素上。

<section id="content__uk"> […] </section> 
<section id="content__usa" role="main"> […] </section> 
<section id="content__world"> […] </section>

如果开发一个只包含单一主题的页面，我们应该把 main 属性添加 article 元素上。

<article role="main"> 
   <header> 
      <h1>Mickey Spillane</h1> 
   </header> 
   <p>Frank Morrison Spillane, better known as Mickey Spillane,
was an author of crime novels, many featuring his detective character
Mike Hammer. More than 225 million copies of his books have
been sold internationally, including my personal favourite, 'My
Gun Is Quick'.</p> 
</article>

navigation特性

WAI-ARIA的 navigation 特性在功能上类似HTML中的 nav 元素，它的作用是用来描述页面或Web应用程序中的主要导航模块。尽管 navigation 和 nav 元素的目的都是提供尽可能广泛的支持，但我们还是要使用 navigation 特性。

<nav role="navigation"> 
   <ul> 
      <li><a href="about.html">What's Hardboiled?</a></li> 
      <li><a href="archives.html">Archives</a></li> 
      <li><a href="authors.html">Authors</a></li> 
      <li><a href="Classics.html">Classics</a></li> 
   </ul> 
</nav>

search特性

在许多网站上，搜索是人们定位内容的主要方式。因此在HTML中，在 nav 元素中嵌入搜索框是完全可以接受的做法，但对于添加了 navigation 属性的 nav 元素就不是这样了。

WAI-ARIA的 search 特性描述了一个完整的搜索界面——包括标签、输入框、按钮和其他HTML元素。过去，当我们想给搜索表单元素设置样式的时候，我们会给它一个唯一的 id 或者一个 class 属性。现在，我们可以不再添加表现型的属性，而是使用WAI-ARIA的 search 特性和CSS属性选择器来代替。

<form method="post" action="search.html" role="search"> 
   <fieldset> 
      <input type="search" title="Search this site"> 
      <button type="submit">Go</button> 
   </fieldset> 
</form>

打破传统

可访问性不仅对那些依靠屏幕阅读器和其他辅助技术的用户很重要，对我们工作的完整性而言也同样重要。WAI-ARIA的特性只是我们提高网页可访问性的途径之一。

不仅如此。像微格式一样，HTML中的WAI-ARIA特性使我们能够减少对表现型元素和属性的依赖，把网页中的标记从单一的设计中解放出来。用WAI-ARIA特性来代替仅仅提供样式辅助的属性，并结合CSS样式，会使文档变得更加灵活，网页和应用在不同浏览器和设备中也可以获得更好的渲染。