HTML - aria-属性

什么是ARIA属性

aria属性允许修改可访问树中定义的元素状态和属性。——MDN

说明：aria仅可以修改可访问树，修改辅助技术怎样将内容展现给用户的方式。aria不会改变任何关于元素的功能或行为，当不使用语义HTML元素来达到它们的预期目的或默认功能，就必须使用JavaScript来管理要素的行为、焦点和ARIA状态。

ARIA属性分类

ARIA属性可以分为4类：

1. 部件属性

• aria-disabled （Global）
• aria-errormessage （Global）
• aria-haspopup （Global）
• aria-hidden （Global）
• aria-invalid （Global）
• aria-label(Global) （Global）
• aria-autocomplete
• aria-checked
• aria-expanded
• aria-level
• aria-modal
• aria-multiline
• aria-multiselectable
• aria-orientation
• aria-placeholder
• aria-pressed
• aria-readonly
• aria-required
• aria-selected
• aria-sort
• aria-valuemax
• aria-valuemin
• aria-valuenow
• aria-valuetext

2. Live region属性

• aria-atomic （Global）
• aria-busy （Global）
• aria-live （Global）
• aria-relevant （Global）

3. 拖动和下拉属性

• aria-dropeffect （Global）
• aria-grabbed （Global）

5. 关联属性

• aria-controls （Global）
• aria-describedby （Global）
• aria-description （Global）
• aria-details （Global）
• aria-errormessage （Global）
• aria-flowto （Global）
• aria-labelledby （Global）
• aria-owns （Global）
• aria-activedescendant
• aria-colcount
• aria-colindex
• aria-colspan
• aria-details
• aria-errormessage
• aria-posinset
• aria-rowcount
• aria-rowindex
• aria-rowspan
• aria-setsize

全局ARIA属性

无论是否使用ARIA角色，一些状态和属性都适用于所有HTML元素，这一类属性被称为“全局”属性。全局属性被所有角色和基础标记元素支持。

上述的一些全局属性我们已经做了标记（（Global） 标记的属性），意思就是它们可以被包含在任何一个HTML元素中，除非是有明确不允许使用的声明。下面列举一些其它的全局属性：

• aria-current
• aria-keyshortcuts
• aria-roledescription

说明：除aria-label和aria-labelledby属性外，上述 （Global） 属性都是全局属性。在元素含有presentation属性或它的同义词none时，aria-label和aria-labelledby属性不被允许使用。

ARIA角色（role）有哪些

role	描述	role	描述	role	描述
application	作为一个应用	article	文章，同理article标签	banner	网站头部等，通常会包括logo、公司名称、搜索框等
button	按钮	cell	单元格	checkbox	多选
columnheader	同理原生的th标签	combobox	定义一个元素为input，并能够控制其它元素，例如网格等	command
comment		complementary		composite
contentinfo		definition		dialog
directory	已废弃	document		document structural
feed		figure		form
generic		grid		gridcell
group		heading		img
input		landmark		link
list		listbox		listitem
log		main		mark
marquee		math		menu
menubar		menuitem		menuitemcheckbox
menuitemradio		meter		navigation
none		note		option
presentation		progressbar		radio
radiogroup		range		region
roletype		row		rowgroup
rowheader		scrollbar		search
searchbox		section		sectionhead
select		separator		slider
spinbutton		status		structure
suggestion		switch		tab
table		tablist		tabpanel
term		textbox		timer	元素作为一个计时器
toolbar		tooltip	提示框	tree	允许用户从层级组织中选择一个或多个选项
treegrid	$12	treeitem		widget	$1
window	浏览器或APP窗口	alert	提示框，如element-ui的提示组件	alertdialog	提示对话框，可以自定义文本和内容，如element-UI的confirm足迹

aria是HTML的一个重要属性，总共统计就是这些，具体每一个什含义，待用到时再做补充。