无障碍设计
无障碍设计是指产品, 设备, 服务, 或者环境是为残疾人士设计的。无障碍设计的概念意味着与一个人的辅助技术(例如, 电脑屏幕阅读器)相兼容, 确保直接访问(即独立)和”间接访问”。
无障碍设计可以理解为 “能够访问”, 并对一个系统或实体是有利的, 其侧重于使身体残障, 或有特殊需要, 或要依赖辅助技术的人群能够访问 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使用规则二
不改变语义，除非你真的需要使用。例如，开发者想创建一个标题，而且它是一个按钮。
不要这样做：
|
1 |
<h1 role=button>标题按钮</h1> |
建议这样做：
|
1 |
<h1><button>标题按钮</button></h1> |
或者说，你不使用正确的元素，但你可以这样做：
|
1 |
<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这两规则，会导致一些用户无法获取元素焦点。
不要这样做：
|
1 |
<button role=presentation>按下我，按下我</button> |
也不要这样做：
|
1 |
<button aria-hidden="true">按下我，按下我</button> |
如果说一个交互元素无法看到或者不能与之交互，那么可以尝试使用aria-hidden，例如：
|
1 2 |
button {visibility:hidden} <button aria-hidden="true">按下我，按下我</button> |
如果一个交互元素使用display:none;来隐藏，那么它对应的可访问性也将一并被删除，如此一来，在可交互元素上使用aria-hidden="true"就没有必要了。
ARIA使用规则五
所有交互元素都必须有一个可访问的名称。
当可交互元素的可访问性API的可访问名属性只有一个值时，那么可交互元素就只有一个可访问的名称。
比如下面的示例，input type="text"有一个可见的标签,但它并没有可访问的名称：
|
1 |
user name <input type="text"> |
或者:
|
1 2 |
<label>user name</label> <input type="text" /> |
此时MSAA(Microsoft Active Accessibility )控制器的accName属性是空的：
相比之下，下面示例中input type="text"有一个可见的标签并且包含一个可访问性名称：
|
1 |
<label>user name <input type="text"></label> |
或者：
|
1 |
<label for="uname">user name</label> <input type="text" id="uname"> |
此时MSAA(Microsoft Active Accessibility )控制器的accName属性值是user name：
另外label标签元素是不能被用来给自定义控件提供一个访问性名称，除非label引用了HTML的labelable元素。
另外label标签元素是不能被用来给自定义控件提供一个访问性名称，除非label引用了HTML的labelable元素。
无障碍设计不应该和可用性混淆。 大多数情况下, 可用性是指产品(如: 设备, 服务, 或者环境)能在特定的环境下被特定的用户使用, 来高效地实现制定目标。
无障碍设计和通用性设计是息息相关的。通用型设计是指产品的创造过程中, 产品对人们是可用的, 并尽可能最大范围覆盖各能力范围内的人群和各种情形下的操作, 即对所有人是可访问的(无论他们访问 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使用规则二
不改变语义，除非你真的需要使用。例如，开发者想创建一个标题，而且它是一个按钮。
不要这样做：
|
1 |
<h1 role=button>标题按钮</h1> |
建议这样做：
|
1 |
<h1><button>标题按钮</button></h1> |
或者说，你不使用正确的元素，但你可以这样做：
|
1 |
<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这两规则，会导致一些用户无法获取元素焦点。
不要这样做：
|
1 |
<button role=presentation>按下我，按下我</button> |
也不要这样做：
|
1 |
<button aria-hidden="true">按下我，按下我</button> |
如果说一个交互元素无法看到或者不能与之交互，那么可以尝试使用aria-hidden，例如：
|
1 2 |
button {visibility:hidden} <button aria-hidden="true">按下我，按下我</button> |
如果一个交互元素使用display:none;来隐藏，那么它对应的可访问性也将一并被删除，如此一来，在可交互元素上使用aria-hidden="true"就没有必要了。
ARIA使用规则五
所有交互元素都必须有一个可访问的名称。
当可交互元素的可访问性API的可访问名属性只有一个值时，那么可交互元素就只有一个可访问的名称。
比如下面的示例，input type="text"有一个可见的标签,但它并没有可访问的名称：
|
1 |
user name <input type="text"> |
或者:
|
1 2 |
<label>user name</label> <input type="text" /> |
此时MSAA(Microsoft Active Accessibility )控制器的accName属性是空的：
相比之下，下面示例中input type="text"有一个可见的标签并且包含一个可访问性名称：
|
1 |
<label>user name <input type="text"></label> |
或者：
