ARIA CHEATSHEET
ARIA and Accessibility
Accessible Rich Internet Applications is a standard created by W3C to ensure that accessibility can be incorporated into various applications and web sites by filling the gaps within the other standards. JavaScript and CSS are applied to html elements to make the site more responsive to technologies that assist disabled or incapacitated people, including screen readers and keyboard based navigation.
Roles
Roles define the purpose of an element. Roles use main areas of the site or application as landmarks. Some examples are banner roles, navigation and search roles.
- Abstract roles
- Abstract roles are only intended for use by browsers to help organize and streamline a document.
<input>: /*The input abstract role is a generic type of widget that allows user. input.*/
<section>: /* The section abstract role is superclass role for renderable structural containment components.*/
Note: Don't use abstract roles in your sites and applications. They are for use by browsers. They are included for reference only. - Document Structure roles
- Document roles are used to provide a structural description for a section of content.
[toolbar]: /*The toolbar role defines the containing element as a collection of commonly used function buttons or controls represented in a compact visual form.*/
math: /*The math role indicates that the content represents a mathematical expression.*/ - Landmark Roles
- Landmark roles provide a way to identify the organization and structure of a web page.
<banner>: /*A banner landmark role overwrites the implicit ARIA role of the container element upon which it is applied.*/
<form> /*A form landmark identifies a region of content that contains a collection of items and objects that, as a whole, combine to create a form when no other named landmark is appropriate*/ - Live Region Roles
- Live Region roles are used to define elements with content that will be dynamically changed.
alert: /*The alert role is for important, and usually time-sensitive, information. The alert is a type of status processed as an atomic live region.*/
log: /*The log role is used to identify an element that creates a live region where new information is added in a meaningful order and old information may disappear.*/ - Widget Roles
- The various widget role are used to define common interactive patterns.
scrollbar: /*A scrollbar is a graphical object that controls the scrolling of content within a viewing area.*/
searchbox: /*The searchbox role indicates an element is a type of textbox intended for specifying search criteria.*/ - Window Roles
- Window roles define sub-windows to the main document window, within the same window.
alertdialog: /*The alertdialog role is to be used on modal alert dialogs that interrupt a user's workflow to communicate an important message and require a response.*/
dialog: /*The dialog role is used to mark up an HTML based application dialog or window that separates content or UI from the rest of the web application or page.*/
ARIA standards Roles
Properties
Properties, along with states provide more details about a relationship between elements. When grouped together as ARIA attributes. Unlike states, properties do not change often, but can be changed if that is required.
- Widget Attributes
- aria-errormessage: /*The aria-errormessage attribute references another element that contains custom error message text.*/
aria-haspopup: /*The aria-haspopup properties indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. */
aria-label: /*The aria-label property defines a string value that labels the current element. */ - Live Region Attributes
- assertive: /*Indicates that updates to the region have the highest priority and should be presented the user immediately..*/
off (default): /*Indicates that updates to the region should not be presented to the user unless the used is currently focused on that region.*/
polite: /*Indicates that updates to the region should be presented at the next graceful opportunity, such as at the end of speaking the current sentence or when the user pauses typing.*/ - Drag-and-Drop Attributes
- aria-dropeffect; copy: /*A duplicate of the source object will be dropped into the target.*/
execute: /*A function supported by the drop target is executed, using the drag source as an input.*/
link: /*A reference or shortcut to the dragged object will be created in the target object.*/ - Relationship Attributes
- aria-rowcount: /*The aria-rowcount property Defines the total number of rows in a table, grid, or treegrid. */
aria-rowindex: /*The aria-rowindex property defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid. */
aria-setsize: /*The aria-setsize property 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. */
ARIA standards Properties
States
The state of an object is dynamic because it changes with user interaction and automated processes, including toggle switches and checkboxes. A state of an object can be managed, or controlled by the user and unmanaged, which are defined by the developer.
- Widget attributes
- aria-checked: /*The aria-checked indicates the current "checked" state of checkboxes, radio buttons, and other widgets.*/
- Live region attributes
- aria-busy: /*The aria-busy indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user.*/
- Drag-and-drop attributes
- aria-grabbed: /*The aria-grabbed state indicates an element's "grabbed" state in a drag-and-drop operation.*/
ARIA standards States