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

原创

周陆军博客

发布于 2023-05-07 18:40:10

2K0

发布于 2023-05-07 18:40:10

文章被收录于专栏：前端博客

上篇《Web内容的无障碍性(2):实现WAI-ARIA无障碍网页及注意实现》，知识讲解ARIA相关的知识及使用，但是ARIA角色值与属性值都非常多，除了几个简单，基本是处于懵逼状态。本文对几年前张鑫旭老师的《WAI-ARIA无障碍网页应用属性完全展》的属性表的简化增补版本

ARIA 角色值分类列表

角色以有意义的方式指示元素的类型。假定屏幕阅读器遇到包含 role=navigation 的页面上的一个 HTML 元素。屏幕阅读器将知道此 HTML 元素用于导航，用户将能直接使用导航功能而非通过所有链接选择标签。

角色有以下三种类型：

作为导航界标的界标角色。
结构性角色定义文档的结构并帮助组织内容。
小组件角色由独立的 UI 小组件和复合小组件构成，其中复合小组件是两个或多个独立小组件的容器。

ARIA 中有 8 个界标角色、18 个结构性角色、25 个独立界面小组件角色和 9 个复合 UI 小组件角色。

界标角色	结构性角色	小组件角色	独立小组件	复合小组件
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

ARIA Roles值示意及说明表

role属性值	含义	说明
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 属性值示意及说明表

属性名	属性值	说明
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人可读的文本。	用在范围组件上。