aria属性表
六、ARIA属性表
| role属性值 | 含义 | HTML示意 | 说明 |
|---|---|---|---|
| alert | 表示警告 | 例如ajax操作返回错误信息的div标签。 |
|
| alertdialog | 表示警告弹出框 |
|
自定义的出错提示弹框。
|
| application | 表示应用 |
|
例如自定义的时间选择器。 |
| button | 表示按钮 | 大家都懂的，没啥好说的 | |
| checkbox | 表示复选框 |
|
同样，大家都懂的，没啥好说的
|
| combobox | 表示下拉列表框 |
- 晴川
- 静秋
- 黄小仙
| 晴川 | 静秋 | 黄小仙 |
|---|
gridcell表示网格单元
| 晴川 | 静秋 | 黄小仙 |
- 所有姑娘
- 晴川
- 静秋
- 黄小仙
例如时间选择器中的月份标题：2012年 3月
role=“combobox” aria-autocomplete=“inline” aria-owns=“cb1-list” />
- 晴川
- 静秋
- 黄小仙
类似三国杀右侧记录战事区域；或是比赛文字直播记录区域。menu表示菜单
- 美女
- 晴川
- 静秋
- 黄小仙
- 靓女
- 淑女
- 熟女
- 美女
- 晴川
- 静秋
- 黄小仙
- 靓女
- 淑女
- 熟女
- 美女
- 晴川
- 静秋
- 黄小仙
- 靓女
- 淑女
- 熟女
- 美女
- 晴川
- 静秋
- 黄小仙
- 靓女
- 淑女
- 熟女
- 美女
- 晴川
- 静秋
- 黄小仙
- 靓女
- 淑女
- 熟女
role=“combobox” aria-autocomplete=“inline” aria-owns=“cb1-list” />
- 晴川
- 静秋
- 黄小仙
左边示例的HTML为一个自定义的滑动条。而
role=“slider” src=“slider_control.png” />
45
role=“presentation"所在
div显示的就是当前滑动位置对应的值。
aria-valuenow=“0” aria-valuemin=“0” aria-valuemax=“100” tabindex=“0”>
23%
美女们：
晴川
静秋
黄小仙
美女们：
晴川
静秋
黄小仙
例如用在
我之所以会出现，是因为主人你点击了某个命中注定的按钮。
div区域显示隐藏切换的时候。row表示行
| 晴川 | 静秋 | 黄小仙 |
table下面的
tr标签。separator表示分隔
- 美女
- 晴川
- 静秋
- 黄小仙
- 靓女
- 淑女
- 熟女
role=“slider” src=“slider_control.png” />
45
例如下面这个数值微调效果截图：
- 美女
- 淑女
- 熟女
- 腐女
- 美女
- 淑女
- 熟女
- 腐女
<-- 选项卡 -->
模拟计数器，使用在动态显示规律数值变化的地方toolbar表示工具栏0
左边HTML表示一个剪切，复制，粘贴三功能在一起的工具栏。tooltip表示提示文本
如下图黄色的这个提示框：
aria-describedby=“tip” aria-required=“false” />
必须是美女姓名哦~~
美女
淑女
treeitem中的图。treeitem表示树结构选项
美女
- 晴川
- 静秋
- 黄小仙
淑女
| 属性名 | 属性值 | HTML示意 | 说明 |
|---|---|---|---|
| aria-activedescendant | 字符串。表示后代元素的id值。 |
aria-activedescendant 属性定义了当工具栏获取焦点时，哪一个工具栏的子控件获取了焦点。在此HTML示例中，工具栏的第一个控件（拥有id “button1″）是能获取焦点的子控件。 |
|
| aria-atomic | 字符串。表示区域内容是否完整播报。值可以为true和false。当为true时，表示辅助设备需要把整个区域内容都通报给使用者；如果为false则表示只需要通报修改的部分。 |
|
还是这个时间选择器年月标题的例子。这里的aria-atomic为true则表示当时间改变的时候，这里的年月日期要完整播放，不要只改了月份就只报月份内容。 |
| aria-autocomplete | 字符串。表示用户的文本框的自动提示是否提供。可选值有：inline, list, both, none. |
role=“combobox” aria-autocomplete=“inline” aria-owns=“list” /> |
- 晴川
- 静秋
- 黄小仙
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属性值列表。
aria-expanded=“true” role=“tab” tabindex=“0”>姑娘们
请选择你中意的美女……
ariaControls属性主要被role为group, region, 或widget的元素使用。aria-describedby字符串。空格分隔的id属性值列表。
- 所有姑娘
- aria-describedby=“desc1” tabindex=“0”>晴川
杨幂饰演的穿越女王~~
同样的，该属性定义了文档结构表现不出来的的元素间的相互关联性。该属性旨在通过标签提供更多用户可能需要的信息。如果指定了不只一个id, 所有元素会合并在一起共同创建一条单独的描述。aria-dropeffect字符串。表示拖拽效果。可选值有：
copy,
move,
reference,
execute,
popup,
none, 依次表示：复制，移动，参照，执行，弹出以及没有效果。
<-- 暂无HTML示例 -->该属性用在拖拽上。aria-flowto字符串。空格分隔的
id值们。
<-- 暂无HTML示例 -->如果该属性值对应的是单独的
id, 辅助技术会恢复目标元素的阅读；如果对应的是多个
id, 则辅助技术会让用户去选择、导航到目标元素。aria-grabbed字符串。拖拽中元素的捕获状态。可选值有:
true,
false,
undefined. 默认为
undefined，表示元素捕获状态未知。
true表示元素可以捕获；
false表示不能被捕获。
<-- 暂无HTML示例 -->该属性用在拖拽上。类似于HTML5中的
draggable属性。aria-haspopup字符串。
true表示点击的时候会出现菜单或是浮动元素；
false表示没有pop-up效果。
美女- 晴川
- 静秋
- 黄小仙
- 靓女
- 淑女
- 熟女
<-- 暂无HTML示例 -->定义一个字符串值标记当前元素。aria-labelledby字符串。空格分隔的
id们
标题
aria-labelledby一般用在区域元素上，对于的
id一般为对应的标题或是标签元素的
id.关系型属性。aria-level数值。表示等级。
上面的HTML类似于次标题
次标题
off,
polite,
assertive,
rude。默认为
off, 表示不宣布更新；
polite表示只有用户闲时宣布；
assertive表示尽快对用户宣布；
rude表示即时提醒用户，必要的时候甚至中断用户。
绝大多数的更新应该在用户闲暇的时候告知，即时提示对用户是一种干扰。如果希望内容完全更新后再提示，可以使用上面提到的2012年 3月
aria-busy.
左侧的HTML为时间选择控件的年月标题部分，aria-live="assertive"表示的是当用户选择了新的时间的时候，尽快通知用户时间发生了变更。
false, 表示一次只能选择一个项。
true表示一次可以选择多个项。
<-- 暂无HTML示例 -->例如手风琴展开收起效果，我们可以使用
aria-multiselectable来告知辅助设备，一次可以展开多个项还是只有一个展开。aria-owns字符串。值为目标元素
id.
role=“combobox” aria-autocomplete=“inline” aria-owns=“list” />
- 晴川
- 静秋
- 黄小仙
aria-owns表示元素所拥有的，这里这里的文本框拥有其对应的下拉列表。
<-- 暂无HTML示例 -->用在设置和获取一个集合内某项的当前位置。aria-readonly字符串。表示是否只读。默认为
false, 表示元素值可以被修改；
true表示元素指不能被改变。
| 晴川 | 静秋 | 黄小仙 |
|---|
aria-relevant字符串。表示区域内哪些操作行为需要做出反应。可选值有：
additions,
removals,
text,
all，可以空格分隔多个一起显示.
additions表示新增节点的时候做出反应；
removals表示删除节点时重要操作；
text表示文本改变是值得重视的；
all等同于同时使用上面三个属性值。
左边的HTML表示当日志内容有添加的时候做出反应。aria-required字符串。元素值是否必需。默认为
false, 表示元素值可以为空；
true表示元素值是必需的。
多半用在表单控件中。对应HTML5中
aria-describedby=“tip” aria-required=“true” />
姓名不能为空
required属性。aria-secret字符串。表示机密状态。
<-- 暂无HTML示例 -->具体含义不详aria-setsize数值。设置的尺寸大小值。
<-- 暂无HTML示例 -->顾名思意aria-sort字符串。表示表格或格栅中的项是以升序排列还是降序排列。可选值：
ascending(↑),
descending(↓),
none,
other.
<-- 暂无HTML示例 -->Widget组件应用属性。aria-valuemax数值。表允许的最大值。
用在范围组件上。对应于HTML5中的
role=“slider” src=“slider_control.png” />
45
max属性。aria-valuemin数值。表示允许的最小值。
用在范围组件上。对应于HTML5中的
role=“slider” src=“slider_control.png” />
45
min属性。aria-valuenow数值。表示当前值。
用在范围组件上。对应于
role=“slider” src=“slider_control.png” />
45
value属性。aria-valuetext字符串。定义等同于
aria-valuenow人可读的文本。
<-- 暂无HTML示例 -->用在范围组件上。
| 属性状态 | 属性值 | 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代码来自进度条进度值显示的23%
div, 当前
aria-hidden为
false, 表示该进度值是可见的。aria-invalid字符串。表示元素值是否错误的。默认为
false, 表示是OK的，如果为
true, 则表示值验证不通过。
aria-pressed字符串。表示按下的状态，可选值有：
true,
false,
mixed,
undfined.默认为
undfined, 表示按下状态未知；
true表示元素往下（按钮按下）；
false表示元素抬起；
mixed表示元素同时有按下和没有按下的状态。
左边HTML表示按钮已经按下，同时处于禁用状态。aria-selected字符串。表示选择状态。可选值有：aria-disabled=“false”>添加
true,
false,
undefined. 默认为
undefined，表示元素选择状态未知。
true表示元素已选择；
false表示未被选中。
- 美女
- 淑女
- 熟女
- 腐女
元素被选中表明其处于某种交互之中，因此选中元素很可能处于focus焦点获取状态。