Web内容的无障碍性(3):ARIA角色Roles值示与aria-*属性值列表说明

application

article

region

alert

progressbar

combobox

banner

columnheader

row

alertdialog

radio

grid

complementary

definition

rowheader

button

scrollbar

listbox

contentinfo

directory

separator

checkbox

slider

menu

form

document

toolbar

dialog

spinbutton

menubar

main

group

gridcell

status

radiogroup

navigation

heading

link

tab

tablist

search

img

log

tabpanel

tree

list

marquee

textbox

treegrid

listitem

menuitem

timer

math

menuitemcheckbox

tooltip

note

menuitemradio

treeitem

presentation

option

alert

表示警告

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

alertdialog

表示警告弹出框

自定义的出错提示弹框。

application

表示应用

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

button

表示按钮

大家都懂的，没啥好说的

checkbox

表示复选框

同样，大家都懂的，没啥好说的

combobox

表示下拉列表框

grid

表示网格

gridcell

表示网格单元

类似于table & table-cell

group

表示组合并

heading

表示应用程序标题头

例如时间选择器中的月份标题：

listbox

表示列表框

log

表示日志记录

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

menu

表示菜单

menubar

表示菜单栏

menuitem

表示菜单项

menuitemcheckbox

表示可复选的菜单项

menuitemradio

表示只能单选的菜单项

option

表示选项

presentation

表示称述

左边示例的HTML为一个自定义的滑动条。而role="presentation"所在div显示的就是当前滑动位置对应的值。

progressbar

表示进度条

radio

表示单选

自定义单选框控件的时候使用，下图为左侧HTML的效果图：

radiogroup

表示单选组

region

表示区域

例如用在div区域显示隐藏切换的时候。

row

表示行

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

separator

表示分隔

反应在下图就是那条黑色的1像素水平分隔线：

slider

表示滑动条

spinbutton

表示微调

例如下面这个数值微调效果截图：

tab

表示标签

tablist

表示标签列表

tabpanel

表示标签面板

timer

表示计数

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

toolbar

表示工具栏

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

tooltip

表示提示文本

tree

表示树形

效果见下面treeitem中的图。

treeitem

表示树结构选项

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-owns表示元素所拥有的，这里这里的文本框拥有其对应的下拉列表。

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人可读的文本。

用在范围组件上。