无障碍设计

无障碍设计是指产品, 设备, 服务, 或者环境是为残疾人士设计的。无障碍设计的概念意味着与一个人的辅助技术(例如, 电脑屏幕阅读器)相兼容, 确保直接访问(即独立)和"间接访问"。

无障碍设计可以理解为 "能够访问", 并对一个系统或实体是有利的, 其侧重于使身体残障, 或有特殊需要, 或要依赖辅助技术的人群能够访问 Web。然后, 研究和开发无障碍设计对每个人都带来了好处。

无障碍设计不应该和可用性混淆。 大多数情况下, 可用性是指产品(如: 设备, 服务, 或者环境)能在特定的环境下被特定的用户使用, 来高效地实现制定目标。

无障碍设计和通用性设计是息息相关的。通用型设计是指产品的创造过程中, 产品对人们是可用的, 并尽可能最大范围覆盖各能力范围内的人群和各种情形下的操作, 即对所有人是可访问的(无论他们访问 Web 是否有障碍)。

富互联网应用

开发人员使用HTML、CSS和JavaScript创建富互联网应用程序时，往往把残疾人士抛在脑后，因为这些应用程序无法提供被辅助技术理解所需的语义信息。可悲的是，直到现在这种情况并没有多少改变，其实我们可以扭转这种局面。WAI-ARIA能够提供足够的语义，以确保富互联网应用是可以理解的，并且现在已经得到相对较好的支持。

ARIA是什么？

ARIA是“**Accessible Rich Internet Applications **”的缩写。它是W3C的Web无障碍推进组织(Web Accessibility Initiative / WAI)在2014年3月20日发布的可访问富互联网应用实现指南。

WAI-ARIA是一个为残疾人士等提供无障碍访问动态、可交互Web内容的技术规范。在WAI-ARIA概述中对WAI-ARIA及其他支持文档进行了介绍。

简单点描述：

• ARIA是W3C的一个独立规范，帮助Web应用程序和Web页面变得更具可访问性
• ARIA主要是为了提升网页的可用性，网页对残疾人士的无障碍化
• HTML5已经开始使用ARIA，并且W3C发布的很多其他标准也开始使用ARIA
• ARIA 是对 HTML 语义化的补充。它具备比现有的 HTML 元素和属性更完善的表达能力，并让你页面中元素的关系和含义更明确
• ARIA 规范为浏览器和解析 HTML 文档的辅助性技术提供了一种可以让人们以多种方式访问和使用 Web 的标准方法

如何使用ARIA?

应用于HTML的ARIA有两部分组成：**role**（角色）和带**aria-**前缀的属性，其作用：

• role(角色)标识了一个元素的作用
• aria-属性描述了与之有关的事物（特征）及其是什么样的（状态）

HTML中的ARIA

ARIA在HTML中使用有其自己的规范，并不是说在HTML中使用了ARIA，Web页面就无障碍化了，就提高了可访问性了。言外之意，ARIA没有用好，反而会把你带到另一个坑中，使用你的页面可访问性更差。

有关于HTML中ARIA的文档可以点击这里阅读。

ARIA在HTML中的使用

ARIA使用规则一

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

那么什么时候可用和不可用ARIA呢？

• 在HTML(HTML5)元素特性不管支持或不支持，只要不具语义化，就可以使用ARIA
• 排除视觉设计约束使用一个特定的元素，但不能是样式上所需的元素
• 目前尚不支持的HTML特性

ARIA使用规则二

不改变语义，除非你真的需要使用。例如，开发者想创建一个标题，而且它是一个按钮。

不要这样做：

<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使用规则四

不建议在可获取焦点元素(focusable)使用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 的角色role

下面的表格详细的示意了HTML中元素如何使用ARIA的角色role，以及对应的含意：

role属性值	含义	HTML示意	说明
alert	表示警告	<div class="alert alert-warning" role="alert">...</div>	ajax操作返回错误信息的div标签 如Bootstrap中的Alert组件
dialog	表示Modal弹出窗	<div class="modal" tabindex="-1" role="dialog">...</div>	自定义的弹出框,如Bootstrap中的Modal组件
presentation	表示描述	<h1 role="presentation">text</h1>	删除HTML元素的语义化角色。加上后，可访问树就变成： 【注释一】
application	表示应用	<div class="application" role="application">...</div>	例如自定义的时间选择器
button	表示按钮	<span class="btn" role="button"></span>	使用span元素模拟按钮控件
checkbox	表示复选框	<div class="checkbox" role="checkbox"></div>	使用div模拟复选框
radio	表示单选按钮	<div class="radio" role="radio"></div>	使用div元素模拟单选按钮
combobox	表示表单控件	<input type="text" role="combobox" >	input元素，其type属性值为text、search、telephone、url或e-mail。而且aria-owns属性值设置相同的值作为list属性。另外select元素没有multiple属性或者说size属性值大于1
grid	表示网格	<div aria-readonly="true" role="grid"><table role="presentation"></table></div>	表示网格
gridcell	网格单元格	<tr role="row"><td role="gridcell">Fido</td></tr>	td的祖先元素（或table元素）定义了role="grid"；th（列标题或行标题，并且其祖先元素或table元素定义了role="grid"）
group	表示组合并	<div class="btn-group" role="group" aria-label="First group">...</div>	比如创建按钮组合，如Bootstrap中的Button组合
heading	表示标题	<div class="page-title" role="heading" aria-level="1"></div>	使用div模拟h1
listbox	表示列表框	<ul role="listbox" aria-expanded="true"></ul>	模拟带有multiple属性并且size值大于1的select元素，或者datalist并且aria-multiselectable属性值设置为false。比如使用ul来模拟下拉选择框中的列表项。
menu	表示菜单	<ul role="menu" aria-hidden="true"></ul>
menubar	表示菜单栏	<ul role="menubar"><li role="menuitem"><ul role="menu" aria-hidden="true"></ul></li></ul>
menuitem	表示菜单项	<ul role="menubar"><li role="menuitem"><ul role="menu" aria-hidden="true"></ul></li></ul>
menuitemcheckbox	可复选的菜单项	<ul role="menu" aria-hidden="true"><li role="menuitemcheckbox"></li></ul>
menuitemradio	表示只能单选的菜单项	<ul role="menu" aria-hidden="true"><li role="menuitemradio"></li></ul>
option	表示选项	<ul role="listbox" aria-expanded="true"><li role="option"></li></ul>

上表中并没有列出所有ARIA的角色，当然并不是所有的HTML元素都具有对应的ARIA的role，下表列出了常用的标签元素对应的ARIA的role，仅供参考：