HTML ARIA

52 in total

WAI-ARIA (Accessible Rich Internet Applications) adds the role attribute and a family of aria-* states and properties that describe the meaning, state and relationships of elements to assistive technology. Below are all 52 ARIA attributes, each with its values and accessible examples. The first rule of ARIA is to prefer a native HTML element when one exists — reach for ARIA only when it does not.

Name	Description
aria-activedescendant	Identifies the currently active descendant in a composite widget that manages focus.
aria-atomic	Indicates whether a live region is announced as a whole or only the changed parts.
aria-autocomplete	Indicates what kind of autocomplete a text input or combobox provides.
aria-braillelabel	Provides a braille-specific accessible name, used only on refreshable braille displays.
aria-brailleroledescription	Provides a braille-specific role description, used only on refreshable braille displays.
aria-busy	Indicates that an element is being updated and not yet ready to be announced.
aria-checked	Indicates the checked state of checkboxes, radios and switches.
aria-colcount	Defines the total number of columns in a table, grid or treegrid.
aria-colindex	Defines a cell or column's position within the total columns of a table or grid.
aria-colindextext	A human-readable text alternative for aria-colindex (ARIA 1.3).
aria-colspan	Defines the number of columns a cell spans in a table or grid.
aria-controls	Identifies the element(s) whose contents or presence this element controls.
aria-current	Marks the current item within a set of related elements, such as the current page in navigation.
aria-describedby	Provides an accessible description by referencing the id of one or more elements.
aria-description	Provides an accessible description from a string (ARIA 1.3).
aria-details	References an element that provides extended, structured details about this element.
aria-disabled	Indicates an element is perceivable but disabled, so it is not editable or operable.
aria-errormessage	References the element that contains the validation error message for a field.
aria-expanded	Indicates whether a collapsible element controlled by this one is expanded or collapsed.
aria-flowto	Suggests an alternative reading order by pointing to the next element(s).
aria-haspopup	Indicates that an element triggers a popup such as a menu, listbox or dialog.
aria-hidden	Hides an element and its subtree from assistive technology (but not visually).
aria-invalid	Indicates that the value of a field has failed validation.
aria-keyshortcuts	Lists the keyboard shortcuts that activate or focus an element.
aria-label	Provides an accessible name for an element using a string of text.
aria-labelledby	Names an element by referencing the id of one or more other elements.
aria-level	Defines the hierarchical level of an element within a structure.
aria-live	Marks a region whose dynamic updates should be announced by assistive technology.
aria-modal	Indicates that a dialog blocks interaction with the rest of the page.
aria-multiline	Indicates whether a textbox accepts multiple lines of input.
aria-multiselectable	Indicates that a widget allows more than one item to be selected.
aria-orientation	Indicates whether a widget is oriented horizontally or vertically.
aria-owns	Defines a parent/child relationship between elements that the DOM structure does not.
aria-placeholder	A short hint shown in an empty input to help the user enter data.
aria-posinset	Defines an item's position within a set when not all items are in the DOM.
aria-pressed	Indicates the pressed state of a toggle button.
aria-readonly	Indicates that the value of a widget is not editable but is otherwise operable.
aria-relevant	Specifies which types of changes in a live region should be announced.
aria-required	Indicates that user input is required on a widget before submission.
aria-roledescription	Provides a human-readable, author-defined description of an element's role.
aria-rowcount	Defines the total number of rows in a table, grid or treegrid.
aria-rowindex	Defines a row's position within the total rows of a table or grid.
aria-rowindextext	A human-readable text alternative for aria-rowindex (ARIA 1.3).
aria-rowspan	Defines the number of rows a cell spans in a table or grid.
aria-selected	Indicates the selected state of an item in a set such as tabs or options.
aria-setsize	Defines the total number of items in a set when not all are in the DOM.
aria-sort	Indicates whether a table column is sorted, and in which direction.
aria-valuemax	The maximum allowed value of a range widget.
aria-valuemin	The minimum allowed value of a range widget.
aria-valuenow	The current value of a range widget such as a slider or progress bar.
aria-valuetext	A human-readable text alternative for the current value of a range widget.
role	Defines the semantic role of an element for assistive technology when no native element conveys it.

References