ARIA states and properties (attributes)

This page lists reference pages covering all theWAI-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:

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:

By "specifically disallowed," all the above attributes are global except for thearia-label andaria-labelledby properties, which are not allowed on elements with rolepresentation nor its synonymnone role.

Index of states and properties

The following are the reference pages covering theWAI-ARIA states and properties described on MDN.

ARIA: aria-activedescendant attribute: Thearia-activedescendant attribute identifies the currently active element when focus is on acomposite widget,combobox,textbox,group, orapplication.
ARIA: aria-atomic attribute: In ARIA live regions, the globalaria-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 thearia-relevant attribute.
ARIA: aria-autocomplete attribute: Thearia-autocomplete attribute indicates whether inputting text could trigger display of one or more predictions of the user's intended value for acombobox,searchbox, ortextbox and specifies how predictions will be presented if they are made.
ARIA: aria-braillelabel attribute: The globalaria-braillelabel property defines a string value that labels the current element, which is intended to be converted into Braille.
ARIA: aria-brailleroledescription attribute: The globalaria-brailleroledescription attribute defines a human-readable, author-localized abbreviated description for the role of an element intended to be converted into Braille.
ARIA: aria-busy attribute: Thearia-busy attribute is a global ARIA state that indicates whether an element is currently being modified.It helps assistive technologies understand that changes to the content are not yet complete, and that they may want to wait before informing users of the update.Whilearia-busy is commonly used inARIA live regions to delay announcements until updates are complete, it can also be used outside of live regions—for example, in widgets or feeds—to signal ongoing changes or loading.
ARIA: aria-checked attribute: Thearia-checked attribute indicates the current "checked" state of checkboxes, radio buttons, and other widgets.
ARIA: aria-colcount attribute: Thearia-colcount attribute defines the total number of columns in atable,grid, ortreegrid when not all columns are present in theDOM.
ARIA: aria-colindex attribute: Thearia-colindex attribute defines an element's column index or position with respect to the total number of columns within atable,grid, ortreegrid.
ARIA: aria-colindextext attribute: Thearia-colindextext attribute defines a human-readable text alternative of the numericaria-colindex.
ARIA: aria-colspan attribute: Thearia-colspan attribute defines the number of columns spanned by a cell or gridcell within atable,grid, ortreegrid.
ARIA: aria-controls attribute: The globalaria-controls property identifies the element (or elements) whose contents or presence are controlled by the element on which this attribute is set.
ARIA: aria-current attribute: A non-nullaria-current state on an element indicates that this element represents the current item within a container or set of related elements.
ARIA: aria-describedby attribute: The globalaria-describedby attribute identifies the element (or elements) that describes the element on which the attribute is set.
ARIA: aria-description attribute: The globalaria-description attribute defines a string value that describes or annotates the current element.
ARIA: aria-details attribute: The globalaria-details attribute identifies the element (or elements) that provide additional information related to the object.
ARIA: aria-disabled attribute: Thearia-disabled state indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
ARIA: aria-dropeffect attribute: The globalaria-dropeffect attribute indicates what functions may be performed when a dragged object is released on the drop target.
ARIA: aria-errormessage attribute: Thearia-errormessage attribute on an object identifies the element(s) that provides an error message for that object.
ARIA: aria-expanded attribute: Thearia-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: aria-flowto attribute: The globalaria-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: aria-grabbed attribute: Thearia-grabbed state indicates an element's "grabbed" state in a drag-and-drop operation.
ARIA: aria-haspopup attribute: Thearia-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: aria-hidden attribute: Thearia-hidden state indicates whether the element is exposed to an accessibility API.
ARIA: aria-invalid attribute: Thearia-invalid state indicates the entered value does not conform to the format expected by the application.
ARIA: aria-keyshortcuts attribute: The globalaria-keyshortcuts attribute indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.
ARIA: aria-label attribute: Thearia-label attribute defines a string value that can be used to name an element, as long as the element's role does notprohibit naming.
ARIA: aria-labelledby attribute: Thearia-labelledby attribute identifies the element (or elements) that labels the element it is applied to.
ARIA: aria-level attribute: Thearia-level attribute defines the hierarchical level of an element within a structure.
ARIA: aria-live attribute: The globalaria-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: aria-modal attribute: Thearia-modal attribute indicates whether an element is modal when displayed.
ARIA: aria-multiline attribute: Thearia-multiline attribute indicates whether atextbox accepts multiple lines of input or only a single line.
ARIA: aria-multiselectable attribute: Thearia-multiselectable attribute indicates that the user may select more than one item from the current selectable descendants.
ARIA: aria-orientation attribute: Thearia-orientation attribute indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.
ARIA: aria-owns attribute: Thearia-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: aria-placeholder attribute: Thearia-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: aria-posinset attribute: Thearia-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: aria-pressed attribute: Thearia-pressed attribute indicates the current "pressed" state of a toggle button.
ARIA: aria-readonly attribute: Thearia-readonly attribute indicates that the element is not editable, but is otherwise operable.
ARIA: aria-relevant attribute: Used in ARIA live regions, the globalaria-relevant attribute indicates what notifications the user agent will trigger when theaccessibility tree within a live region is modified.
ARIA: aria-required attribute: Thearia-required attribute indicates that user input is required on the element before a form may be submitted.
ARIA: aria-roledescription attribute: Thearia-roledescription attribute defines a human-readable, author-localized description for the role of an element.
ARIA: aria-rowcount attribute: Thearia-rowcount attribute defines the total number of rows in a table, grid, or treegrid.
ARIA: aria-rowindex attribute: Thearia-rowindex attribute defines an element's position with respect to the total number of rows within a table, grid, or treegrid.
ARIA: aria-rowindextext attribute: Thearia-rowindextext attribute defines a human-readable text alternative ofaria-rowindex.
ARIA: aria-rowspan attribute: Thearia-rowspan attribute defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.
ARIA: aria-selected attribute: Thearia-selected attribute indicates the current "selected" state of various widgets.
ARIA: aria-setsize attribute: Thearia-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: aria-sort attribute: Thearia-sort attribute indicates if items in a table or grid are sorted in ascending or descending order.
ARIA: aria-valuemax attribute: Thearia-valuemax attribute defines the maximum allowed value for a range widget.
ARIA: aria-valuemin attribute: Thearia-valuemin attribute defines the minimum allowed value for a range widget.
ARIA: aria-valuenow attribute: Thearia-valuenow attribute defines the current value for arange widget.
ARIA: aria-valuetext attribute: Thearia-valuetext attribute defines the human-readable text alternative ofaria-valuenow for a range widget.

Help improve MDN

Learn how to contribute

This page was last modified onMar 6, 2025 byMDN contributors.

View this page on GitHub •Report a problem with this content

Movatterモバイル変換

ARIA states and properties (attributes)

ARIA attribute types

Widget attributes

Live region attributes

Drag-and-Drop attributes

Relationship attributes

Global ARIA attributes

Index of states and properties

See also

Help improve MDN