Skip to content.

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)CategoryDescriptionAllowed Values (default values bolded)
aria-activedescendantRelationship attributesCurrently active descendant of a composite widgetString - ID of descendant
aria-atomicLive region attributesIndicates whether assistive technologies will present the entire element (or only parts of it) when the element is changedfalse, true
aria-autocompleteWidget attributesDefines if and how autocomplete suggestions are shownnone, both, inline, list
aria-colcountRelationship attributesDefines the total number of columns in a table, grid, or treegridinteger
aria-colindexRelationship attributesDefines an element's column index or position with respect to the total number of columns within a table, grid, or treegridinteger
aria-colspanRelationship attributesDefines the number of columns spanned by a cell or gridcell within a table, grid, or treegridinteger
aria-controlsRelationship attributesElement(s) controlled by current elementString/list - ID(s) of element(s)
aria-describedbyRelationship attributesElement(s) that describe the current elementString/list - ID(s) of element(s)
aria-detailsRelationship attributesIdentifies the element that provides a detailed, extended description for the objectString/list - ID(s) of element(s)
aria-dropeffectDrag-and-drop attributes* DEPRECATED * Defines what functions can be performed when a dragged object is released on the targetnone, copy, execute, link, move, popup
aria-errormessageWidget attributesIdentifies the element that provides an error message for the objectID reference
aria-flowtoRelationship attributesNext element(s) in alternate reading orderString/list - ID(s) of element(s)
aria-haspopupWidget attributesThe element can trigger a popup context menufalse, true
aria-keyshortcutsWidget attributesIndicates keyboard shortcuts that an author has implemented to activate or give focus to an elementString
aria-labelWidget attributesDefines a label for the element (only used when label text not visible on screen)String
aria-labelledbyRelationship attributesElement(s) that label the current elementString/list - ID(s) of element(s)
aria-levelWidget attributesGives hierarchical level of the element within a structure such as a tree or nested itemsInteger greater than or equal to 1
aria-liveLive region attributesIndicates an element will be updated and gives the type of updates the user can expectoff, assertive, polite
aria-modalWidget attributesIndicates whether an element is modal when displayedfalse, *true
aria-multilineWidget attributesText box accepts multiple lines of input, not just a single linefalse, true
aria-multiselectableWidget attributesUser can select more than one item in a listfalse, true
aria-orientationWidget attributesDefines the element orientationhorizontal, vertical
aria-ownsRelationship attributesElement(s) that are owned by the current element (and not denoted as such by the DOM)String/list - ID(s) of element(s)
aria-placeholderWidget attributesDefines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no valueString
aria-posinsetRelationship attributesElement's position in a set of itemsInteger
aria-readonlyWidget attributesElement is not editable but is still readablefalse, true
aria-relevantLive region attributesDefines what constitutes a update requiring notification in a live regionadditions text, additions, all, removals, text
aria-requiredWidget attributesUser input is requiredfalse, true
aria-roledescriptionWidget attributesDefines a human-readable description for the role of an element
aria-rowcountRelationship attributesDefines the total number of rows in a table, grid, or treegridinteger
aria-rowindexRelationship attributesDefines an element's row index or position with respect to the total number of rows within a table, grid, or treegridinteger
aria-rowspanRelationship attributesDefines the number of rows spanned by a cell or gridcell within a table, grid, or treegridinteger
aria-setsizeRelationship attributesNumber of items in current setinteger
aria-sortWidget attributesGives the direction that items are sorted in a table or grid columnnone, ascending, descending, other
aria-valuemaxWidget attributesMaximum allowed value for a range selectorNumber
aria-valueminWidget attributesMinimum allowed value for a range selectorNumber
aria-valuenowWidget attributesCurrent value for a range selectorNumber (between aria-valuemin and aria-valuemax)
aria-valuetextWidget attributesHuman readable text alternative to a value for a range selectorString

Collection: Introduction to ARIA

  1. An in-depth guide to ARIA roles
  2. ARIA states
  3. ARIA properties