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-only label that stands in for the accessible name on 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's column position within the full table or grid.
aria-colindextext	Gives a cell a column label, such as AA, to go with its aria-colindex (WAI-ARIA 1.3 draft).
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 (WAI-ARIA 1.3 draft).
aria-details	References an element that provides extended, structured details about this element.
aria-disabled	Marks an element as disabled for assistive technology without disabling it.
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	Tells assistive technology that content outside a dialog isn't available.
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 and child relationship that the DOM structure can't represent.
aria-placeholder	A short hint describing the expected value of an empty input, for assistive technology only.
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	Tells assistive technology that a widget's value can't be changed, but locks nothing itself.
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	Supplies a readable row label, such as a chess rank, alongside aria-rowindex (WAI-ARIA 1.3 draft).
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 or row 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