无障碍设计
无障碍设计是指产品, 设备, 服务, 或者环境是为残疾人士设计的。无障碍设计的概念意味着与一个人的辅助技术(例如, 电脑屏幕阅读器)相兼容, 确保直接访问(即独立)和"间接访问"。
无障碍设计可以理解为 "能够访问", 并对一个系统或实体是有利的, 其侧重于使身体残障, 或有特殊需要, 或要依赖辅助技术的人群能够访问 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使用规则二不改变语义，除非你真的需要使用。例如，开发者想创建一个标题，而且它是一个按钮。
不要这样做：
标题按钮
建议这样做：
标题按钮
或者说，你不使用正确的元素，但你可以这样做：
如果使用一个非交互的元素做为一个交互的元素，那么开发人员必须使用ARIA添加语义和使用适当的脚本增加交互行为。 ARIA使用规则三标题按钮
所有的ARIA制作控件都必须具有键盘(keyboard)事件。
如果创建一个组件(widget)，用户可以点击、拖放、滑动或滚动，用户使用键盘能定位到创建好的组件部件上，并且执行相应的操作动作。
例如，如果使用 role=button 必须能够接收到焦点和用户能够使用键盘激活相应动作，比如Win操作系统上的 enter 和iOS系统上的 return 或者键盘的空格键( space )。
ARIA使用规则四
不建议在可获取焦点元素( focusable )使用ARIA的角色： role=presentation 或 aria-hidden="true" 。
可获取焦点元素上使用ARIA这两规则，会导致一些用户无法获取元素焦点。
不要这样做：
按下我，按下我
也不要这样做：
按下我，按下我
如果说一个交互元素无法看到或者不能与之交互，那么可以尝试使用 aria-hidden ，例如：
button {visibility:hidden} 按下我，按下我 如果一个交互元素使用 display:none; 来隐藏，那么它对应的 可访问性 也将一并被删除，如此一来，在可交互元素上使用 aria-hidden="true" 就没有必要了。 ARIA使用规则五 所有交互元素都必须有一个 可访问的名称 。
当可交互元素的可访问性API的可访问名属性只有一个值时，那么可交互元素就只有一个可访问的名称。
比如下面的示例， input type="text" 有一个可见的 标签,但它并没有可访问的名称：
user name
或者:
user name
此时MSAA( Microsoft Active Accessibility )控制器的 accName 属性是空的：
相比之下，下面示例中 input type="text" 有一个可见的 标签并且包含一个可访问性名称：
user name
或者：
user name
此时MSAA( Microsoft Active Accessibility )控制器的 accName 属性值是 user name ：
另外 label 标签元素是不能被用来给自定义控件提供一个访问性名称，除非 label 引用了HTML的 labelable 元素 。
user name
MSAA( Microsoft Active Accessibility )控制器的 accName 属性值是 user name ：
除此之外，使用非HTML labelable 元素来模拟控件，不管给其分配什么角色( role )都不会是HTML的 labelable 元素，比如下面的 div 元素：
user name
查看更多关于WAI-ARIA无障碍Web规范_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did114550