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)
- Roles with More than One Guidance or Example (36)
- Properties and States with no Examples (12)
- Properties and States with One Examples (8)
- Properties and States with More than One Example (28)
- Example Coding Practices
CSV Files of Role, Properties and States Coverage
Roles with No Guidance or Examples (29)
application
caption
code
definition
deletion
directory
document
emphasis
figure
generic
heading
img
input
insertion
list
listitem
log
marquee
math
note
paragraph
progressbar
rowheader
scrollbar
searchbox
status
term
textbox
timer
Roles with at Least One Guidance or Example (13)
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)
Properties and States with No Guidance or Examples (12)
aria-details
aria-dropeffect
aria-errormessage
aria-flowto
aria-grabbed
aria-invalid
aria-keyshortcuts
aria-multiline
aria-placeholder
aria-readonly
aria-relevant
aria-required
Properties and States with at Least One Guidance or Example (8)
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)
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 |