WAI-ARIA无障碍网页资料
一、ARIA是啥？
WAI-ARIA指无障碍网页应用。主要针对的是视觉缺陷，失聪，行动不便的残疾人以及假装残疾的测试人员。尤其像盲人，眼睛看不到，其浏览网页则需要借助辅助设备，如屏幕阅读器，屏幕阅读机可以大声朗读或者输出盲文。而ARIA就是可以让屏幕阅读器准确识别网页中的内容，变化，状态的技术规范，可以让盲人这类用户也能无障碍阅读！
虽然HTML5的出现大大增强了网页的可访问性和无障碍阅读，但是，其不是万能的，例如无法让盲人知道模拟控件的类型等。所以ARIA才显得更加重要。
其次，ARIA规范一直在更新维护，浏览器方面IE8+以及其他所有现代浏览器都都已支持ARIA, 几乎可以说是全方位支持。流行的JavaScript库jQuery, 以及衍生的jQuery Mobile早已支持了ARIA，国内知名JavaScript库kissy也在11年支持了ARIA并在实际项目中使用了。
二、实际应用的例子
本例来自淘宝首页，示例对象见下截图（淘宝网右上角选项卡）：
大家主要到这个部分的地方，F12开启开发人员模式，可以发现，后台有一行代码，如下：
这个就是ARIA在现实应用的例子。
三、属性
以下是整理后的：ARIA属性值表、ARIA属性表、ARIA状态属性表。
（1）、 ARIA属性表：
ARIA Roles值示意及说明表
| role属性值 | 含义 | HTML示意 | 说明 |
| alert | 警告 |  alert 例子代码 | 例如ajax操作返回错误信息的div标签。 |
| alertdialog | 表示警告弹出框 | alertdialog例子代码 |  |
| application | 表示应用 | application例子代码 | 例如自定义的时间选择器。 |
| button | 表示按钮 | button例子代码 | 就是一个button |
| checkbox | 表示复选框 | View Code |  |
| combobox | 表示下拉列表框 | View Code |  |
| grid | 表示网格 | View Code |  |
| gridcell | 表示网格单元 | View Code | 类似于table & table-cell |
| group | 表示组合并 | View Code |  |
| heading | 表示应用程序标题头 | View Code |  |
| listbox | 表示列表框 | View Code |  |
| log | 表示日志记录 | View Code | 类似三国杀右侧记录战事区域；或是比赛文字直播记录区域 |
| menu | 表示菜单 | View Code |  |
| menubar | 表示菜单栏 | View Code |  |
| menuitem | 表示菜单项 | View Code |  |
| menuitemcheckbox | 表示可复选的菜单项 | View Code |  |
| menuitemradio | 表示只能单选的菜单项 | View Code |  |
| option | 表示选项 | View Code |  |
| presentation | 表示称述 | View Code |  |
| progressbar | 表示进度条 | View Code |  |
| radio | 表示单选 | View Code |  |
| radiogroup | 表示单选组 | View Code |  |
| region | 表示区域 | View Code |  |
| row | 表示行 | View Code | 用在表格模拟的行列表上，对应table下面的tr标签。 |
| separator | 表示分隔 | View Code |  |
| slider | 表示滑动条 | View Code |  |
| spinbutton | 表示微调 | View Code |  |
| tab | 表示标签 | View Code |  |
| tablist | 表示标签列表 | View Code |  |
| tabpanel | 表示标签面板 | View Code |  |
| timer | 表示计数 | View Code | 模拟计数器，使用在动态显示规律数值变化的地方 |
| toolbar | 表示工具栏 | View Code | 左边HTML表示一个剪切，复制，粘贴三功能在一起的工具栏。 |
| tooltip | 表示提示文本 | View Code |  |
| tree | 表示树形 | View Code | 效果见下面treeitem中的图。 |
| treeitem | 表示树结构选项 | View Code | 
|
（2）、 ARIA属性值：
ARIA 属性值示意及说明表
| 属性名 | 属性值 | HTML代码示例 | 说明 | |
| aria-activedescendant | 字符串。表示后代元素的id值。 | View Code | aria-activedescendant 属性定义了当 工具栏获取焦点时，哪一个工具栏的子控 件获取了焦点。在此HTML示例中，工具 栏的第一个控件（拥有 能获取焦点的子控件。 | |
| aria-atomic | 字符串。表示区域内容是否完整 播报。值可以为 为 整个区域内容都通报给使用者； 如果为 修改的部分。 | View Code | 还是这个时间选择器年月标题的例子。这 里的 的时候，这里的年月日期要完整播放，不 要只改了月份就只报月份内容。 | |
| aria-autocomplete | 字符串。表示用户的文本框的 自动提示是否提供。可选值有：
| View Code | 目前，该属性对于 的含义暂不清楚。不过可以确定的是该 属性对应HTML5中 需要注意的是，如果
或 支持
| |
| aria-busy | 字符串。表当前区域的忙碌状 态。默认为 状态；可选为 正在加载；或为 区域验证无效。 | View Code | 如果某个区域内(如这里 方需要修改，需要全部修改完毕再通 知使用者的话，就可以先将 设为 再设成 工具在区域内容更新完毕前不断即 时提醒使用者。 | |
| aria-controls | 字符串。空格分隔的 列表。 | View Code | 该属性定义了元素间不能通过文档 结构决定的关联关系。 属性主要被 或 | |
| aria-describedby | 字符串。空格分隔的 列表。 | View Code | 同样的，该属性定义了文档结构表 现不出来的的元素间的相互关联性。 该属性旨在通过标签提供更多用户 可能需要的信息。如果指定了不只 一个 同创建一条单独的描述。 | |
| aria-dropeffect | 字符串。表示拖拽效果。可选 值有：
示：复制，移动，参照，执行 ，弹出以及没有效果。 | 该属性用在拖拽上。 | ||
| aria-flowto | 字符串。空格分隔的id值们。 | 如果该属性值对应的是单独的 辅助技术会恢复目标元素的阅读； 如果对应的是多个 术会让用户去选择、导航到目标 元素。 | ||
| aria-grabbed | 字符串。拖拽中元素的捕获状 态。可选值有:
表示元素捕获状态未知。
| 该属性用在拖拽上。类似于 HTML5中的 | ||
| aria-haspopup | 字符串。 的时候会出现菜单或是 浮动元素； 没有pop-up效果。 | View Code |  | |
| aria-label | 字符串。 | 定义一个字符串值标记当前元素。 | ||
| aria-labelledby | 字符串。空格分隔的id们 | View Code | 对于的 元素的 | |
| aria-level | 数值。表示等级。 | View Code | 上面的HTML类似于<h2>次标题</h2> | |
| aria-live | 字符串。可选值有： 默认为
要的时候甚至中断用户。 | View Code | 绝大多数的更新应该在用户闲 暇的时候告知，即时提示对用 户是一种干扰。如果希望内容 完全更新后再提示，可以使用 上面提到的 左侧的HTML为时间选择控件 的年月标题部分，
选择了新的时间的时候，尽 快通知用户时间发生了变更。 | |
| aria-multiselectable | 字符串。表示是否可多选。 默认为 能选择一个项。 一次可以选择多个项。 | 例如手风琴展开收起效果， 我们可以使用
知辅助设备，一次可以 展开多个项还是只有一个展开。 | ||
| aria-owns | 字符串。值为目标元素id. | View Code |  | |
| aria-posinset | 数值。表示当前位置 | 用在设置和获取一个集合内某项的当前位置 | ||
| aria-readonly |
| View Code |  | |
| aria-relevant | 字符串。表示区域内哪 些操作行为需要做出反应。 可选值有：
可以空格分隔多个一起 显示. 增节点的时候做出反应；
时重要操作； 文本改变是值得重视的；
面三个属性值。 | View Code | 左边的HTML表示当日志内容有添加的时候做出反应。 | |
| aria-required | 字符串。元素值是否必 需。默认为 元素值可以为空； 表示元素值是必需的。 | View Code | 多半用在表单控件中。对应HTML5中required属性。 | |
| aria-secret | 字符串。表示机密状态。 | 具体含义不详 | ||
| aria-setsize | 数值。设置的尺寸大小值。 | 顾名思意 | ||
| aria-sort |
| Widget组件应用属性。 | ||
| aria-valuemax | 数值。表允许的最大值。 | View Code | 用在范围组件上。对应 于HTML5中的 | |
| aria-valuemin | 数值。表示允许的最小值。 | View Code | 用在范围组件上。对应 于HTML5中的 | |
| aria-valuenow | 数值。表示当前值。 | View Code | 用在范围组件上。对 应于 | |
| aria-valuetext | 字符串。定义等同于
的文本。 | 用在范围组件上。 |
（3）、 ARIA属性值：
ARIA 状态值示意及说明表
| 属性状态 | 属性值 | HTML示意 | 说明 |
| aria-checked | 字符串。表示检查的状态。
择和为选择状态。 | View Code |  该属性用来表明用户是 否选择了某些项（如上边 这个截图所示）。 |
| aria-disabled | 字符串。表禁用状态，
状态； 非激活状态。 | View Code | 对应单复选框等控件的
自定义模拟控件中。 |
| aria-expanded | 字符串。表示展开状态。 默认为 当前展开状态未知。 其它可选值： 表示元素是展开的；
| View Code |  例如在手风琴交互效果中标示展开 与否的状态。该属性对应HTML5 的 |
| aria-hidden | 字符串。可选值为
(不可见)， 可见。 | View Code | 该属性使用非常普遍。几乎所 有涉及到显示与隐藏这类交互 或没有交互的地方都可以应用 该属性。左边的示例HTML代 码来自进度条进度值显示的
表示该进度值是可见的。 |
| aria-invalid | 字符串。表示元素值是否 错误的。默认为 表示是OK的，如果为 则表示值验证不通过。 | View Code | |
| aria-pressed | 字符串。表示按下的状态， 可选值有：
未知； （按钮按下）； 示元素抬起； 元素同时有按下和没有 按下的状态。 | View Code | 左边HTML表示按钮已经按 下，同时处于禁用状态。 |
| aria-selected | 字符串。表示选择状态。 可选值有：
选择状态未知。 表示元素已选择；
| View Code |  |
注意：为了跨浏览器兼容，总是使用WAI-ARIA属性解析来访问和修改ARIA属性，例如object.setAttribute("aria-valuenow", newValue).
四、附录
ARIA属性关系图：
