无障碍开发（六）之ARIA在HTML中的使用规则

ARIA使用规则一

若是你使用的元素( HTML5 )具备语义化，应该使用这些元素，而不该该从新定义一个添加ARIA的角色、状态或属性的元素。 

浏览器的语义化标签已经默认隐含ARIA语义，像nav,article,button已经隐含ARIA的role="navigation",role="article",role="button"声明。在语义化标签出来以前，常见的元素如<div class="main-navigation" role="navigation">。如今可使用nav

来代替div，并且再也不须要添加role="navigation"。能够到W3C的目录上去查看，哪些元素已经隐含的ARIA属性。

那么何时可用和不可用ARIA呢？

• 在HTML(HTML5)元素特性无论支持或不支持，只要不具语义化，就可使用ARIA

• 排除视觉设计约束使用一个特定的元素，但不能是样式上所需的元素

• 目前尚不支持的HTML特性

ARIA使用规则二

不改变原始的语义，不该该为一个语义化的标签订义不一样的角色，经过添加role去重定义语义化的标签，可是，若是必须重定义，那就使用嵌套HTML元素来替代

例如，开发者想建立一个标题，并且它是一个按钮。

不要这样作：

<h1 role=button>标题按钮</h1>

建议这样作：

<h1><button>标题按钮</button></h1>

或者说，你不使用正确的元素，但你能够这样作：

<h1><span role=button>标题按钮</span></h1>

若是使用一个非交互的元素作为一个交互的元素，那么开发人员必须使用ARIA添加语义和使用适当的脚本增长交互行为。

ARIA使用规则三

全部的ARIA制做控件都必须具备键盘(keyboard)事件。（能得到光标焦点）

若是建立一个组件(widget)，用户能够点击、拖放、滑动或滚动，用户使用键盘能定位到建立好的组件部件上，而且执行相应的操做动做。

例如，若是使用 role=button 必须可以接收到焦点和用户可以使用键盘激活相应动做，好比Win操做系统上的 enter 和iOS系统上的 return 或者键盘的空格键( space )。

总结：屏幕阅读器只能读出能够得到焦点的元素的内容，可是对于aria-live来讲，设置了这个属性的元素，哪怕不能得到焦点，屏幕阅读器也会读

ARIA使用规则四

不建议在可获取焦点的元素上使用ARIA的角色： role=presentation 或 aria-hidden="true" 。 

可获取焦点元素上使用ARIA这两规则，会致使一些用户没法获取元素焦点。

不要这样作：

<button role=presentation>按下我，按下我</button>

也不要这样作：

<button aria-hidden="true">按下我，按下我</button>

若是说一个交互元素没法看到或者不能与之交互，那么能够尝试使用aria-hidden，例如：

button {visibility:hidden}  <button aria-hidden="true">按下我，按下我</button>

若是一个交互元素使用display:none;来隐藏，那么它对应的可访问性也将一并被删除，如此一来，在可交互元素上使用aria-hidden="true"就没有必要了。

实例： 

经过一个示例来看看role="presentation"运用先后对HTML元素可访问树对比。

<table> <tr> <td> <table> <tr> <td> <abbr>API</abbr> </td> </tr> </table> </td> </tr> </table>

在上面的代码上添加role="presentation"：

<table role="presentation"> <tr> <td> <table> <tr> <td> <abbr>API</abbr> </td> </tr> </table> </td> </tr> </table>

 table元素可访问树先后对比示意图以下：

前面也说到过，并非在HTML中添加ARIA角色对屏幕阅读器就是好的，特别是对于一些默认带有交互功能的元素中，添加ARIA就是浪费时间，好比：

<button role="button">按我</button> <h1 role="heading" aria-level="1">标题一</h1>

固然在HTML5的一些特定元素上，ARIA的role和自带的语义化元素是能够重叠的，以下表所示:

假设有一个简单的HTML5页面:

<header role="banner"> <nav role="navigation"> </nav> </header> <main role="main"> </main> <aside class="complementary"> </aside> <footer role="contentinfo"> </footer>

 

若是你不想使用HTML5的元素，可使用div来替代：

<div role="banner"> <div role="navigation"> </div> </div> <div role="main"> </div> <div class="complementary"> </div> <div role="contentinfo"> </div>

 

如图所示：

ARIA使用规则五

全部交互元素都必须有一个可访问的名称。

当可交互元素的可访问性API的可访问名属性只有一个值时，那么可交互元素就只有一个可访问的名称。

好比下面的示例，input type="text"有一个可见的<label>标签,但它并无可访问的名称：

user name <input type="text">

或者:

<label>user name</label> <input type="text" />

此时MSAA(Microsoft Active Accessibility )控制器的accName属性是空的：

相比之下，下面示例中input type="text"有一个可见的<label>标签而且包含一个可访问性名称：

<label>user name <input type="text"></label>

或者：

<label for="uname">user name</label> <input type="text" id="uname">

此时MSAA(Microsoft Active Accessibility )控制器的accName属性值是user name：

另外label标签元素是不能被用来给自定义控件提供一个访问性名称，除非label引用了HTML的labelable元素。

<!-- HTML input element with combox role --> <label> user name <input type="text" role="combobox" > </label>

MSAA(Microsoft Active Accessibility )控制器的accName属性值是user name：

除此以外，使用非HTML labelable元素来模拟控件，无论给其分配什么角色(role)都不会是HTML的labelable元素，好比下面的div元著做权归做者全部。

<!-- HTML div element with combox role --> <label> user name <div role="combobox"></div> </label>

 

MSAA(Microsoft Active Accessibility )控制器的accName属性值是空的:

 

关于 Form

form 元素须要关联一个 label 元素，全部的 button 都已经有了一个隐含的 label，因此再也不须要显示关联。对于 input，select， checkbox， radio, button 则都须要显示一个 label 元素。这样 JAWS 在面对这个表单元素的

时候才能告诉用户这个表单的做用。例以下面的 input， JAWS 会告诉用户这个是须要输入名字的一个输入框。当 label 属性不方便使用的时候，还能够经过 title 属性达到相同的效果，也能够知足 Webking 检查的须要。下面的两种

写法均可以。但前提是 name 不须要被显示出来。当 title 和 label 都设置的时候 title 会被 JAWS 忽略。

<label for="name1">Name:</label> <input name="name" id="name1" size="30" /> 或 <input name=”name” id=”name1” size=”30” title=”name”>

当一个表单元素若是先后都须要描述的时候， label 就显得力不从心了。ARIA 规范的出现解决了这一问题。aria-labelledby 属性能够设置多个值，说明这个表单元素是被那些值所描述的, aria-describedby属性则更详细的扩展

了这个描述。以下图所示：

当 JAWS 把焦点放在 10 上的时候，会告诉用户 10 表示的是 10 分钟刷新一次。对应的 HTML 代码以下所示。aria-required的属性标识这个元素是必须的，JAWS 识别此元素并告知用户必须输入此元素。咱们能够看到中间的 input 

元素被多个元素来描述（aria-labelledby 中的几个 id 值），这样 JAWS 就可以识别这个标签，而且按照这个标签的顺序读出先后的 label， 而且提示用户若是还有更详细的描述以及如何获取这个更详细的描述。当用户须要

时，aria-describedby 所对应的元素信息就会被读出来。加强了视力有障碍人士与普通人了解内容的一致性。

<div> <span id="labelRefresh"> <label for=“refreshTime">Refresh after</label> </span> <input id=“refreshTime" type="text" aria-describedby=“refreshDescriptor" aria-labelledby=" labelRefresh refreshTime refreshUnit" value="10"/> <span id=“refreshUnit"> minutes</span> </div> <div id=“refreshDescriptor">Allows you to specify the number of minutes of refresh time.</div>

ARIA使用规则六

元素只能有一个角色，一个元素不能有多个ARIA角色，role的定义以下：

Main indicator of type. This semantic association allows tools to present and support interaction with the object in a manner that is consistent with user expectations about other objects of that type.

HTML元素不能有两个角色，全部角色都是以这样或那样的方式进行主义化的，就像定义上面说的，一个元素不多是两种类型的对象。你能想象一个元素既是按钮又是标题吗？不可能，二者只能选其一。选择一个能够最能够体现元素功

能的角色。