一、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

警告

1

alert 例子代码

例如ajax操作返回错误信息的div标签。

alertdialog

表示警告弹出框

1

alertdialog例子代码

 application

 表示应用

1

application例子代码

 例如自定义的时间选择器。

button

表示按钮

1

button例子代码

就是一个button

checkbox

表示复选框

1

2
• 所有姑娘
3
• 晴川
4
• 静秋
5
• 黄小仙
6

 combobox

 表示下拉列表框

1
3
4

5
• 晴川
6
• 静秋
7
• 黄小仙
8

 

grid

表示网格

1

2 3 4 5 6 7 8 9 10 11

美女们

晴川	静秋	黄小仙

 gridcell

 表示网格单元

1

2 3 4 5 6 7

晴川

静秋

黄小仙

 类似于table & table-cell

group

表示组合并

1

2
• 所有姑娘
3
• 晴川
4
• 静秋
5
• 黄小仙
6

 heading

 表示应用程序标题头

1

 

 listbox

 表示列表框

1
3
4

5
• 晴川
6
• 静秋
7
• 黄小仙
8

 

log

表示日志记录

1

类似三国杀右侧记录战事区域；或是比赛文字直播记录区域

menu

表示菜单

1

2
• 美女 3
  4
  • 晴川
  5
  • 静秋
  6
  • 黄小仙
  7
  
  8

9
• 靓女

10
• 淑女

11
• 熟女

12

 

 menubar

 表示菜单栏

1

2
• 美女 3
  4
  • 晴川
  5
  • 静秋
  6
  • 黄小仙
  7
  
  8

9
• 靓女

10
• 淑女

11
• 熟女

12

 

 menuitem

 表示菜单项

1

2
• 美女 3
  4
  • 晴川
  5
  • 静秋
  6
  • 黄小仙
  7
  
  8

9
• 靓女

10
• 淑女

11
• 熟女

12

 

menuitemcheckbox

表示可复选的菜单项

1

2
• 美女 3
  4
  • 晴川
  5
  • 静秋
  6
  • 黄小仙
  7
  
  8

9
• 靓女

10
• 淑女

11
• 熟女

12

 menuitemradio

 表示只能单选的菜单项

1

2
• 美女 3
  4
  • 晴川
  5
  • 静秋
  6
  • 黄小仙
  7
  
  8

9
• 靓女

10
• 淑女

11
• 熟女

12

 

option

表示选项

1
3
4

5
• 晴川
6
• 静秋
7
• 黄小仙
8

 presentation

 表示称述

1

 

 progressbar

 表示进度条

1

 

radio

表示单选

1

美女们：

2

3
• 4 晴川 5
6
• 7 静秋 8
9
• 10 黄小仙 11
12

 radiogroup

 表示单选组

1 nchecked.gif" /> 晴川
2
3

4 静秋 5

6

7 黄小仙 8

9

 

 region

 表示区域

1

 

 row

 表示行

1

2 3 4 5 6 7

晴川

静秋

黄小仙

 用在表格模拟的行列表上，对应table下面的tr标签。

separator

表示分隔

1

2
• 美女 3
  4
  • 晴川
  5
  6
  • 静秋
  7
  • 黄小仙
  8
  
  9

10
• 靓女

11
• 淑女

12
• 熟女

13

 slider

 表示滑动条

1

 

 spinbutton

 表示微调

1

 

 tab

 表示标签

1

 

 tablist

 表示标签列表

1

 

tabpanel

表示标签面板

1

 timer

 表示计数

1

 模拟计数器，使用在动态显示规律数值变化的地方

 toolbar

 表示工具栏

1

 左边HTML表示一个剪切，复制，粘贴三功能在一起的工具栏。

 tooltip

 表示提示文本

1

 

tree

表示树形

1

2
• 3 美女 4
  
  5

6
• 7 淑女 8
  9

10

效果见下面treeitem中的图。

treeitem

表示树结构选项

1

2
• 3 美女 4
  5
  • 晴川
  6
  • 静秋
  7
  • 黄小仙
  8
  
  9

10
• 11 淑女 12
  13

14

（2）、  ARIA属性值：

ARIA  属性值示意及说明表

属性名

属性值

HTML代码示例

说明

 aria-activedescendant

 字符串。表示后代元素的id值。

1

aria-activedescendant 属性定义了当

工具栏获取焦点时，哪一个工具栏的子控

件获取了焦点。在此HTML示例中，工具

栏的第一个控件（拥有id“button1″）是

能获取焦点的子控件。

 aria-atomic

字符串。表示区域内容是否完整

播报。值可以为true和false。当

为true时，表示辅助设备需要把

整个区域内容都通报给使用者；

如果为false则表示只需要通报

修改的部分。

1

还是这个时间选择器年月标题的例子。这

里的aria-atomic为true则表示当时间改变

的时候，这里的年月日期要完整播放，不

要只改了月份就只报月份内容。

 aria-autocomplete

字符串。表示用户的文本框的

自动提示是否提供。可选值有：

inline, list, both, none.

1
3
4

5
• 晴川
6
• 静秋
7
• 黄小仙
8

目前，该属性对于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, 表示该

区域验证无效。

1

如果某个区域内(如这里ul)有多个地

方需要修改，需要全部修改完毕再通

知使用者的话，就可以先将aria-busy

设为true, 等到全部内容更新完毕后

再设成false. 该属性可以避免辅助

工具在区域内容更新完毕前不断即

时提醒使用者。

aria-controls

字符串。空格分隔的id属性值

列表。

1

姑娘们


3
4
5
请选择你中意的美女……
6

该属性定义了元素间不能通过文档

结构决定的关联关系。ariaControls

属性主要被role为group, region,

或widget的元素使用

aria-describedby

字符串。空格分隔的id属性值

列表。

1

2
• 所有姑娘
3
• 晴川
5

6

杨幂饰演的穿越女王~~

同样的，该属性定义了文档结构表

现不出来的的元素间的相互关联性。

该属性旨在通过标签提供更多用户

可能需要的信息。如果指定了不只

一个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效果。

1

2
• 3 美女
  4
  • 晴川
  5
  • 静秋
  6
  • 黄小仙
  7
  
  8

9
• 靓女

10
• 淑女

11
• 熟女

12

 

 aria-label

 字符串。

 

 定义一个字符串值标记当前元素。

 aria-labelledby

 字符串。空格分隔的id们

1

标题

aria-labelledby一般用在区域元素上，

对于的id一般为对应的标题或是标签

元素的id.关系型属性。

aria-level

数值。表示等级。

1

次标题

上面的HTML类似于<h2>次标题</h2>

aria-live

字符串。可选值有：off,

polite, assertive, rude。

默认为off, 表示不宣布更新；

polite表示只有用户闲时宣布；

assertive表示尽快对用户宣布；

rude表示即时提醒用户，必

要的时候甚至中断用户。

1

2012年 3月

绝大多数的更新应该在用户闲

暇的时候告知，即时提示对用

户是一种干扰。如果希望内容

完全更新后再提示，可以使用

上面提到的aria-busy.

左侧的HTML为时间选择控件

的年月标题部分，aria-live=

"assertive"表示的是当用户

选择了新的时间的时候，尽

快通知用户时间发生了变更。

aria-multiselectable

字符串。表示是否可多选。

默认为false, 表示一次只

能选择一个项。true表示

一次可以选择多个项。

 

例如手风琴展开收起效果，

我们可以使用aria-

multiselectable来告

知辅助设备，一次可以

展开多个项还是只有一个展开。

aria-owns

字符串。值为目标元素id.

1
3
4

5
• 晴川
6
• 静秋
7
• 黄小仙
8

 aria-posinset

 数值。表示当前位置

 

 用在设置和获取一个集合内某项的当前位置

 aria-readonly

字符串。表示是否只读。

默认为false, 表示元素

值可以被修改；true

表示元素指不能被改变。

1

2 3 4 5 6 7 8

美女们

晴川	静秋	黄小仙

 

 aria-relevant

字符串。表示区域内哪

些操作行为需要做出反应。

可选值有：additions,

removals, text, all，

可以空格分隔多个一起

显示. additions表示新

增节点的时候做出反应；

removals表示删除节点

时重要操作；text表示

文本改变是值得重视的；

all等同于同时使用上

面三个属性值。

1

 左边的HTML表示当日志内容有添加的时候做出反应。

 aria-required

字符串。元素值是否必

需。默认为false, 表示

元素值可以为空；true

表示元素值是必需的。

1

2 * 姓名: 3 5
姓名不能为空

6

 多半用在表单控件中。对应HTML5中required属性。

aria-secret

字符串。表示机密状态。

 

具体含义不详

aria-setsize

数值。设置的尺寸大小值。

 

顾名思意

aria-sort

字符串。表示表格或格

栅中的项是以升序排列

还是降序排列。可选值：

ascending(↑),

descending(↓), none,

other.

 

Widget组件应用属性。

aria-valuemax

数值。表允许的最大值。

1

2 4
45

5

用在范围组件上。对应

于HTML5中的max属性。

aria-valuemin

数值。表示允许的最小值。

1

2 4
45

5

用在范围组件上。对应

于HTML5中的min属性。

aria-valuenow

数值。表示当前值。

1

2 4
45

5

用在范围组件上。对

应于value属性。

aria-valuetext

字符串。定义等同于

aria-valuenow人可读

的文本。

 

用在范围组件上。

（3）、  ARIA属性值：

ARIA  状态值示意及说明表

属性状态

属性值

HTML示意

说明

aria-checked

字符串。表示检查的状态。

true表示元素被选择；

false表示元素未被选择；

mixed表示元素同时有选

择和为选择状态。

1

2
• 所有姑娘
3
• 晴川
4
• 静秋
5
• 黄小仙
6

该属性用来表明用户是

否选择了某些项（如上边

这个截图所示）。

 aria-disabled

字符串。表禁用状态，

true表示当前是非激活

状态；false表示清除

非激活状态。

1

添加

对应单复选框等控件的

disabled属性，一般用在

自定义模拟控件中。

 aria-expanded

字符串。表示展开状态。

默认为undefined, 表示

当前展开状态未知。

其它可选值：true

表示元素是展开的；

false表示元素不是展开的。

1

姑娘们


3
4
5
请选择你中意的：
6
7
• 8 晴川
9
• 10 静秋
11
• 12 黄小仙
13
14

 

例如在手风琴交互效果中标示展开

与否的状态。该属性对应HTML5

的open属性。

aria-hidden

字符串。可选值为true和

false, true表示元素隐藏

(不可见)，false表示元素

可见。

1

23%

该属性使用非常普遍。几乎所

有涉及到显示与隐藏这类交互

或没有交互的地方都可以应用

该属性。左边的示例HTML代

码来自进度条进度值显示的

div, 当前aria-hidden为false,

表示该进度值是可见的。

aria-invalid

字符串。表示元素值是否

错误的。默认为false,

表示是OK的，如果为true,

则表示值验证不通过。

1

 

aria-pressed

字符串。表示按下的状态，

可选值有：true, false,

mixed, undfined.默认为

undfined, 表示按下状态

未知；true表示元素往下

（按钮按下）；false表

示元素抬起；mixed表示

元素同时有按下和没有

按下的状态。

1

添加

左边HTML表示按钮已经按

下，同时处于禁用状态。

aria-selected

字符串。表示选择状态。

可选值有：true, false,

undefined. 默认为

undefined，表示元素

选择状态未知。true

表示元素已选择；

false表示未被选中。

1

2
3
• 美女
4
• 淑女
5
• 熟女
6
• 腐女
7
8

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

四、附录

ARIA属性关系图：