无障碍开发系列之WAI-ARIA

欢迎访文我的博客YangChen’s Blog

趁着今晚有空把我挖的无障碍开发系列这个坑填了。

WAI-ARIA是无障碍开发的一个关键点，它主要解决的就是残障人士无障碍的访问页面的问题。

回到第一篇文章无障碍开发系列之隐藏内容访问里面提到的一些问题，例如：

1. 对于一些模拟标签，例如用a标签写button，如何让读屏器读出这是button而不是链接。
2. 如何让盲人朋友知道焦点所在的区域是导航栏还是表单区域。

这里面主要的用到的就是WAI-ARIA，所以呢，知道有多重要了吧。

什么是WAI-ARIA

引自下百度百科的定义

WAI-ARIA, 是Web Accessibility Initiative - Accessible Rich Internet Applications 的缩写，指无障碍网页应用技术。她主要解决的一个问题：让残障人士能无障碍地访问网页上的动态内容。

值得一提的是ARIA可不是小众，它是W3C的一个标准且一直都在更新，对于IE8+和几乎全部的主流浏览器都做到了良好的支持，而且一些注重体验的网站，对于WAI-ARIA更是普遍。

概括性的描述下就是

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

怎么使用WAI-ARIA

ARIA主要由两部分组成，分别是：

1. role(角色)，标示这个dom元素是做什么用的
2. aria-属性描述了与之有关的事物（特征）及其是什么样的（状态）

举个bootstrap官网的例子吧：

<a class="btn btn-default dropdown-toggle" role="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Dropdown</a>

这是下来菜单的一段局部代码，在这里面我们就能看到aira在里面的应用，例如role="button"代表这个a标签是个按钮，不能当做链接来解读。aria-haspopup="true"这个表示点击这个dom元素后，会出现菜单或者是浮动元素。aria-expanded="true"表示当前元素是展开的。

通过WAI-ARIA的标记，页面的无障碍可访问性就会大大增强，读屏器也能够充分的理解页面想要表达的内容，而且使用起来也很方便。

role属性

role属性	含义	HTML示意
alert	表示警告	<div class=