WAI-ARIA stands for Web Accessibility Initiative – Accessible Rich Internet Applications. WAI-ARIA help achieve the accessibility of complex widgets & dynamic content developed with Java Script, HTML, Ajax & other related technologies. Since March 20th 2014 WAI-ARIA is a W3C recommendation & it is being adapted widely by the developer community.
You could think of ARIA as a suite of attributes to be included in your usual HTML code, these additional attributes will help the assistive technologies understand the relationships, states & properties in user interface components. In this way ARIA helps developers create applications that are usable by people with disability. ARIA attributes communicate the role, state & property symantics to assistive technologies via the accessibility API s implemented in browsers.
ARIA Roles
| Roles |
Summary |
Reference |
|---|---|---|
| alert | A message with important, and usually time-sensitive, information. | Alert |
| alertdialog | A type of dialog that contains an alert message, where initial focus goes to an element within the dialog. | alertdialog |
| application | A region declared as a web application, as opposed to a web document. | application |
| article | A section of a page that consists of a composition that forms an independent part of a document, page, or site. | article |
| banner | A region that contains mostly site-oriented content, rather than page-specific content. | banner |
| button | An input that allows for user-triggered actions when clicked or pressed. | button |
| cell | A cell in a tabular container. | cell |
| checkbox | A checkable input that has three possible values: true, false, or mixed. | checkbox |
| columnheader | A cell containing header information for a column. | columnheader |
| combobox | A 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. | combobox |
| command | A form of widget that performs an action but does not receive input data. | command |
| complementary | A 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. | complementary |
| composite | A widget that may contain navigable descendants or owned children. | composite |
| contentinfo | A large perceivable region that contains information about the parent document. | contentinfo |
| definition | A definition of a term or concept. | definition |
| dialog | 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. | dialog |
| directory | A list of references to members of a group, such as a static table of contents. | directory |
| document | A region containing related information that is declared as document content, as opposed to a web application. | document |
| feed | A scrollable list of articles where scrolling may cause articles to be added to or removed from either end of the list. | feed |
| figure | A perceivable section of content that typically contains a graphical document, images, code snippets, or example text. The parts of a figure MAY be user-navigable. | figure |
| form | A landmark region that contains a collection of items and objects that, as a whole, combine to create a form. | form |
| grid | An interactive control which contains cells of tabular data arranged in rows and columns, like a table. | grid |
| gridcell | A cell in a grid or treegrid. | gridcell |
| group | A set of user interface objects which are not intended to be included in a page summary or table of contents by assistive technologies. | group |
| heading | A heading for a section of the page. | heading |
| img | A container for a collection of elements that form an image. | img |
| input | A generic type of widget that allows user input. | input |
| landmark | A region of the page intended as a navigational landmark. | landmark |
| link | An interactive reference to an internal or external resource that, when activated, causes the user agent to navigate to that resource. | link |
| list | A group of non-interactive list items. | list |
| listbox | that allows the user to select one or more items from a list of choices | listbox |
| listitem | A single item in a list or directory. | listitem |
| log | A type of live region where new information is added in meaningful order and old information may disappear. | log |
| main | The main content of a document. | main |
| marquee | A type of live region where non-essential information changes frequently | marquee |
| math | Content that represents a mathematical expression. | math |
| menu | A type of widget that offers a list of choices to the user. | menu |
| menubar | A presentation of menu that usually remains visible and is usually presented horizontally. | menubar |
| menuitem | An option in a set of choices contained by a menu or menubar. | menuitem |
| menuitemcheckbox | A menuitem with a checkable state whose possible values are true, false, or mixed. | menuitemcheckbox |
| menuitemradio | A checkable menuitem in a set of elements with role menuitemradio, only one of which can be checked at a time. | menuitemradio |
| navigation | A collection of navigational elements (usually links) for navigating the document or related documents. | navigation |
| note | A section whose content is parenthetic or ancillary to the main content of the resource. | note |
| option | A selectable item in a select list. | option |
| presentation | An element whose implicit native role semantics will not be mapped to the accessibility API. | presentation |
| progressbar | An element that displays the progress status for tasks that take a long time. | progressbar |
| radio | A checkable input in a group of radio roles, only one of which can be checked at a time. | radio |
| radiogroup | A group of radio buttons. | radiogroup |
| range | An input representing a range of values that can be set by the user. | range |
| region | A large perceivable section of a web page or document, that is important enough to be included in a page summary or table of contents. | region |
| roletype | The base role from which all other roles in this taxonomy inherit. | roletype |
| row | A row of cells in a grid. | row |
| rowgroup | A group containing one or more row elements in a grid. | rowgroup |
| rowheader | A cell containing header information for a row in a grid. | rowheader |
| scrollbar | A graphical object that controls the scrolling of content within a viewing area. | scrollbar |
| search | A landmark region that contains a collection of items and objects that, as a whole, combine to create a search facility. | search |
| section | A renderable structural containment unit in a document or application | section |
| sectionhead | A structure that labels or summarizes the topic of its related section. | sectionhead |
| select | A structure that labels or summarizes the topic of its related section. | select |
| separator | A divider that separates and distinguishes sections of content or groups of menu items | separator |
| slider | A user input where the user selects a value from within a given range. | slider |
| spinbutton | A form of range that expects the user to select from among discrete choices. | spinbutton |
| status | A container whose content is advisory information for the user but is not important enough to justify an alert, often but not necessarily presented as a status bar. | status |
| structure | A document structural element. | structure |
| tab | A grouping label providing a mechanism for selecting the tab content that is to be rendered to the user. | tab |
| tablist | A list of tab elements, which are references to tabpanel elements. | tablist |
| tabpanel | A container for the resources associated with a tab, where each tab is contained in a tablist. | tabpanel |
| textbox | Input that allows free-form text as its value. | textbox |
| timer | A type of live region containing a numerical counter which indicates an amount of elapsed time from a start point, or the time remaining until an end point. | timer |
| toolbar | A collection of commonly used function buttons or controls represented in compact visual form. | toolbar |
| tooltip | A contextual popup that displays a description for an element. | tooltip |
| tree | A type of list that may contain sub-level nested groups that can be collapsed and expanded. | tree |
| treegrid | A grid whose rows can be expanded and collapsed in the same manner as for a tree. | treegrid |
| treeitem | An option item of a tree | treeitem |
| widget | An interactive component of a graphical user interface (GUI). | widget |
| window | A browser or application window. | window |
| none | An element whose implicit native role semantics will not be mapped to the accessibility API. | none |
| term | A word or phrase with a corresponding definition. | term |
ARIA States
| States | summary | reference |
|---|---|---|
| aria-busy | Indicates whether an element, and its subtree, are currently being updated. | aria-busy |
| aria-checked | Indicates the current “checked” state of checkboxes, radio buttons, and other widgets. | aria-checked |
| aria-disabled | Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. | aria-disabled |
| aria-expanded | Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. | aria-expanded |
| aria-grabbed | Indicates an element’s “grabbed” state in a drag-and-drop operation. | aria-grabbed |
| aria-hidden | Indicates that the element and all of its descendants are not visible or perceivable to any user as implemented by the author. | aria-hidden |
| aria-invalid | Indicates the entered value does not conform to the format expected by the application. | aria-invalid |
| aria-pressed | Sets or retrieves the pressed state of a button that can be toggled. | aria-pressed |
| aria-selected | Sets or retrieves the selection state of the element. | aria-selected |
| aria-current | Indicates the element that represents the current item within a container or set of related elements. | aria-current |
ARIA Properties
| Properties | Summary | Reference |
|---|---|---|
|
aria-activedescendant |
Identifies the currently active descendant of a composite widget. | aria-activedescendant |
| aria-atomic | Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute. | aria-atomic |
| aria-autocomplete | Indicates whether user input completion suggestions are provided. | aria-autocomplete |
| aria-controls | Identifies the element (or elements) whose contents or presence are controlled by the current element. | aria-controls |
| aria-describedby | Identifies the element (or elements) that describes the object. | aria-describedby |
| aria-dropeffect | Indicates what functions can be performed when the dragged object is released on the drop target. | aria-dropeffect |
| aria-flowto | Identifies the next element (or elements) in an alternate reading order of content which, at the user’s discretion, allows assistive technology to override the general default of reading in document source order. | aria-flowto |
| aria-haspopup | Indicates that the element has a popup context menu or sub-level menu. | aria-haspopup |
| aria-label | Defines a string value that labels the current element. | aria-label |
| aria-labelledby | Identifies the element (or elements) that labels the current element. | aria-labelledby |
| aria-level | Defines the hierarchical level of an element within a structure. | aria-level |
| aria-live | Sets or retrieves how assistive technology announces updates to live regions. | aria-live |
| aria-multiline | Indicates whether a text box accepts multiple lines of input or only a single line | aria-multiline |
| aria- multiselectable | Indicates that the user may select more than one item from the current selectable descendants. | aria-multiselectable |
| aria-orientation | Indicates that the user may select more than one item from the current selectable descendants. | aria-orientation |
| aria-owns | Sets or retrieves a list of child objects, including elements that are not direct descendants of the current object. | aria-owns |
| aria-posinset | Sets or retrieves the current position of an item within a set. Not required if all elements in the set are present in the DOM. | aria-posinset |
| aria-readonly | Sets or retrieves the read-only state of this element | aria-readonly |
| aria-relevant | Sets or retrieves which changes to a live region are relevant. | aria-relevant |
| aria-required | Indicates that user input is required on the element before a form may be submitted. | aria-required |
| aria-setsize | Sets or retrieves the set size of this element. Not required if all elements in the set are present in the DOM. | aria-setsize |
| aria-sort | Indicates if items in a table or grid are sorted in ascending or descending order. | aria-sort |
| aria-valuemax | Sets or retrieves the maximum value that a user can provide. | aria-valuemax |
| aria-valuemin | Sets or retrieves the minimum value that a user can provide. | aria-valuemin |
| aria-valuenow | Sets or retrieves the current value of the element. | aria-valuenow |
| aria-valuetext | Defines the human readable text alternative of aria-valuenow for a range widget. | aria-valuetext |
References
Disclaimer
All the material provided on the WAI-ARIA cheat sheet is copied from the web from different locations. Most of the content is intact & nothing has been modified by Digital A11Y team. All the definitions & examples provided for each WAI-ARIA Role, State & Property is taken from the WAI-ARIA authoring practice. All the Roles, States & Properties contain a link to the WAI-ARIA authoring practice document. For more information on the license please check the links below from W3C
Awesome Article Raghava 🙂 Well planned all contents in one sheet 🙂 I liked the idea 🙂