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 only modifies the accessibility tree, modifying how assistive technology presents the content to your users. ARIA doesn't change anything about an element's 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

    * `aria-autocomplete`
    * `aria-checked`
    * `aria-disabled`
    * `aria-errormessage`
    * `aria-expanded`
    * `aria-haspopup`
    * `aria-hidden`
    * `aria-invalid`
    * `aria-label`
    * `aria-level`
    * `aria-modal`
    * `aria-multiline`
    * `aria-multiselectable`
    * `aria-orientation`
    * `aria-placeholder`
    * `aria-pressed`
    * `aria-readonly`
    * `aria-required`
    * `aria-selected`
    * `aria-sort`
    * `aria-valuemax`
    * `aria-valuemin`
    * `aria-valuenow`
    * `aria-valuetext`
2. ### Live region attributes

    * `aria-busy`
    * `aria-live`
    * `aria-relevant`
    * `aria-atomic`
3. ### Drag-and-Drop attributes

    * `aria-dropeffect`
    * `aria-grabbed`
4. ### Relationship attributes

    * `aria-activedescendant`
    * `aria-colcount`
    * `aria-colindex`
    * `aria-colspan`
    * `aria-controls`
    * `aria-describedby`
    * `aria-description`
    * `aria-details`
    * `aria-errormessage`
    * `aria-flowto`
    * `aria-labelledby`
    * `aria-owns`
    * `aria-posinset`
    * `aria-rowcount`
    * `aria-rowindex`
    * `aria-rowspan`
    * `aria-setsize`
Global ARIA attributes
----------------------

Some states and properties apply to all HTML elements regardless of whether an ARIA role is applied. These are defined as "Global" attributes. Global states and properties are supported by all roles and base markup elements.

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

* `aria-atomic`
* `aria-busy`
* `aria-controls`
* `aria-current`
* `aria-describedby`
* `aria-description`
* `aria-details`
* `aria-disabled`
* `aria-dropeffect`
* `aria-errormessage`
* `aria-flowto`
* `aria-grabbed`
* `aria-haspopup`
* `aria-hidden`
* `aria-invalid`
* `aria-keyshortcuts`
* `aria-label`
* `aria-labelledby`
* `aria-live`
* `aria-owns`
* `aria-relevant`
* `aria-roledescription`

By "specifically disallowed," all the above attributes are global except for the `aria-label` and `aria-labelledby` properties, which are not allowed on elements with role `presentation` nor its 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-activedescendantThe `aria-activedescendant` attribute identifies the currently active element when focus is on a `composite` widget, `combobox`, `textbox`, `group`, or `application`.

aria-atomicIn 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-autocompleteThe `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-braillelabelThe global `aria-braillelabel` property defines a string value that labels the current element, which is intended to be converted into Braille.

aria-brailleroledescriptionThe global `aria-brailleroledescription` attribute defines a human-readable, author-localized abbreviated description for the role of an element intended to be converted into Braille.

aria-busyUsed 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-checkedThe `aria-checked` attribute indicates the current "checked" state of checkboxes, radio buttons, and other widgets.

aria-colcountThe `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-colindexThe `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-colindextextThe `aria-colindextext` attribute defines a human-readable text alternative of the numeric `aria-colindex`.

aria-colspanThe `aria-colspan` attribute defines the number of columns spanned by a cell or gridcell within a `table`, `grid`, or `treegrid`.

aria-controlsThe 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-currentA 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-describedbyThe global `aria-describedby` attribute identifies the element (or elements) that describes the element on which the attribute is set.

aria-descriptionThe global `aria-description` attribute defines a string value that describes or annotates the current element.

aria-detailsThe global `aria-details` attribute identifies the element (or elements) that provide additional information related to the object.

aria-disabledThe `aria-disabled` state indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.

aria-dropeffectThe global `aria-dropeffect` attribute indicates what functions may be performed when a dragged object is released on the drop target.

aria-errormessageThe `aria-errormessage` attribute on an object identifies the element that provides an error message for that object.

aria-expandedThe `aria-expanded` attribute is set on an element to indicate if a control is expanded or collapsed, and whether or not the controlled elements are displayed or hidden.

aria-flowtoThe 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-grabbedThe `aria-grabbed` state indicates an element's "grabbed" state in a drag-and-drop operation.

aria-haspopupThe `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-hiddenThe `aria-hidden` state indicates whether the element is exposed to an accessibility API.

aria-invalidThe `aria-invalid` state indicates the entered value does not conform to the format expected by the application.

aria-keyshortcutsThe global `aria-keyshortcuts` attribute indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.

aria-labelThe `aria-label` attribute defines a string value that labels an interactive element.

aria-labelledbyThe `aria-labelledby` attribute identifies the element (or elements) that labels the element it is applied to.

aria-levelThe `aria-level` attribute defines the hierarchical level of an element within a structure.

aria-liveThe global `aria-live` attribute indicates 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-modalThe `aria-modal` attribute indicates whether an element is modal when displayed.

aria-multilineThe `aria-multiline` attribute indicates whether a `textbox` accepts multiple lines of input or only a single line.

aria-multiselectableThe `aria-multiselectable` attribute indicates that the user may select more than one item from the current selectable descendants.

aria-orientationThe `aria-orientation` attribute indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.

aria-ownsThe `aria-owns` attribute identifies an element (or elements) in order to define a visual, functional, or contextual relationship between a parent and its child elements when the DOM hierarchy cannot be used to represent the relationship.

aria-placeholderThe `aria-placeholder` attribute defines a short hint (a word or short phrase) intended to help the user with data entry when a form control has no value. The hint can be a sample value or a brief description of the expected format.

aria-posinsetThe `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-pressedThe `aria-pressed` attribute indicates the current "pressed" state of a toggle button.

aria-readonlyThe `aria-readonly` attribute indicates that the element is not editable, but is otherwise operable.

aria-relevantUsed in ARIA live regions, the global `aria-relevant` attribute indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.

aria-requiredThe `aria-required` attribute indicates that user input is required on the element before a form may be submitted.

aria-roledescriptionThe `aria-roledescription` attribute defines a human-readable, author-localized description for the role of an element.

aria-rowcountThe `aria-rowcount` attribute defines the total number of rows in a table, grid, or treegrid.

aria-rowindexThe `aria-rowindex` attribute defines an element's position with respect to the total number of rows within a table, grid, or treegrid.

aria-rowindextextThe `aria-rowindextext` attribute defines a human-readable text alternative of `aria-rowindex`.

aria-rowspanThe `aria-rowspan` attribute defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.

aria-selectedThe `aria-selected` attribute indicates the current "selected" state of various widgets.

aria-setsizeThe `aria-setsize` attribute defines the number of items in the current set of listitems or treeitems when not all items in the set are present in the DOM.

aria-sortThe `aria-sort` attribute indicates if items in a table or grid are sorted in ascending or descending order.

aria-valuemaxThe `aria-valuemax` attribute defines the maximum allowed value for a range widget.

aria-valueminThe `aria-valuemin` attribute defines the minimum allowed value for a range widget.

aria-valuenowThe `aria-valuenow` attribute defines the current value for a `range` widget.

aria-valuetextThe `aria-valuetext` attribute defines the human-readable text alternative of `aria-valuenow` for a range widget.

See also
--------

* Using ARIA: roles, states, and properties