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:
-
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
-
Live region attributes
-
Drag-and-Drop attributes
-
Relationship attributes
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-activedescendant
The
aria-activedescendant
attribute identifies the currently active element when focus is on acomposite
widget,combobox
,textbox
,group
, orapplication
.- 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 thearia-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 acombobox
,searchbox
, ortextbox
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 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 atable
,grid
, ortreegrid
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 atable
,grid
, ortreegrid
.- aria-colindextext
The
aria-colindextext
attribute defines a human-readable text alternative of the numericaria-colindex
.- aria-colspan
The
aria-colspan
attribute defines the number of columns spanned by a cell or gridcell within atable
,grid
, ortreegrid
.- 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 the controlled 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.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 can be used to name an element, as long as the element's role does not prohibit naming.- aria-labelledby
The
aria-labelledby
attribute identifies the element (or elements) that labels the element it is applied to.- aria-level
The
aria-level
attribute defines the hierarchical level of an element within a structure.- aria-live
The 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-modal
The
aria-modal
attribute indicates whether an element is modal when displayed.- aria-multiline
The
aria-multiline
attribute indicates whether atextbox
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-owns
The
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-placeholder
The
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-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-relevant
Used 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-required
The
aria-required
attribute indicates that user input is required on the element before a form may be submitted.- aria-roledescription
The
aria-roledescription
attribute defines a human-readable, author-localized description for the role of an element.- aria-rowcount
The
aria-rowcount
attribute defines the total number of rows in a table, grid, or treegrid.- aria-rowindex
The
aria-rowindex
attribute defines an element's position with respect to the total number of rows within a table, grid, or treegrid.- aria-rowindextext
The
aria-rowindextext
attribute defines a human-readable text alternative ofaria-rowindex
.- aria-rowspan
The
aria-rowspan
attribute defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.- aria-selected
The
aria-selected
attribute indicates the current "selected" state of various widgets.- aria-setsize
The
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-sort
The
aria-sort
attribute indicates if items in a table or grid are sorted in ascending or descending order.- 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 arange
widget.- aria-valuetext
The
aria-valuetext
attribute defines the human-readable text alternative ofaria-valuenow
for a range widget.