ARIA properties
Table of Contents
ARIA 1.1 defines multiple "properties" that can be applied to elements. Unlike ARIA states, most properties are likely to stay static when a page is loaded instead of changing with user interaction.
Properties are inserted into elements as follows: <element aria-property="value"></element> . Example:
<button aria-haspopup="true">
Options.
</button>A screenreader will announce this button with 'Options, button menu' or something similar.
There are 38 properties that can be used in ARIA. They fall into 4 categories as defined by the W3C. The categories are:
- Widget Attributes
- Properties that give information about user input elements.
- Live Region Attributes
- Properties that are specific to regions that will update while the page is being viewed.
- Drag-and-Drop Attributes
- Properties of drag-and-drop input elements.
- Relationship Attributes
- Properties that give information about elements' relationships to other elements.
Note: ARIA is constantly being updated by the W3C. Read the latest working draft.
The properties are given below, along with their category, brief description, and allowed value lists or type of input allowed.
List of ARIA properties
| Property (links to WAI-ARIA 1.1 specs) | Category | Description | Allowed Values (default values bolded) |
|---|---|---|---|
| aria-activedescendant | Relationship attributes | Currently active descendant of a composite widget | String - ID of descendant |
| aria-atomic | Live region attributes | Indicates whether assistive technologies will present the entire element (or only parts of it) when the element is changed | false, true |
| aria-autocomplete | Widget attributes | Defines if and how autocomplete suggestions are shown | none, both, inline, list |
| aria-colcount | Relationship attributes | Defines the total number of columns in a table, grid, or treegrid | integer |
| aria-colindex | Relationship attributes | Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid | integer |
| aria-colspan | Relationship attributes | Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid | integer |
| aria-controls | Relationship attributes | Element(s) controlled by current element | String/list - ID(s) of element(s) |
| aria-describedby | Relationship attributes | Element(s) that describe the current element | String/list - ID(s) of element(s) |
| aria-details | Relationship attributes | Identifies the element that provides a detailed, extended description for the object | String/list - ID(s) of element(s) |
| aria-dropeffect | Drag-and-drop attributes | * DEPRECATED * Defines what functions can be performed when a dragged object is released on the target | none, copy, execute, link, move, popup |
| aria-errormessage | Widget attributes | Identifies the element that provides an error message for the object | ID reference |
| aria-flowto | Relationship attributes | Next element(s) in alternate reading order | String/list - ID(s) of element(s) |
| aria-haspopup | Widget attributes | The element can trigger a popup context menu | false, true |
| aria-keyshortcuts | Widget attributes | Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element | String |
| aria-label | Widget attributes | Defines a label for the element (only used when label text not visible on screen) | String |
| aria-labelledby | Relationship attributes | Element(s) that label the current element | String/list - ID(s) of element(s) |
| aria-level | Widget attributes | Gives hierarchical level of the element within a structure such as a tree or nested items | Integer greater than or equal to 1 |
| aria-live | Live region attributes | Indicates an element will be updated and gives the type of updates the user can expect | off, assertive, polite |
| aria-modal | Widget attributes | Indicates whether an element is modal when displayed | false, *true |
| aria-multiline | Widget attributes | Text box accepts multiple lines of input, not just a single line | false, true |
| aria-multiselectable | Widget attributes | User can select more than one item in a list | false, true |
| aria-orientation | Widget attributes | Defines the element orientation | horizontal, vertical |
| aria-owns | Relationship attributes | Element(s) that are owned by the current element (and not denoted as such by the DOM) | String/list - ID(s) of element(s) |
| aria-placeholder | Widget attributes | Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value | String |
| aria-posinset | Relationship attributes | Element's position in a set of items | Integer |
| aria-readonly | Widget attributes | Element is not editable but is still readable | false, true |
| aria-relevant | Live region attributes | Defines what constitutes a update requiring notification in a live region | additions text, additions, all, removals, text |
| aria-required | Widget attributes | User input is required | false, true |
| aria-roledescription | Widget attributes | Defines a human-readable description for the role of an element | |
| aria-rowcount | Relationship attributes | Defines the total number of rows in a table, grid, or treegrid | integer |
| aria-rowindex | Relationship attributes | Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid | integer |
| aria-rowspan | Relationship attributes | Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid | integer |
| aria-setsize | Relationship attributes | Number of items in current set | integer |
| aria-sort | Widget attributes | Gives the direction that items are sorted in a table or grid column | none, ascending, descending, other |
| aria-valuemax | Widget attributes | Maximum allowed value for a range selector | Number |
| aria-valuemin | Widget attributes | Minimum allowed value for a range selector | Number |
| aria-valuenow | Widget attributes | Current value for a range selector | Number (between aria-valuemin and aria-valuemax) |
| aria-valuetext | Widget attributes | Human readable text alternative to a value for a range selector | String |