<p class="zw">WAI-ARIA包括一组导航特性，帮助残障人士识别网页和Web应用程序的公共区域，并使用辅助技术为他们导航。这些特性可以结合HTML元素使用，从而最大限度地发挥其语义。</p> <p class="zw">我们将介绍几个具体的WAI-ARIA特性，它们可以依赖很少的<code>class</code>和<code>id</code>来包装HTML，从而让HTML和CSS更加炫酷。这些WAI-ARIA特性包括<code>banner</code>、<code>complementary</code>、<code>contentinfo</code>、<code>main</code>、<code>navigation</code>和<code>search</code>。要使用WAI-ARIA的特性，只需要在任何适当的元素上添加<code>role</code>属性。例如，当我们想在某个区域展示品牌或横幅广告，应用<code>banner</code>特性即可。</p> <h3 class="sigil_not_in_toc" id="nav_point_153">banner特性</h3> <p class="zw">在HTML中，<code>header</code>元素可以用于展示品牌或横幅广告，它通常出现在页面的顶部。WAI-ARIA的<code>banner</code>特性可以帮助使用辅助技术的用户辨识出这个特殊的<code>header</code>区域，以和页面中的其他区域区分。</p> <pre class="代码无行号"><code><header role="banner"> <h1>It's Hardboiled</h1> </header></code></pre> <p class="zw">需要区分的是，普通<code>header</code>元素可以根据需要在<code>section</code>和<code>article</code>元素中使用多次，而带有值为<code>banner</code>的<code>role</code>属性的<code>header</code>元素只能使用一次。</p> <h3 class="sigil_not_in_toc" id="nav_point_154">complementary特性</h3> <p class="zw">WAI-ARIA的<code>complementary</code>特性在功能上与HTML的<code>aside</code>元素类似。虽然它不必包含任何内容，或者直观地链接到该内容区域，但它是用来描述与页面相关的内容，并对其他内容提供支持。例如，假设我们写一篇关于侦探小说作家Mickey Spillane的文章，我们可以在有关他的名著《My Gun Is Quick》的<code>aside</code>元素上应用<code>complementary</code>特性。</p> <pre class="代码无行号"><code><aside role="complementary">
