Cheatography
Login Register

WAI-ARIA 1.1 Cheat Sheet

A cheat sheet in English by jreiche
A11y Accessability Wai Wai-aria Aria Ada Wcag
28,161 views 4,798 downloads 13 Feb 2017 History
PRs
Download
3.7 avg · 0 ratings

ARIA Abstract Roles

A form of widget that performs an action but does not receive input data.
A widget that may contain navigable descen­dants or owned children.
A generic type of widget that allows user input.
A region of the page intended as a naviga­tional landmark.
An input repres­enting a range of values that can be set by the user.
The base role from which all other roles in this taxonomy inherit.
A renderable structural contai­nment unit in a document or applic­ation.
A structure that labels or summarizes the topic of its related section.
A form widget that allows the user to make selections from a set of choices.
A document structural element.
An intera­ctive component of a graphical user interface (GUI).
A browser or applic­ation window.
The roles above are used to support the WAI-ARIA role taxonomy for the purpose of defining general role concepts.

Widget Roles

A message with important, and usually time-s­ens­itive, inform­ation. See relate­d a­ler­tdi­alo­g a­nd ­status.
alert()
A type of dialog that contains an alert message, where initial focus goes to an element within the dialog. See relate­d a­ler­t a­nd ­dialog.
An input that allows for user-t­rig­gered actions when clicked or pressed. See relate­d link.
<button>
<input type="submit">
<input type="reset">
<input type="image">
A checkable input that has three possible values­: t­rue­, f­alse, or mixed.
<input type="checkbox">
A presen­tation of a select; usually similar to a text­box­ where users can type ahead to select an option, or type to enter arbitrary text as a new item in the list. See relate­d l­istbox.
<select>
HTML5 <input>
A dialog is an applic­ation window that is designed to interrupt the current processing of an applic­ation in order to prompt the user to enter inform­ation or require a response. See relate­d a­ler­tdi­alog.
A grid is an intera­ctive control which contains cells of tabular data arranged in rows and columns, like a table.
<table>
A cell in a grid or treegrid.
<td>
An intera­ctive reference to an internal or external resource that, when activated, causes the user agent to navigate to that resource. See relate­d b­utton.
<a href...>
<area>
A widget that allows the user to select one or more items from a list of choices. See relate­d c­omb­obo­x a­nd ­list.
A type of live region where new inform­ation is added in meaningful order and old inform­ation may disappear. See relate­d m­arquee.
A type of live region where non-es­sential inform­ation changes freque­ntly. See relate­d log.
A type of widget that offers a list of choices to the user.
A presen­tation of men­u that usually remains visible and is usually presented horizo­ntally.
An option in a set of choices contained by a menu­ or­ me­nubar.
A values are tr­ue,­ false, or mixed.
A checkable role m­enu­ite­mradio, only one of which can be checked at a time.
A selectable item in a sele­ct ­list.
<option>
An element that displays the progress status for tasks that take a long time.
<progress>
A checkable input in a group of rad­io ­roles, only one of which can be checked at a time.
<input type="radio">
A group of rad­io ­but­tons.
A graphical object that controls the scrolling of content within a viewing area, regardless of whether the content is fully displayed within the viewing area.
A user input where the user selects a value from within a given range.
<input type="range">
A form of ran­ge that expects the user to select from among discrete choices.
A container whose content is advisory inform­ation for the user but is not important enough to justify an alert, often but not necess­arily presented as a status bar. See relate­d a­lert.
<output>
A grouping label providing a mechanism for selecting the tab content that is to be rendered to the user.
A list of elements, which are references to tab­pan­el ­ele­ments.
A container for the resources associated with a tab, where each t­ab is contained in a tablist.
Input that allows free-form text as its value.
<input type="text|password|email">
<textarea>
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.
A contextual popup that displays a descri­ption for an element.
A type of lis­t that may contain sub-level nested groups that can be collapsed and expanded.
A grid­ whose rows can be expanded and collapsed in the same manner as for a tree.
An option item of a element within a tree that may be expanded or collapsed if it contains a sub-level group of tre­eit­em ­ele­ments.
The roles above act as standalone user interface widgets or as part of larger, composite widgets.

Document Structure Roles

A section of a page that consists of a compos­ition that forms an indepe­ndent part of a document, page, or site.
<article>
A cell containing header inform­ation for a column.
<th scope="col">
A definition of a term or concept.
A list of references to members of a group, such as a static table of contents.
A region containing related inform­ation that is declared as document content, as opposed to a web ap­pli­cation.
<body>
A set of user interface objects which are not intended to be included in a page summary or table of contents by assistive techno­logies.
<fieldset>
<optgroup>
A heading for a section of the page.
<h1>, <h2>
(aria-level must be set appropriately)
A container for a collection of elements that form an image.
<img>
A group of non-in­ter­active list items. See relate­d l­istbox.
<ul>, <ol>
A single item in a list or directory.
<li>
Content that represents a mathem­atical expres­sion.
A section whose content is parent­hetic or ancillary to the main content of the resource.
An element whose implicit native role semantics will not be mapped to the access­ibi­lit­y API.
alt=""
A large percei­vable section of a web page or document, that 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 statis­tics.
<div>
<frame>
<section>
A row of cells in a grid.
<tr>
A group containing one or more row elements in a grid.
<thead>
<tbody>
<tfoot>
A cell containing header inform­ation for a row in a grid.
<th scope="row">
A divider that separates and distin­guishes sections of content or groups of menuitems.
<br>
A collection of commonly used function buttons or controls repres­ented in compact 
<menu type="toolbar">
The roles above describe structures that organize content in a page. Document structures are not usually intera­ctive.

Landmark Roles

A region declared as a web applic­ation, as opposed to a web document.
A region that contains mostly site-o­riented content, rather than page-s­pecific content.
<header>
<div id="header">
A supporting section of the document, designed to be comple­mentary to the main content at a similar level in the DOM hierarchy, but remains meaningful when separated from the main content.
<as­ide>
A large percei­vable region that contains inform­ation about the parent document.
<fo­ote­r>
A landmark region that contains a collection of items and objects that, as a whole, combine to create a form. See related search.
<fo­rm>
The main content of a document.
<div id="­con­ten­t">
<ma­in>
A collection of naviga­tional elements (usually links) for navigating the document or related documents.
<na­v>
A landmark region that contains a collection of items and objects that, as a whole, combine to create a search facility. See related form.
The roles above are regions of the page intended as naviga­tional landmarks. All of these roles inherit from the landmark base type and, with the exception of applic­ation, all are imported from the Role Attribute [ROLE]. The roles are included here in order to make them clearly part of the WAI-ARIA Role taxonomy.

ARIA Global States and Properties

Indicates whether assistive techno­logies will present all, or only parts of, the changed region based on the change notifi­cations defined by the aria-r­elevant attri­bute. See related aria-r­elevant.
Indicates whether an element, and its subtree, are currently being updated.
Identifies the element (or elements) whose contents or presence are controlled by the current element. See related aria-owns.
Identifies the element (or elements) that describes the object. See related aria-l­abe­lledby.
Indicates that the element is percei­vable but disabled, so it is not editable or otherwise operable. See related aria-h­idden and aria-r­eadonly.
Indicates what functions can be performed when the dragged object is released on the drop target. This allows assistive techno­logies to convey the possible drag options available to users, including whether a pop-up menu of choices is provided by the applic­ation. 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.
Identifies the next element (or elements) in an alternate reading order of content which, at the user's discre­tion, allows assistive technology to override the general default of reading in document source order.
Indicates an elemen­t's "­gra­bbe­d" state in a drag-a­nd-drop operation.
Indicates that the element has a popup context menu or sub-level menu.
Indicates that the element and all of its descen­dants are not visible or percei­vable to any­ user as implem­ented by the author. See related aria-d­isabled.
Indicates the entered value does not conform to the format expected by the applic­ation.
Defines a string value that labels the current element. See related aria-l­abe­lledby.
Identifies the element (or elements) that labels the current element. See related aria-label and aria-d­esc­ribedby.
Indicates that an element will be updated, and describes the types of updates the user agents, assistive techno­logies, and user can expect from the live region.
Identifies an element (or elements) in order to define a visual, functi­onal, or contextual parent­/child relati­onship betwee­n D­OM ­ele­ments where the DOM hierarchy cannot be used to represent the relati­onship. See related aria-c­ontrols.
Indicates what user agent change notifi­cations (addit­ions, removals, etc.) assistive techno­logies will receive within a live region. See related aria-a­tomic.

Widget Attributes

Indicates whether user input completion sugges­tions are provided.
Indicates the current "­che­cke­d" state of checkb­oxes, radio buttons, and other widgets. See related aria-p­ressed and aria-s­elected.
Indicates that the element is percei­vable but disabled, so it is not editable or otherwise operable. See related aria-h­idden and aria-r­eadonly.
Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.
Indicates that the element has a popup context menu or sub-level menu.
Indicates that the element and all of its descen­dants are not visible or percei­vable to any­ user as implem­ented by the author. See related aria-d­isabled.
Indicates the entered value does not conform to the format expected by the applic­ation.
Defines a string value that labels the current element. See related aria-l­abe­lledby.
Defines the hierar­chical level of an element within a structure.
Indicates whether a text box accepts multiple lines of input or only a single line.
Indicates that the user may select more than one item from the current selectable descen­dants.
Indicates whether the element and orient­ation is horizontal or vertical.
Indicates the current "­pre­sse­d" state of toggle buttons. See related aria-c­hecked and aria-s­elected.
Indicates that the element is not editable, but is otherwise operable. See related aria-d­isabled.
Indicates that user input is required on the element before a form may be submitted.
Indicates the current "­sel­ect­ed" state of various widgets. See related aria-c­hecked and aria-p­ressed.
Indicates if items in a table or grid are sorted in ascending or descending order.
Defines the maximum allowed value for a range widget.
Defines the minimum allowed value for a range widget.
Defines the current value for a range widget. See related aria-v­alu­etext.
Defines the human readable text altern­ative of widget.
This section contains attributes specific to common user interface elements found on GUI systems or in rich internet applic­ations which receive user input and process user actions. These attributes are used to support the widget roles.

Live Region Attributes

Indicates whether assistive techno­logies will present all, or only parts of, the changed region based on the change notifi­cations defined by the aria-r­elevant attri­bute. See related aria-r­elevant.
Indicates whether an element, and its subtree, are currently being updated.
Indicates that an element will be updated, and describes the types of updates the user agents, assistive techno­logies, and user can expect from the live region.
Indicates what user agent change notifi­cations (addit­ions, removals, etc.) assistive techno­logies will receive within a live region. See related aria-a­tomic.
This section contains attributes specific to live regions in RIAs. These attributes may be applied to any element. The purpose of these attributes is to indicate that content changes may occur without the element having focus, and to provide assistive techno­logies with inform­ation on how to process those content updates. Some roles specify a default value for the aria-live attribute specific to that role. An example of a live region is a ticker section that lists updating stock quotes.

Drag-a­nd-Drop Attributes

Indicates what functions can be performed when the dragged object is released on the drop target. This allows assistive techno­logies to convey the possible drag options available to users, including whether a pop-up menu of choices is provided by the applic­ation. 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.
Indicates an elemen­t's "­gra­bbe­d" state in a drag-a­nd-drop operation.
This section lists attributes which indicate inform­ation about drag-a­nd-drop interface elements, such as draggable elements and their drop targets. Drop target inform­ation will be rendered visually by the author and provided to assistive techno­logies through an alternate modality.

Relati­onship Attributes

Identifies the currently active descendant of a widget.
Identifies the element (or elements) whose contents or presence are controlled by the current element. See related aria-owns.
Identifies the element (or elements) that describes the object. See related aria-l­abe­lledby.
Identifies the next element (or elements) in an alternate reading order of content which, at the user's discre­tion, allows assistive technology to override the general default of reading in document source order.
Identifies the element (or elements) that labels the current element. See related aria-label and aria-d­esc­ribedby.
Identifies an element (or elements) in order to define a visual, functi­onal, or contextual parent­/child relati­onship betwee­n D­OM ­ele­ments where the DOM hierarchy cannot be used to represent the relati­onship. See related aria-c­ontrols.
Defines an elemen­t'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. See related aria-s­etsize.
Defines 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. See related aria-p­osinset.
This section lists attributes that indicate relati­onships or associ­ations between elements which cannot be readily determined from the document structure.

Badges

Nice Cheat Sheet Good Cheat Sheet Downloaded from Unusual Locations × 1

Comments

No comments yet.

Cheatography n. The art of mapping complex subjects into clear, instantly navigable reference guides.