overscore

This document is intended to be used as a quick reference quide of the W3C Web Accessibility Initiative – Accessible Rich Internet Applications 1.0(WAI-ARIA). Each ARIA attribute is displayed in the table of contents with a link on this page to its related explanation.

A few Notes: Abstract roles were removed to avoid confusion about whether developers should/shouldn’t use them (they SHOULD NOT). Each more info link outside the Table of Contents takes the user to the W3C ARIA specification page with more information (does not open in a new window). The Back to TOC button beside each title element returns the user to the Table of Contents section.

W3C Documentation: ARIA 1.0, ARIA Primer, ARIA Authoring Practices

Table of Contents(TOC)

roles

1. alert
2. alertdialog
3. application
4. article
5. banner
6. button
7. checkbox
8. columnheader
9. combobox
10. complementary
11. contentinfo
12. definition
13. dialog
14. directory
15. document
16. form
17. grid
18. gridcell
19. group
20. heading
21. img
22. link
23. list
24. listbox
25. listitem
26. log
27. main
28. marquee
29. math
30. menu
31. menubar
32. menuitem
33. menuitemcheckbox
34. menuitemradio
35. navigation
36. note
37. option
38. presentation
39. progressbar
40. radio
41. radiogroup
42. region
43. row
44. rowgroup
45. rowheader
46. scrollbar
47. search
48. separator
49. slider
50. spinbutton
51. status
52. tab
53. tablist
54. tabpanel
55. textbox
56. timer
57. toolbar
58. tooltip
59. tree
60. treegrid
61. treeitem

states and properties

1. aria-activedescendant
2. aria-atomic
3. aria-autocomplete
4. aria-busy (state)
5. aria-checked (state)
6. aria-controls
7. aria-describedby
8. aria-disabled (state)
9. aria-dropeffect
10. aria-expanded (state)
11. aria-flowto
12. aria-grabbed (state)
13. aria-haspopup
14. aria-hidden (state)
15. aria-invalid (state)
16. aria-label
17. aria-labelledby
18. aria-level
19. aria-live
20. aria-multiline
21. aria-multiselectable
22. aria-orientation
23. aria-owns
24. aria-posinset
25. aria-pressed (state)
26. aria-readonly
27. aria-relevant
28. aria-required
29. aria-selected (state)
30. aria-setsize
31. aria-sort
32. aria-valuemax
33. aria-valuemin
34. aria-valuenow
35. aria-valuetext

Introduction to ARIA

Web 2.0 applications are not accessible without additional standardized markup. The W3C WAI-ARIA specification suggests adding additional semantics to expose behavior to ATs. The semantics are a combination of roles, properties and states. Roles, such as a log, define structure or how a widget is expected to behave through pre-defined defaults. States and properties, such as a live region, add additional descriptive markup about a widget. ARIA became an official W3C specification as of December 2009 and exists to fill the gap between the transition from HTML4 to HTML5. The ARIA markup is planned to be included in the future HTML5 specification except where overlaps are found.

Properties are not expected to change in an application life cycle. States are expected to have their attributes modified and expose these changes in a meaningful way to AT. A role is a collection of attributes that define how an element is expected to behave. Roles should not be altered dynamically via the DOM as AT will probably not be able to handle this.

Roles Back to TOC

1. alertA message with important, and usually time-sensitive, information. Also see alertdialog and status.
2. alertdialogA type of dialog that contains an alert message, where initial focus goes to the dialog or an element within it. Also see alert and dialog.
3. applicationA region declared as a web application, as opposed to a web document.
4. articleA section of a page that consists of a composition that forms an independent part of a document, page, or site.
5. bannerA region that contains mostly site-oriented content, rather than page-specific content.
6. buttonAn input that allows for user-triggered actions when clicked or pressed.
7. checkboxA checkable input that has three possible values: true, false, or mixed.
8. columnheaderA cell containing header information for a column.
9. comboboxA presentation of a select; usually similar to a textbox where users can type ahead to select an option, or type to enter arbitrary text as a new item in the list. Also see listbox.
10. complementaryA supporting section of the document, designed to be complementary to the main content at a similar level in the DOM hierarchy, but remains meaningful when separated from the main content.
11. contentinfoA large perceivable region that contains information about the parent document.
12. definitionA definition of a term or concept.
13. dialogA dialog is an application window that is designed to interrupt the current processing of an application in order to prompt the user to enter information or require a response. Also see alertdialog.
14. directoryA list of references to members of a group, such as a static table of contents.
15. documentA region containing related information that is declared as document content, as opposed to a web application.
16. formA region of the document that represents a collection of form-associated elements, some of which can represent editable values that can be submitted to a server for processing.
17. gridA grid contains cells of tabular data arranged in rows and columns, like a table.
18. gridcellA cell in a grid or treegrid.
19. groupA set of user interface objects which are not intended be included in a page summary or table of contents by assistive technologies.
20. headingA heading for a section of the page.
21. imgA container for a collection of elements that form an image.
22. linkAn interactive reference to an internal or external resource that, when activated, causes the user agent to navigate to that resource.
23. listA group of non-interactive list items. Also see listbox.
24. listboxA widget that allows the user to select one or more items from a list of choices. Also see combobox and list.
25. listitemA single item in a list or directory.
26. logA type of live region where new information is added in meaningful order and old information may disappear. Also see marquee.
27. mainThe main content of a document.
28. marqueeA type of live region where non-essential information changes frequently. Also see log.
29. mathAn element that represents a mathematical expression.
30. menuA type of widget that offers a list of choices to the user.
31. menubarA presentation of menu that usually remains visible and is usually presented horizontally.
32. menuitemAn option in a group of choices contained by a menu or menubar.
33. menuitemcheckboxA checkable menuitem that has three possible values: true, false, or mixed.
34. menuitemradioA checkable menuitem in a group of menuitemradio roles, only one of which can be checked at a time.
35. navigationA collection of navigational elements (usually links) for navigating the document or related documents.
36. noteA section whose content is parenthetic or ancillary to the main content of the resource.
37. optionA selectable item in a select list.
38. presentationAn element whose implicit native role semantics will not be mapped to the accessibility API.
39. progressbarAn element that displays the progress status for tasks that take a long time.
40. radioA checkable input in a group of radio roles, only one of which can be checked at a time.
41. radiogroupA group of radio buttons.
42. regionA large perceivable section of a web page or document, that the author feels is important enough to be included in a page summary or table of contents, for example, an area of the page containing live sporting event statistics.
43. rowA row of cells in a grid.
44. rowgroupA group containing one or more row elements in a grid.
45. rowheaderA cell containing header information for a row in a grid.
46. scrollbarA graphical object that controls the scrolling of content within a viewing area, regardless of whether the content is fully displayed within the viewing area.
47. searchA landmark region that contains one or more widgets used to define and execute a search.
48. separatorA divider that separates and distinguishes sections of content or groups of menuitems.
49. sliderA user input where the user selects a value from within a given range.
50. spinbuttonA form of range that expects a user to select from amongst discrete choices.
51. statusA container whose content is advisory information for the user but is not important enough to justify an alert. Also see alert.
52. tabA grouping label providing a mechanism for selecting the tab content that is to be rendered to the user.
53. tablistA list of tab elements, which are references to tabpanel elements.
54. tabpanelA container for the resources associated with a tab, where each tab is contained in a tablist.
55. textboxInput that allows free-form text as their value.
56. timerA numerical counter which indicates an amount of elapsed time from a start point, or the time remaining until an end point.
57. toolbarA collection of commonly used function buttons represented in compact visual form.
58. tooltipA contextual popup that displays a description for an element.
59. treeA type of list that may contain sub-level nested groups that can be collapsed and expanded.
60. treegridA grid whose rows can be expanded and collapsed in the same manner as for a tree.
61. treeitemAn option item of a tree. This is an element within a tree that may be expanded or collapsed if it contains a sub-level group of treeitems.

States and Properties Back to TOC

• aria-activedescendantIdentifies the currently active descendant of a composite widget.
• aria-atomicIndicates whether the assistive technology will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute. Also see aria-relevant.
• aria-autocompleteIndicates whether user input completion suggestions are provided.
• aria-busy (state)Indicates whether a live region is currently being updated.
• aria-checked (state)Indicates the current “checked” Indicates the current “checked” state of checkboxes, radio buttons, and other widgets. Also see aria-pressed and aria-selected.
• aria-controlsIdentifies the element (or elements) whose contents or presence are controlled by the current element. Also see aria-owns.
• aria-describedbyIdentifies the element (or elements) that describes the object. Also see aria-labelledby.
• aria-disabled (state)Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. Also see aria-hidden and aria-readonly.
• aria-dropeffectIndicates what functions can be performed when the dragged object is released on the drop target. This allows an assistive technology to convey the possible drag options available to them including whether a pop-up menu of choices is provided by the application. Typically, drop effect functions can only be provided once an object has been grabbed for a drag operation as the drop effect functions available are dependent on the object being dragged.
• aria-expanded (state)Indicates whether an expandable/collapsible group of elements is currently expanded or collapsed.
• aria-flowtoIdentifies the next element (or elements) in the recommended reading order of content, overriding the general default to read in document source order.
• aria-grabbed (state)Indicates an element’s “grabbed” state in a drag-and-drop operation.
• aria-haspopupIndicates that the element has a popup context menu or sub-level menu.
• aria-hidden (state)Indicates that the element is not visible or perceivable to any user. Also see aria-disabled.
• aria-invalid (state)Indicates the entered value does not conform to the format expected by the application.
• aria-labelDefines a string value that labels the current element when included as an attribute of the current element. Also see aria-labelledby.
• aria-labelledbyIdentifies the element (or elements) that labels the current element. Also see aria-label and aria-describedby.
• aria-levelDefines the hierarchical level of an element within a structure.
• aria-liveIndicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.
• aria-multilineIndicates whether a text box accepts only a single line, or if it can accept multiline input.
• aria-multiselectableIndicates that the user may select more than one item from the current selectable descendants.
• aria-orientationIndicates whether the element and scrolling orientation is horizontal or vertical.
• aria-ownsIdentifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship. Also see aria-controls.
• aria-posinsetDefines an element’s number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. Also see aria-setsize.
• aria-pressed (state)Indicates the current “pressed” state of toggle buttons. Also see aria-checked and aria-selected.
• aria-readonly Indicates that the element is not editable, but is otherwise operable. Also see aria-disabled.
• aria-relevantIndicates what user agent change notifications (additions, removals, etc.) assistive technology will monitor within a live region. Also see aria-atomic.
• aria-requiredIndicates that user input is required on the element before a form may be submitted.
• aria-selected (state)Indicates the current “selected” state of various widgets. Also see aria-checked and aria-pressed.
• aria-setsizeDefines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. Also see aria-posinset.
• aria-sortIndicates if items in a table or grid are sorted in ascending or descending order.
• aria-valuemaxDefines the maximum allowed value for a range widget.
• aria-valueminDefines the minimum allowed value for a range widget.
• aria-valuenowDefines the current value for a range widget. Also see aria-valuetext.
• aria-valuetextDefines the human readable text alternative of aria-valuenow for a range widget.

Back to TOC