无障碍开发（六）之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使用规则四

不建议在可获取焦点的元素上使用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"就没有必要了。

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属性值是空的:

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元素不能有两个角色，所有角色都是以这样或那样的方式进行主义化的，就像定义上面说的，一个元素不可能是两种类型的对象。你能想象一个元素既是按钮又是标题吗？不可能，两者只能选其一。选择一个可以最可以体现元素功

能的角色。

转载于:https://www.cnblogs.com/kunmomo/p/11569692.html