ARIA attribute reflection
The ariaActiveDescendantElement property of the Element interface represents the current active element when focus is on a composite widget, combobox, textbox, group, or application.
The aria-activedescendant topic contains additional information about how the attribute and property should be used.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 135 | 135 | 136 | 16.4 | 135 | 16.4 | |
| The ariaAtomic property of the Element interface reflects the value of the aria-atomic attribute, which indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute. | 81 | 81 | 119 | 12.1 | 81 | 12.2 |
| The ariaAutoComplete property of the Element interface reflects the value of the aria-autocomplete attribute, which 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 would be presented if they were made. | 81 | 81 | 119 | 12.1 | 81 | 12.2 |
| The ariaBrailleLabel property of the Element interface reflects the value of the aria-braillelabel attribute, which defines the ARIA braille label of the element. | 107 | 107 | 125 | 18 | 107 | 18 |
| The ariaBrailleRoleDescription property of the Element interface reflects the value of the aria-brailleroledescription attribute, which defines the ARIA braille role description of the element. | 107 | 107 | 125 | 18 | 107 | 18 |
| The ariaBusy property of the Element interface reflects the value of the aria-busy attribute, which indicates whether an element is being modified, as assistive technologies may want to wait until the modifications are complete before exposing them to the user. | 81 | 81 | 119 | 12.1 | 81 | 12.2 |
| The ariaChecked property of the Element interface reflects the value of the aria-checked attribute, which indicates the current "checked" state of checkboxes, radio buttons, and other widgets that have a checked state. | 81 | 81 | 119 | 12.1 | 81 | 12.2 |
| The ariaColCount property of the Element interface reflects the value of the aria-colcount attribute, which defines the number of columns in a table, grid, or treegrid. | 81 | 81 | 119 | 12.1 | 81 | 12.2 |
| The ariaColIndex property of the Element interface reflects the value of the aria-colindex attribute, which defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid. | 81 | 81 | 119 | 12.1 | 81 | 12.2 |
| The ariaColIndexText property of the Element interface reflects the value of the aria-colindextext attribute, which defines a human readable text alternative of aria-colindex. | 128 | 128 | 119 | 26.2 | 128 | 26.2 |
| The ariaColSpan property of the Element interface reflects the value of the aria-colspan attribute, which defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid. | 81 | 81 | 119 | 12.1 | 81 | 12.2 |
| The ariaControlsElements property of the Element interface is an array containing the elements that are controlled by the element it is applied to. For example, this might be set on a combobox to indicate the element that it pops up, or on a scrollbar to indicate the ID of the element it controls. | 135 | 135 | 136 | 16.4 | 135 | 16.4 |
| The ariaCurrent property of the Element interface reflects the value of the aria-current attribute, which indicates the element that represents the current item within a container or set of related elements. | 81 | 81 | 119 | 12.1 | 81 | 12.2 |
| The ariaDescribedByElements property of the Element interface is an array containing the element (or elements) that provide an accessible description for the element it is applied to. The accessible description is similar to the accessible label (see Element/ariaLabelledByElements), but provides more verbose information. | 135 | 135 | 136 | 16.4 | 135 | 16.4 |
| The ariaDescription property of the Element interface reflects the value of the aria-description attribute, which defines a string value that describes or annotates the current element. | 83 | 83 | 119 | 17.4 | 83 | 17.4 |
| The ariaDetailsElements property of the Element interface is an array containing the element (or elements) that provide an accessible details for the element it is applied to. The accessible details are similar to the accessible description (see Element/ariaDescribedByElements), but provides more verbose information. | 135 | 135 | 136 | 16.4 | 135 | 16.4 |
| The ariaDisabled property of the Element interface reflects the value of the aria-disabled attribute, which indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. | 81 | 81 | 119 | 12.1 | 81 | 12.2 |
| The ariaErrorMessageElements property of the Element interface is an array containing the element (or elements) that provide an error message for the element it is applied to. | 135 | 135 | 136 | 16.4 | 135 | 16.4 |
| The ariaExpanded property of the Element interface reflects the value of the aria-expanded attribute, which indicates whether a grouping element owned or controlled by this element is expanded or collapsed. | 81 | 81 | 119 | 12.1 | 81 | 12.2 |
| The ariaFlowToElements property of the Element interface is an array containing the element (or elements) that provide an alternate reading order of content, overriding the general default reading order at the user's discretion. If just one element is provided this is the next element in the reading order. If multiple elements are provided, then each… | 135 | 135 | 136 | 16.4 | 135 | 16.4 |
| The ariaHasPopup property of the Element interface reflects the value of the aria-haspopup attribute, which indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. | 81 | 81 | 119 | 12.1 | 81 | 12.2 |
| The ariaInvalid property of the Element interface reflects the value of the aria-invalid attribute. Relevant for the application, checkbox, combobox, gridcell, listbox, radiogroup, slider, spinbutton, textbox, and tree roles, it indicates to the accessibility API whether the entered value does not conform to the format expected by the application. | 102 | 102 | 119 | 12.1 | 102 | 12.2 |
| The ariaKeyShortcuts property of the Element interface reflects the value of the aria-keyshortcuts attribute, which indicates keyboard shortcuts that an author has implemented to activate or give focus to an element. | 81 | 81 | 119 | 12.1 | 81 | 12.2 |
| The ariaLabel property of the Element interface reflects the value of the aria-label attribute, which defines a string value that labels the current element. | 81 | 81 | 119 | 12.1 | 81 | 12.2 |
| The ariaLabelledByElements property of the Element interface is an array containing the element (or elements) that provide an accessible name for the element it is applied to. | 135 | 135 | 136 | 16.4 | 135 | 16.4 |
| The ariaLevel property of the Element interface reflects the value of the aria-level attribute, which defines the hierarchical level of an element within a structure. | 81 | 81 | 119 | 12.1 | 81 | 12.2 |
| The ariaLive property of the Element interface reflects the value of the aria-live attribute, which 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. | 81 | 81 | 119 | 12.1 | 81 | 12.2 |
| The ariaModal property of the Element interface reflects the value of the aria-modal attribute, which indicates whether an element is modal when displayed. Applying the aria-modal property to an element with role="dialog" replaces the technique of using aria-hidden on the background for informing assistive technologies that content outside a dialog is inert. | 81 | 81 | 119 | 12.1 | 81 | 12.2 |
| The ariaMultiLine property of the Element interface reflects the value of the aria-multiline attribute, which indicates whether a text box accepts multiple lines of input or only a single line. | 81 | 81 | 119 | 12.1 | 81 | 12.2 |
| The ariaMultiSelectable property of the Element interface reflects the value of the aria-multiselectable attribute, which indicates that the user may select more than one item from the current selectable descendants. | 81 | 81 | 119 | 12.1 | 81 | 12.2 |
| The ariaOrientation property of the Element interface reflects the value of the aria-orientation attribute, which indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous. | 81 | 81 | 119 | 12.1 | 81 | 12.2 |
| The ariaOwnsElements property of the Element interface is an array containing the element (or elements) that define a visual, functional, or contextual relationship between a parent element that it is applied to, and its child elements. This is used when the DOM hierarchy cannot be used to represent the relationship, and it would not otherwise be available… | | | 136 | 16.4 | | 16.4 |
| The ariaPlaceholder property of the Element interface reflects the value of the aria-placeholder attribute, which defines a short hint intended to aid the user with data entry when the control has no value. | 81 | 81 | 119 | 12.1 | 81 | 12.2 |
| The ariaPosInSet property of the Element interface reflects the value of the aria-posinset attribute, which defines an element's number or position in the current set of listitems or treeitems. | 81 | 81 | 119 | 12.1 | 81 | 12.2 |
| The ariaPressed property of the Element interface reflects the value of the aria-pressed attribute, which indicates the current "pressed" state of toggle buttons. | 81 | 81 | 119 | 12.1 | 81 | 12.2 |
| The ariaReadOnly property of the Element interface reflects the value of the aria-readonly attribute, which indicates that the element is not editable, but is otherwise operable. | 81 | 81 | 119 | 12.1 | 81 | 12.2 |
ariaRelevant Non-standard The ariaRelevant property of the Element interface reflects the value of the aria-relevant attribute, which indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified. This is used to describe what changes in an aria-live region are relevant and should be announced. | 81 | 81 | 119 | 12.1 | 81 | 12.2 |
| The ariaRequired property of the Element interface reflects the value of the aria-required attribute, which indicates that user input is required on the element before a form may be submitted. | 81 | 81 | 119 | 12.1 | 81 | 12.2 |
| The ariaRoleDescription property of the Element interface reflects the value of the aria-roledescription attribute, which defines a human-readable, author-localized description for the role of an element. | 81 | 81 | 119 | 12.1 | 81 | 12.2 |
| The ariaRowCount property of the Element interface reflects the value of the aria-rowcount attribute, which defines the total number of rows in a table, grid, or treegrid. | 81 | 81 | 119 | 12.1 | 81 | 12.2 |
| The ariaRowIndex property of the Element interface reflects the value of the aria-rowindex attribute, which defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid. | 81 | 81 | 119 | 12.1 | 81 | 12.2 |
| The ariaRowIndexText property of the Element interface reflects the value of the aria-rowindextext attribute, which defines a human readable text alternative of aria-rowindex. | 128 | 128 | 119 | 26.2 | 128 | 26.2 |
| The ariaRowSpan property of the Element interface reflects the value of the aria-rowspan attribute, which defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid. | 81 | 81 | 119 | 12.1 | 81 | 12.2 |
| The ariaSelected property of the Element interface reflects the value of the aria-selected attribute, which indicates the current "selected" state of elements that have a selected state. | 81 | 81 | 119 | 12.1 | 81 | 12.2 |
| The ariaSetSize property of the Element interface reflects the value of the aria-setsize attribute, which defines the number of items in the current set of listitems or treeitems. | 84 | 84 | 119 | 12.1 | 84 | 12.2 |
| The ariaSort property of the Element interface reflects the value of the aria-sort attribute, which indicates if items in a table or grid are sorted in ascending or descending order. | 81 | 81 | 119 | 12.1 | 81 | 12.2 |
| The ariaValueMax property of the Element interface reflects the value of the aria-valuemax attribute, which defines the maximum allowed value for a range widget. | 81 | 81 | 119 | 12.1 | 81 | 12.2 |
| The ariaValueMin property of the Element interface reflects the value of the aria-valuemin attribute, which defines the minimum allowed value for a range widget. | 81 | 81 | 119 | 12.1 | 81 | 12.2 |
| The ariaValueNow property of the Element interface reflects the value of the aria-valuenow attribute, which defines the current value for a range widget. | 81 | 81 | 119 | 12.1 | 81 | 12.2 |
| The ariaValueText property of the Element interface reflects the value of the aria-valuetext attribute, which defines the human-readable text alternative of aria-valuenow for a range widget. | 81 | 81 | 119 | 12.1 | 81 | 12.2 |
| The role property of the Element interface returns the explicitly set WAI-ARIA role for the element. | 103 | 103 | 119 | 12.1 | 103 | 12.2 |
| The ariaActiveDescendantElement property of the ElementInternals interface represents the current active element when focus is on a composite widget, combobox, textbox, group, or application. | 135 | 135 | 136 | 16.4 | 135 | 16.4 |
| The ariaAtomic property of the ElementInternals interface reflects the value of the aria-atomic attribute, which indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute. | 81 | 81 | 119 | 16.4 | 81 | 16.4 |
| The ariaAutoComplete property of the ElementInternals interface reflects the value of the aria-autocomplete attribute, which 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 would be presented if they were made. | 81 | 81 | 119 | 16.4 | 81 | 16.4 |
| The ariaBrailleLabel property of the ElementInternals interface reflects the value of the aria-braillelabel attribute, which defines the ARIA braille label of the element. | 107 | 107 | 125 | 18 | 107 | 18 |
| The ariaBrailleRoleDescription property of the ElementInternals interface reflects the value of the aria-brailleroledescription attribute, which defines the ARIA braille role description of the element. | 107 | 107 | 125 | 18 | 107 | 18 |
| The ariaBusy property of the ElementInternals interface reflects the value of the aria-busy attribute, which indicates whether an element is being modified, as assistive technologies may want to wait until the modifications are complete before exposing them to the user. | 81 | 81 | 119 | 16.4 | 81 | 16.4 |
| The ariaChecked property of the ElementInternals interface reflects the value of the aria-checked attribute, which indicates the current "checked" state of checkboxes, radio buttons, and other widgets that have a checked state. | 81 | 81 | 119 | 16.4 | 81 | 16.4 |
| The ariaColCount property of the ElementInternals interface reflects the value of the aria-colcount attribute, which defines the number of columns in a table, grid, or treegrid. | 81 | 81 | 119 | 16.4 | 81 | 16.4 |
| The ariaColIndex property of the ElementInternals interface reflects the value of the aria-colindex attribute, which defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid. | 81 | 81 | 119 | 16.4 | 81 | 16.4 |
| The ariaColIndexText property of the ElementInternals interface reflects the value of the aria-colindextext attribute, which defines a human readable text alternative of aria-colindex. | 128 | 128 | 119 | | 128 | |
| The ariaColSpan property of the ElementInternals interface reflects the value of the aria-colspan attribute, which defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid. | 81 | 81 | 119 | 16.4 | 81 | 16.4 |
| The ariaControlsElements property of the ElementInternals interface is an array containing the element (or elements) that are controlled by the element it is applied to. For example, this might be set on a combobox to indicate the element that it pops up, or on a scrollbar to indicate the ID of the element it controls. | 135 | 135 | 136 | 16.4 | 135 | 16.4 |
| The ariaCurrent property of the ElementInternals interface reflects the value of the aria-current attribute, which indicates the element that represents the current item within a container or set of related elements. | 81 | 81 | 119 | 16.4 | 81 | 16.4 |
| The ariaDescribedByElements property of the ElementInternals interface is an array containing the element (or elements) that provide an accessible description for the element it is applied to. The accessible description is similar to the accessible label (see Element/ariaLabelledByElements), but provides more verbose information. | 135 | 135 | 136 | 16.4 | 135 | 16.4 |
| The ariaDescription property of the ElementInternals interface reflects the value of the aria-description attribute, which defines a string value that describes or annotates the current element. | 83 | 83 | 119 | | 83 | |
| The ariaDetailsElements property of the ElementInternals interface is an array containing the element (or elements) that provide an accessible details for the element it is applied to. The accessible details are similar to the accessible description (see ElementInternals/ariaDescribedByElements), but provides more verbose information. | 135 | 135 | 136 | 16.4 | 135 | 16.4 |
| The ariaDisabled property of the ElementInternals interface reflects the value of the aria-disabled attribute, which indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. | 81 | 81 | 119 | 16.4 | 81 | 16.4 |
| The ariaErrorMessageElements property of the ElementInternals interface is an array containing the element (or elements) that provide an error message for the element it is applied to. | 135 | 135 | 136 | 16.4 | 135 | 16.4 |
| The ariaExpanded property of the ElementInternals interface reflects the value of the aria-expanded attribute, which indicates whether a grouping element owned or controlled by this element is expanded or collapsed. | 81 | 81 | 119 | 16.4 | 81 | 16.4 |
| The ariaFlowToElements property of the ElementInternals interface is an array containing the element (or elements) that provide an alternate reading order of content, overriding the general default reading order at the user's discretion. If just one element is provided this is the next element in the reading order. If multiple elements are provided, then… | 135 | 135 | 136 | 16.4 | 135 | 16.4 |
| The ariaHasPopup property of the ElementInternals interface reflects the value of the aria-haspopup attribute, which indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. | 81 | 81 | 119 | 16.4 | 81 | 16.4 |
| The ariaInvalid property of the ElementInternals interface reflects the value of the aria-invalid attribute. Relevant for the application, checkbox, combobox, gridcell, listbox, radiogroup, slider, spinbutton, textbox, and tree roles, it indicates to the accessibility API whether the entered value does not conform to the format expected by the application. | 102 | 102 | 119 | 16.4 | 102 | 16.4 |
| The ariaKeyShortcuts property of the ElementInternals interface reflects the value of the aria-keyshortcuts attribute, which indicates keyboard shortcuts that an author has implemented to activate or give focus to an element. | 81 | 81 | 119 | 16.4 | 81 | 16.4 |
| The ariaLabel property of the ElementInternals interface reflects the value of the aria-label attribute, which defines a string value that labels the current Element. | 81 | 81 | 119 | 16.4 | 81 | 16.4 |
| The ariaLabelledByElements property of the ElementInternals interface is an array containing the element (or elements) that provide an accessible name for the element it is applied to. | 135 | 135 | 136 | 16.4 | 135 | 16.4 |
| The ariaLevel property of the ElementInternals interface reflects the value of the aria-level attribute, which defines the hierarchical level of an element within a structure. | 81 | 81 | 119 | 16.4 | 81 | 16.4 |
| The ariaLive property of the ElementInternals interface reflects the value of the aria-live attribute, which 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. | 81 | 81 | 119 | 16.4 | 81 | 16.4 |
| The ariaModal property of the ElementInternals interface reflects the value of the aria-modal attribute, which indicates whether an element is modal when displayed. | 81 | 81 | 119 | 16.4 | 81 | 16.4 |
| The ariaMultiLine property of the ElementInternals interface reflects the value of the aria-multiline attribute, which indicates whether a text box accepts multiple lines of input or only a single line. | 81 | 81 | 119 | 16.4 | 81 | 16.4 |
| The ariaMultiSelectable property of the ElementInternals interface reflects the value of the aria-multiselectable attribute, which indicates that the user may select more than one item from the current selectable descendants. | 81 | 81 | 119 | 16.4 | 81 | 16.4 |
| The ariaOrientation property of the ElementInternals interface reflects the value of the aria-orientation attribute, which indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous. | 81 | 81 | 119 | 16.4 | 81 | 16.4 |
| The ariaOwnsElements property of the ElementInternals interface is an array containing the element (or elements) that define a visual, functional, or contextual relationship between a parent element that it is applied to, and its child elements. This is used when the shadow DOM hierarchy cannot be used to represent the relationship, and it would not… | | | 136 | 16.4 | | 16.4 |
| The ariaPlaceholder property of the ElementInternals interface reflects the value of the aria-placeholder attribute, which defines a short hint intended to aid the user with data entry when the control has no value. | 81 | 81 | 119 | 16.4 | 81 | 16.4 |
| The ariaPosInSet property of the ElementInternals interface reflects the value of the aria-posinset attribute, which defines an element's number or position in the current set of listitems or treeitems. | 81 | 81 | 119 | 16.4 | 81 | 16.4 |
| The ariaPressed property of the ElementInternals interface reflects the value of the aria-pressed attribute, which indicates the current "pressed" state of toggle buttons. | 81 | 81 | 119 | 16.4 | 81 | 16.4 |
| The ariaReadOnly property of the ElementInternals interface reflects the value of the aria-readonly attribute, which indicates that the element is not editable, but is otherwise operable. | 81 | 81 | 119 | 16.4 | 81 | 16.4 |
| The ariaRequired property of the ElementInternals interface reflects the value of the aria-required attribute, which indicates that user input is required on the element before a form may be submitted. | 81 | 81 | 119 | 16.4 | 81 | 16.4 |
| The ariaRoleDescription property of the ElementInternals interface reflects the value of the aria-roledescription attribute, which defines a human-readable, author-localized description for the role of an element. | 81 | 81 | 119 | 16.4 | 81 | 16.4 |
| The ariaRowCount property of the ElementInternals interface reflects the value of the aria-rowcount attribute, which defines the total number of rows in a table, grid, or treegrid. | 81 | 81 | 119 | 16.4 | 81 | 16.4 |
| The ariaRowIndex property of the ElementInternals interface reflects the value of the aria-rowindex attribute, which defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid. | 81 | 81 | 119 | 16.4 | 81 | 16.4 |
| The ariaRowIndexText property of the ElementInternals interface reflects the value of the aria-rowindextext attribute, which defines a human readable text alternative of aria-rowindex. | 128 | 128 | 119 | | 128 | |
| The ariaRowSpan property of the ElementInternals interface reflects the value of the aria-rowspan attribute, which defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid. | 81 | 81 | 119 | 16.4 | 81 | 16.4 |
| The ariaSelected property of the ElementInternals interface reflects the value of the aria-selected attribute, which indicates the current "selected" state of elements that have a selected state. | 81 | 81 | 119 | 16.4 | 81 | 16.4 |
| The ariaSetSize property of the ElementInternals interface reflects the value of the aria-setsize attribute, which defines the number of items in the current set of listitems or treeitems. | 84 | 84 | 119 | 16.4 | 84 | 16.4 |
| The ariaSort property of the ElementInternals interface reflects the value of the aria-sort attribute, which indicates if items in a table or grid are sorted in ascending or descending order. | 81 | 81 | 119 | 16.4 | 81 | 16.4 |
| The ariaValueMax property of the ElementInternals interface reflects the value of the aria-valuemax attribute, which defines the maximum allowed value for a range widget. | 81 | 81 | 119 | 16.4 | 81 | 16.4 |
| The ariaValueMin property of the ElementInternals interface reflects the value of the aria-valuemin attribute, which defines the minimum allowed value for a range widget. | 81 | 81 | 119 | 16.4 | 81 | 16.4 |
| The ariaValueNow property of the ElementInternals interface reflects the value of the aria-valuenow attribute, which defines the current value for a range widget. | 81 | 81 | 119 | 16.4 | 81 | 16.4 |
| The ariaValueText property of the ElementInternals interface reflects the value of the aria-valuetext attribute, which defines the human-readable text alternative of aria-valuenow for a range widget. | 81 | 81 | 119 | 16.4 | 81 | 16.4 |
| The role property of the ElementInternals interface returns the WAI-ARIA role for the element. For example, a checkbox might have role="checkbox". It reflects the role attribute; it does not return the element's implicit ARIA role, if any, unless explicitly set. | 103 | 103 | 119 | 16.4 | 103 | 16.4 |
Use cases
-
Using ARIA attribute reflection
The ariaActiveDescendantElement property of the Element interface represents the current active element when focus is on a composite widget, combobox, textbox, group, or application.
Cautions
- May not be supported in older browsers.
Implementation notes
- Some APIs require a secure context (HTTPS) or user activation. Check the requirements before use.