ARIA Roles, Properties and States Referenced in Guidance and Examples

This page includes information on number of guidance and example references in the WAI-ARIA Authoring Practices for each ARIA role, property and state. The guidance column is determined by either the role, property or state being in the text content of a heading (e.g. h2-h6) or through the use of data-aria-roles or data-aria-props attributes on any heading within the practices. The data-aria-roles or data-aria-props attributes should contain a space separated list of values. The use of the data attribute overrides the identification of roles, properties or states from the text content of a heading. The suffix "(D)" indicates a reference came from a data attribute, otherwise the reference came from the text content of a heading.

CSV Files of Role, Properties and States Coverage

Roles with No Guidance or Examples (29)

Roles with at Least One Guidance or Example (13)

NOTE: The HC abbreviation means example has High Contrast support.
Role Guidance Example
alertdialog Alert Dialog
article Feed
columnheader Table
complementary Complementary Complementary Landmark
feed Feed Feed
link Link Link
main Main Main Landmark
menuitemcheckbox Editor Menubar
rowgroup Table
search Search Search Landmark
separator Editor Menubar
tooltip Tooltip Widget
treegrid Treegrid Treegrid Email Inbox

Roles with More than One Guidance or Example (36)

NOTE: The HC abbreviation means example has High Contrast support.
Role Guidance Examples
alert
banner Banner
button
cell Table
checkbox Checkbox
combobox
contentinfo Contentinfo
dialog
form Form Landmark
grid
gridcell
group
listbox
menu
menubar
menuitem
menuitemradio
meter Meter
navigation
none
option
presentation
radio
radiogroup
region Region
row
slider
spinbutton Spinbutton
switch Switch
tab Keyboard Navigation Between Components (The Tab Sequence)
table Table
tablist
tabpanel
toolbar Toolbar
tree
treeitem

Properties and States with No Guidance or Examples (12)

NOTE: The HC abbreviation means example has High Contrast support.

Properties and States with at Least One Guidance or Example (8)

NOTE: The HC abbreviation means example has High Contrast support.
Property or State Guidance Example
aria-atomic Alert
aria-busy Feed
aria-colcount Using aria-colcount and aria-colindex Data Grid
aria-colspan Defining cell spans using aria-colspan and aria-rowspan
aria-multiselectable Listboxes with Rearrangeable Options
aria-orientation Vertical Temperature Slider
aria-owns Navigation Treeview
aria-rowspan Defining cell spans using aria-colspan and aria-rowspan

Properties and States with More than One Guidance or Example (28)

NOTE: The HC abbreviation means example has High Contrast support.
Property or State Guidance Examples
aria-activedescendant Managing Focus in Composites Using aria-activedescendant
aria-autocomplete
aria-checked
aria-colindex Data Grid
aria-controls
aria-current
aria-describedby Describing by referencing content with aria-describedby
aria-disabled
aria-expanded
aria-haspopup
aria-hidden
aria-label Naming with a String Attribute Via aria-label
aria-labelledby Naming with Referenced Content Via aria-labelledby
aria-level
aria-live
aria-modal
aria-posinset
aria-pressed
aria-roledescription
aria-rowcount Using aria-rowcount and aria-rowindex
aria-rowindex Using aria-rowcount and aria-rowindex
aria-selected
aria-setsize
aria-sort Indicating sort order with aria-sort
aria-valuemax Using aria-valuemin, aria-valuemax and aria-valuenow
aria-valuemin
aria-valuenow Using aria-valuemin, aria-valuemax and aria-valuenow
aria-valuetext Using aria-valuetext

Example Coding Practices

Coding Summary

Total Examples 59
High Contrast Documentation 29
Uses SVG 34
Uses forced-color-adjust on SVG 13
Uses event.KeyCode 22
Uses event.which 11
Use Class 29
Use Prototype 23
Mouse Events 16
Pointer Events 10

Coding Practices

Example Created Using Uses event.keyCode Uses event.which High Contrast Documentation Example Code ID Roles in Javascript and HTML Roles in Documentation aria-* Attributes in Javascript and HTML aria-* Attributes in Documentation Differences between the documentation and the source code.
Accordion class ex1 1 1 5 3 aria-hidden,aria-required
Alert ex1 1 1 0 2 aria-live,aria-atomic
Button (IDL Version) Yes example 1 1 2 2
Button Yes example 1 1 2 1 aria-hidden
Auto-Rotating Image Carousel with Buttons for Slide Control prototype ex1 2 2 4 4
Auto-Rotating Image Carousel with Tabs for Slide Control prototype Yes ex1 4 4 5 5
Checkbox (Mixed-State) class Yes ex1 1 1 2 2
Checkbox (Two State) class Yes ex1 2 2 2 1 aria-labelledby
Editable Combobox With Both List and Inline Autocomplete class Yes ex1 3 3 7 6 aria-hidden
Editable Combobox With List Autocomplete class Yes ex1 3 3 7 6 aria-hidden
Editable Combobox without Autocomplete class Yes ex1 3 3 7 6 aria-hidden
Date Picker Combobox class Yes ex1 4 3 11 10 gridcell,aria-hidden
Select-Only Combobox prototype ex1 2 3 6 5 option,aria-haspopup
Editable Combobox with Grid Popup prototype Yes Yes ex1 2 4 7 7 row,gridcell
Alert Dialog prototype Yes Yes ex_alertdialog 2 2 5 4 aria-hidden
Date Picker Dialog prototype Yes example 3 2 6 6 gridcell
Modal Dialog prototype Yes Yes ex1 1 1 3 3
Disclosure (Show/Hide) for Answers to Frequently Asked Questions class Yes ex1 0 0 2 2
Disclosure (Show/Hide) for Image Description class Yes ex1 0 0 3 2 aria-labelledby
Disclosure Navigation Menu with Top-Level Links class, prototype ex1 4 0 5 3 banner,contentinfo,navigation,region,aria-label,aria-labelledby
Disclosure Navigation Menu class, prototype Yes ex1 2 0 4 3 navigation,region,aria-label
Feed ex1 0 2 0 5 feed,article,aria-labelledby,aria-busy,aria-describedby,aria-posinset,aria-setsize
Feed Display prototype Yes Yes not found 0 0 6 0 aria-busy,aria-describedby,aria-label,aria-labelledby,aria-posinset,aria-setsize
Advanced Data Grid prototype Yes Yes ex1 0 0 5 0 aria-colindex,aria-controls,aria-haspopup,aria-rowindex,aria-sort
Data Grid prototype Yes Yes ex1 4 1 8 6 button,menu,menuitem,aria-controls,aria-haspopup
Layout Grid prototype Yes Yes ex1 5 3 9 3 button,region,aria-colindex,aria-haspopup,aria-label,aria-live,aria-relevant,aria-sort
Link Yes not found 1 1 1 1
(Deprecated) Collapsible Dropdown Listbox prototype Yes Yes ex 2 2 8 5 aria-disabled,aria-keyshortcuts,aria-multiselectable
Listbox with Grouped Options prototype Yes Yes ex 4 3 6 3 presentation,aria-disabled,aria-keyshortcuts,aria-multiselectable
Listboxes with Rearrangeable Options prototype Yes Yes ex1 3 2 8 4 toolbar,aria-disabled,aria-keyshortcuts,aria-label,aria-live
Scrollable Listbox prototype Yes Yes ex 2 2 6 3 aria-disabled,aria-keyshortcuts,aria-multiselectable
Actions Menu Button Using aria-activedescendant class Yes ex1 2 2 5 5
Actions Menu Button Using element.focus() class Yes ex1 2 2 4 4
Navigation Menu Button class Yes ex1 3 3 4 4
Editor Menubar class Yes ex1 8 7 7 6 none,aria-orientation
Navigation Menubar class Yes ex1 9 8 6 5 separator,aria-orientation
Meter prototype example 1 1 5 4 aria-hidden
Radio Group Using aria-activedescendant class Yes ex1 2 2 3 3
Rating Radio Group class Yes ex1 3 3 3 3
Radio Group Using Roving tabindex class Yes ex1 2 2 2 2
Color Viewer Slider class Yes ex1 2 2 5 5
Horizontal Multi-Thumb Slider class Yes ex1 2 2 5 5
Rating Slider class Yes ex1 1 1 6 6
Media Seek Slider class Yes ex1 2 2 6 6
Vertical Temperature Slider class Yes ex1 2 2 7 7
Date Picker Spin Button prototype Yes example 2 2 7 7
Switch Using HTML Button class Yes ex1 2 2 3 3
Switch Using HTML Checkbox Input class Yes ex1 1 1 1 1
Switch class Yes ex1 1 1 2 2
Sortable Table class Yes ex1 0 0 2 2
Table ex1 5 5 2 2
Tabs with Automatic Activation Yes ex1 3 3 5 4 aria-orientation
Tabs with Manual Activation Yes ex1 3 3 5 4 aria-orientation
Toolbar not found 0 0 0 0
Toolbar prototype Yes ex1 6 6 12 12
Treegrid Email Inbox prototype Yes ex1 3 3 7 5 aria-activedescendant,aria-current
File Directory Treeview Using Computed Properties prototype Yes ex1 3 3 4 3 aria-label
File Directory Treeview Using Declared Properties prototype Yes ex1 3 3 7 6 aria-label
Navigation Treeview class Yes Yes ex1 8 8 5 5

Graphics Techniques

Example SVG in HTML SVG in CSS SVG in JS forced-color-adjust CSS ::before CSS ::after CSS content
Button (IDL Version) Yes Yes Yes Yes
Button Yes Yes Yes Yes
Auto-Rotating Image Carousel with Buttons for Slide Control Yes Yes
Auto-Rotating Image Carousel with Tabs for Slide Control Yes Yes
Checkbox (Mixed-State) Yes Yes Yes
Checkbox (Two State) Yes Yes Yes
Editable Combobox With Both List and Inline Autocomplete Yes Yes
Editable Combobox With List Autocomplete Yes Yes
Editable Combobox without Autocomplete Yes Yes
Date Picker Combobox Yes Yes Yes
Select-Only Combobox Yes Yes
Alert Dialog Yes Yes
Date Picker Dialog Yes
Modal Dialog Yes
Disclosure (Show/Hide) for Answers to Frequently Asked Questions Yes Yes Yes
Disclosure (Show/Hide) for Image Description Yes Yes Yes
Disclosure Navigation Menu with Top-Level Links Yes Yes
Disclosure Navigation Menu Yes Yes
Feed Display Yes
Advanced Data Grid Yes Yes
Data Grid Yes Yes
Layout Grid Yes Yes Yes
Link Yes Yes Yes
(Deprecated) Collapsible Dropdown Listbox Yes Yes Yes
Listbox with Grouped Options Yes Yes Yes
Listboxes with Rearrangeable Options Yes Yes Yes
Scrollable Listbox Yes Yes Yes
Actions Menu Button Using aria-activedescendant Yes Yes
Actions Menu Button Using element.focus() Yes Yes
Navigation Menu Button Yes Yes
Editor Menubar Yes Yes
Navigation Menubar Yes Yes Yes
Meter Yes
Radio Group Using aria-activedescendant Yes Yes Yes
Rating Radio Group Yes Yes Yes
Radio Group Using Roving tabindex Yes Yes Yes
Color Viewer Slider Yes Yes Yes Yes
Horizontal Multi-Thumb Slider Yes Yes Yes Yes
Rating Slider Yes Yes Yes Yes
Media Seek Slider Yes Yes Yes Yes
Vertical Temperature Slider Yes Yes Yes Yes
Date Picker Spin Button Yes Yes
Switch Using HTML Button Yes Yes Yes Yes
Sortable Table Yes Yes
Tabs with Automatic Activation Yes Yes Yes
Tabs with Manual Activation Yes Yes Yes
Toolbar Yes Yes Yes Yes Yes
Treegrid Email Inbox Yes Yes Yes
File Directory Treeview Using Computed Properties Yes Yes
File Directory Treeview Using Declared Properties Yes Yes
Navigation Treeview Yes Yes

Mouse and Pointer Events

Example Mouse Events Pointer Events
Auto-Rotating Image Carousel with Buttons for Slide Control Yes
Auto-Rotating Image Carousel with Tabs for Slide Control Yes
Editable Combobox With Both List and Inline Autocomplete Yes
Editable Combobox With List Autocomplete Yes
Editable Combobox without Autocomplete Yes
Date Picker Combobox Yes
Select-Only Combobox Yes
Date Picker Dialog Yes
(Deprecated) Collapsible Dropdown Listbox Yes
Listbox with Grouped Options Yes
Listboxes with Rearrangeable Options Yes
Scrollable Listbox Yes
Actions Menu Button Using aria-activedescendant Yes
Actions Menu Button Using element.focus() Yes
Navigation Menu Button Yes
Editor Menubar Yes
Navigation Menubar Yes
Color Viewer Slider Yes
Horizontal Multi-Thumb Slider Yes
Rating Slider Yes
Media Seek Slider Yes
Vertical Temperature Slider Yes
Toolbar Yes
File Directory Treeview Using Computed Properties Yes
File Directory Treeview Using Declared Properties Yes
Navigation Treeview Yes