使用 ARIA：角色、状态和属性
ARIA 定义了可以应用于元素的语义，这些语义分为 roles（定义一种用户界面元素）、states 和 properties，这些都是角色所支持的。作者必须在元素的生命周期中为其分配一个 ARIA 角色和适当的状态和属性，除非该元素已经具有适当的 ARIA 语义（通过使用适当的 HTML 元素）。添加 ARIA 语义只会向浏览器的无障碍 API 公开额外信息，而不会影响页面的 DOM。
角色
组件角色
- button
- checkbox (en-US)
- gridcell (en-US)
- link (en-US)
- menuitem
- menuitemcheckbox
- menuitemradio
- option
- progressbar (en-US)
- radio (en-US)
- scrollbar
- searchbox
- separator (when focusable)
- slider (en-US)
- spinbutton
- switch (en-US)
- tab (en-US)
- tabpanel (en-US)
- textbox (en-US)
- treeitem
复合角色
下面的技术描述了每个复合角色及其必需和可选的子角色。
- combobox
- grid (en-US) (包含 row (en-US), gridcell (en-US), rowheader, columnheader)
- listbox (包含 option)
- menu
- menubar
- radiogroup (en-US) (参考 radio)
- tablist (包含 tab (en-US) 和 tabpanel (en-US))
- tree
- treegrid
文档结构角色
- application (en-US)
- article (en-US)
- cell (en-US)
- columnheader
- definition
- directory
- document (en-US)
- feed
- figure (en-US)
- group (en-US)
- heading (en-US)
- img
- list
- listitem
- math
- none
- note
- presentation (en-US)
- row (en-US)
- rowgroup (en-US)
- rowheader
- separator
- table (en-US)
- term
- toolbar (en-US)
- tooltip
具有里程碑意义的角色
实时区域角色
窗口角色
状态和属性
组件属性
- aria-autocomplete
- aria-checked
- aria-current
- aria-disabled
- aria-errormessage
- aria-expanded
- aria-haspopup
- aria-hidden
- aria-invalid
- aria-label
- 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
实时区域属性
- aria-live
- aria-relevant
- aria-atomic
- aria-busy
拖放属性
- aria-dropeffect
- aria-dragged
关系属性
- aria-activedescendant (en-US)
- aria-colcount
- aria-colindex
- aria-colspan
- aria-controls
- aria-describedby
- aria-details (en-US)
- aria-errormessage
- aria-flowto
- aria-labelledby
- aria-owns
- aria-posinset
- aria-rowcount
- aria-rowindex
- aria-rowspan
- aria-setsize