ARIA States and Properties

This page lists reference pages covering all the WAI-ARIA attributes discussed on MDN.

ARIA attributes enable modifying an element's states and properties as defined in the accessibility tree.

Note: ARIA is only modify the accessibility tree for any element and therefore how assistive technology presents the content to your users. ARIA doesn't change anything about an elements function or behavior. When not using semantic HTML elements for their intended purpose and default functionality, you must use JavaScript to manage behavior, focus, and ARIA states.

ARIA attribute types

There are 4 categories of ARIA states and properties:

  1. Widget Attributes

  2. Live Region Attributes

  3. Drag-and-Drop Attributes

  4. Relationship Attributes

Global ARIA attributes

Some states and properties are applicable to all host language elements regardless of whether a role is applied. These are defined as "Global" attributes. Global states and properties are supported by all roles and by all base markup elements.

Many of the above attributes are global, meaning they can be included on any element unless specifically disallowed:

By "specifically disallowed", all the above attributes are global except for aria-label and aria-labelledby properties which are not allowed on elements with role presentation nor it's synonym none role.

States and properties defined on MDN

The following are the reference pages covering the WAI-ARIA states and properties discussed on MDN.

aria-activedescendant
The aria-activedescendant attribute identifies the currently active element when focus is on a composite widget, combobox, textbox, group, or application.
aria-atomic
In ARIA live regions, the global aria-atomic attribute indicates whether assistive technologies such as a screen reader will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.
aria-autocomplete
The aria-autocomplete attribute indicates whether inputting text could trigger display of one or more predictions of the user's intended value for a combobox, searchbox, or textbox and specifies how predictions will be presented if they are made.
aria-braillelabel
The global aria-braillelabel property defines a string value that labels the current element, which is intended to be converted into Braille.
aria-brailleroledescription
The global aria-brailleroledescription attribute defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille.
aria-busy
Used in ARIA live regions, the global aria-busy state indicates an element is being modified and that assistive technologies may want to wait until the changes are complete before informing the user about the update.
aria-checked
The aria-checked attribute indicates the current "checked" state of checkboxes, radio buttons, and other widgets.
aria-colcount
The aria-colcount attribute defines the total number of columns in a table, grid, or treegrid when not all columns are present in the DOM.
aria-colindex
The aria-colindex attribute defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.
aria-colindextext
The aria-colindextext attribute defines a human readable text alternative of the numeric aria-colindex.
aria-colspan
The aria-colspan attribute defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.
aria-controls
The global aria-controls property identifies the element (or elements) whose contents or presence are controlled by the element on which this attribute is set.
aria-current
A non-null aria-current state on an element indicates that this element represents the current item within a container or set of related elements.
aria-describedby
The global aria-describedby attribute identifies the element (or elements) that describes the element on which the attribute is set.
aria-description
The global aria-description attribute defines a string value that describes or annotates the current element.
aria-details
The global aria-details attribute identifies the element (or elements) that provide additional information related to the object.
aria-disabled
The aria-disabled state indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
aria-dropeffect
The global aria-dropeffect attribute indicates what functions may be performed when a dragged object is released on the drop target.
aria-errormessage
The aria-errormessage attribute on an object identifies the element that provides an error message for that object.
aria-expanded
The aria-expanded attribute is set on an element to indicate if a control is expanded or collapsed, and whether or not its child elements are displayed or hidden.
aria-flowto
The global aria-flowto attribute identifies the next element (or elements) in an alternate reading order of content. This allows assistive technology to override the general default of reading in document source order at the user's discretion.
aria-grabbed
The aria-grabbed state indicates an element's "grabbed" state in a drag-and-drop operation.
aria-haspopup
The aria-haspopup attribute indicates the availability and type of interactive popup element that can be triggered by the element on which the attribute is set.
aria-hidden
The aria-hidden state indicates whether the element is exposed to an accessibility API.
aria-invalid
The aria-invalid state indicates the entered value does not conform to the format expected by the application.
aria-keyshortcuts
The global aria-keyshortcuts attribute indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.
aria-label
The aria-label attribute defines a string value that labels an interactive element.
aria-level
The aria-level attribute defines the hierarchical level of an element within a structure.
aria-multiline
The aria-multiline attribute indicates whether a textbox accepts multiple lines of input or only a single line.
aria-multiselectable
The aria-multiselectable attribute indicates that the user may select more than one item from the current selectable descendants.
aria-orientation
The aria-orientation attribute indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.
aria-posinset
The aria-posinset attribute defines an element's number or position in the current set of listitems or treeitems when not all items are present in the DOM.
aria-pressed
The aria-pressed attribute indicates the current "pressed" state of a toggle button.
aria-readonly
The aria-readonly attribute indicates that the element is not editable, but is otherwise operable.
aria-valuemax
The aria-valuemax attribute defines the maximum allowed value for a range widget.
aria-valuemin
The aria-valuemin attribute defines the minimum allowed value for a range widget.
aria-valuenow
The aria-valuenow attribute defines the current value for a range widget.
aria-valuetext
The aria-valuetext attribute defines the human readable text alternative of aria-valuenow for a range widget.

See also