WAI-ARIA无障碍网页资料

西门小白菜

我很骄傲，因为我是小白菜一枚！

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	警告		例如ajax操作返回错误信息的div标签。
alertdialog	表示警告弹出框
application	表示应用		例如自定义的时间选择器。
button	表示按钮		就是一个button
checkbox	表示复选框
combobox	表示下拉列表框
grid	表示网格
gridcell	表示网格单元		类似于table & table-cell
group	表示组合并
heading	表示应用程序标题头
listbox	表示列表框
log	表示日志记录		类似三国杀右侧记录战事区域；或是比赛文字直播记录区域
menu	表示菜单
menubar	表示菜单栏
menuitem	表示菜单项
menuitemcheckbox	表示可复选的菜单项
menuitemradio	表示只能单选的菜单项
option	表示选项
presentation	表示称述
progressbar	表示进度条
radio	表示单选
radiogroup	表示单选组
region	表示区域
row	表示行		用在表格模拟的行列表上，对应table下面的tr标签。
separator	表示分隔
slider	表示滑动条
spinbutton	表示微调
tab	表示标签
tablist	表示标签列表
tabpanel	表示标签面板
timer	表示计数		模拟计数器，使用在动态显示规律数值变化的地方
toolbar	表示工具栏		左边HTML表示一个剪切，复制，粘贴三功能在一起的工具栏。
tooltip	表示提示文本
tree	表示树形		效果见下面treeitem中的图。
treeitem	表示树结构选项

     

（2）、  ARIA属性值：

                                                                                                        ARIA  属性值示意及说明表

属性名	属性值	HTML代码示例	说明
aria-activedescendant	字符串。表示后代元素的id值。		aria-activedescendant 属性定义了当 工具栏获取焦点时，哪一个工具栏的子控 件获取了焦点。在此HTML示例中，工具 栏的第一个控件（拥有id“button1″）是 能获取焦点的子控件。
aria-atomic	字符串。表示区域内容是否完整 播报。值可以为true和false。当 为true时，表示辅助设备需要把 整个区域内容都通报给使用者； 如果为false则表示只需要通报 修改的部分。		还是这个时间选择器年月标题的例子。这 里的aria-atomic为true则表示当时间改变 的时候，这里的年月日期要完整播放，不 要只改了月份就只报月份内容。
aria-autocomplete	字符串。表示用户的文本框的 自动提示是否提供。可选值有： inline, list, both, none.		目前，该属性对于inline和list两个值 的含义暂不清楚。不过可以确定的是该 属性对应HTML5中autocomplete属性。 需要注意的是，如果aria-autocomplete ="list", aria-autocomplete="inline" 或aria-autocomplete="both"被设置在 支持autocomplete的元素上，则 autocomplete的属性值需要设成 "on", 如果是aria-autocomplete ="none"，则需要设成"off"
aria-busy	字符串。表当前区域的忙碌状 态。默认为false, 表清除busy 状态；可选为true, 表该区域 正在加载；或为error, 表示该 区域验证无效。		如果某个区域内(如这里ul)有多个地 方需要修改，需要全部修改完毕再通 知使用者的话，就可以先将aria-busy 设为true, 等到全部内容更新完毕后 再设成false. 该属性可以避免辅助 工具在区域内容更新完毕前不断即 时提醒使用者。
aria-controls	字符串。空格分隔的id属性值 列表。		该属性定义了元素间不能通过文档 结构决定的关联关系。ariaControls 属性主要被role为group, region, 或widget的元素使用
aria-describedby	字符串。空格分隔的id属性值 列表。		同样的，该属性定义了文档结构表 现不出来的的元素间的相互关联性。 该属性旨在通过标签提供更多用户 可能需要的信息。如果指定了不只 一个id, 所有元素会合并在一起共 同创建一条单独的描述。
aria-dropeffect	字符串。表示拖拽效果。可选 值有：copy, move, reference,  execute, popup, none, 依次表 示：复制，移动，参照，执行 ，弹出以及没有效果。		该属性用在拖拽上。
aria-flowto	字符串。空格分隔的id值们。		如果该属性值对应的是单独的id, 辅助技术会恢复目标元素的阅读； 如果对应的是多个id, 则辅助技 术会让用户去选择、导航到目标 元素。
aria-grabbed	字符串。拖拽中元素的捕获状 态。可选值有:true, false,  undefined. 默认为undefined， 表示元素捕获状态未知。 true表示元素可以捕获； false表示不能被捕获。		该属性用在拖拽上。类似于 HTML5中的draggable属性。
aria-haspopup	字符串。true表示点击 的时候会出现菜单或是 浮动元素； false表示 没有pop-up效果。
aria-label	字符串。		定义一个字符串值标记当前元素。
aria-labelledby	字符串。空格分隔的id们		aria-labelledby一般用在区域元素上， 对于的id一般为对应的标题或是标签 元素的id.关系型属性。
aria-level	数值。表示等级。		上面的HTML类似于<h2>次标题</h2>
aria-live	字符串。可选值有：off,  polite, assertive, rude。 默认为off, 表示不宣布更新； polite表示只有用户闲时宣布； assertive表示尽快对用户宣布； rude表示即时提醒用户，必 要的时候甚至中断用户。		绝大多数的更新应该在用户闲 暇的时候告知，即时提示对用 户是一种干扰。如果希望内容 完全更新后再提示，可以使用 上面提到的aria-busy. 左侧的HTML为时间选择控件 的年月标题部分，aria-live= "assertive"表示的是当用户 选择了新的时间的时候，尽 快通知用户时间发生了变更。
aria-multiselectable	字符串。表示是否可多选。 默认为false, 表示一次只 能选择一个项。true表示 一次可以选择多个项。		例如手风琴展开收起效果， 我们可以使用aria- multiselectable来告 知辅助设备，一次可以 展开多个项还是只有一个展开。
aria-owns	字符串。值为目标元素id.
aria-posinset	数值。表示当前位置		用在设置和获取一个集合内某项的当前位置
aria-readonly	字符串。表示是否只读。 默认为false, 表示元素 值可以被修改；true 表示元素指不能被改变。
aria-relevant	字符串。表示区域内哪 些操作行为需要做出反应。 可选值有：additions,  removals, text, all， 可以空格分隔多个一起 显示. additions表示新 增节点的时候做出反应； removals表示删除节点 时重要操作；text表示 文本改变是值得重视的； all等同于同时使用上 面三个属性值。		左边的HTML表示当日志内容有添加的时候做出反应。
aria-required	字符串。元素值是否必 需。默认为false, 表示 元素值可以为空；true 表示元素值是必需的。		多半用在表单控件中。对应HTML5中required属性。
aria-secret	字符串。表示机密状态。		具体含义不详
aria-setsize	数值。设置的尺寸大小值。		顾名思意
aria-sort	字符串。表示表格或格 栅中的项是以升序排列 还是降序排列。可选值： ascending(↑), descending(↓), none,  other.		Widget组件应用属性。
aria-valuemax	数值。表允许的最大值。		用在范围组件上。对应 于HTML5中的max属性。
aria-valuemin	数值。表示允许的最小值。		用在范围组件上。对应 于HTML5中的min属性。
aria-valuenow	数值。表示当前值。		用在范围组件上。对 应于value属性。
aria-valuetext	字符串。定义等同于 aria-valuenow人可读 的文本。		用在范围组件上。

      

 

（3）、  ARIA属性值：

                                                                                                        ARIA  状态值示意及说明表

属性状态	属性值	HTML示意	说明
aria-checked	字符串。表示检查的状态。 true表示元素被选择； false表示元素未被选择； mixed表示元素同时有选 择和为选择状态。		该属性用来表明用户是 否选择了某些项（如上边 这个截图所示）。
aria-disabled	字符串。表禁用状态， true表示当前是非激活 状态；false表示清除 非激活状态。		对应单复选框等控件的 disabled属性，一般用在 自定义模拟控件中。
aria-expanded	字符串。表示展开状态。 默认为undefined, 表示 当前展开状态未知。 其它可选值：true 表示元素是展开的； false表示元素不是展开的。		例如在手风琴交互效果中标示展开 与否的状态。该属性对应HTML5 的open属性。
aria-hidden	字符串。可选值为true和 false, true表示元素隐藏 (不可见)，false表示元素 可见。		该属性使用非常普遍。几乎所 有涉及到显示与隐藏这类交互 或没有交互的地方都可以应用 该属性。左边的示例HTML代 码来自进度条进度值显示的 div, 当前aria-hidden为false, 表示该进度值是可见的。
aria-invalid	字符串。表示元素值是否 错误的。默认为false, 表示是OK的，如果为true, 则表示值验证不通过。
aria-pressed	字符串。表示按下的状态， 可选值有：true, false,  mixed, undfined.默认为 undfined, 表示按下状态 未知；true表示元素往下 （按钮按下）；false表 示元素抬起；mixed表示 元素同时有按下和没有 按下的状态。		左边HTML表示按钮已经按 下，同时处于禁用状态。
aria-selected	字符串。表示选择状态。 可选值有：true, false,  undefined. 默认为 undefined，表示元素 选择状态未知。true 表示元素已选择； false表示未被选中。

                    注意：为了跨浏览器兼容，总是使用WAI-ARIA属性解析来访问和修改ARIA属性，例如object.setAttribute("aria-valuenow", newValue).

 四、附录

        ARIA属性关系图：