Skip to content.

ARIA states

Table of Contents

ARIA 1.1 defines multiple "states" that can be applied to elements. States are likely to change as the user interacts with the page.

States are inserted into elements as follows: <element aria-state="value"></element>. Example:

<span aria-busy="true">
This element is currently being updated.

There are 10 states that can be used in ARIA. They fall into 3 categories as defined by the W3C. The categories are:

Widget attributes
States that give information about user input elements.
Live region attributes
States that are specific to regions that will update while the page is being viewed.
Drag-and-drop attributes
States of drag-and-drop input elements.

Note: ARIA is constantly being updated by the W3C. Read the latest working draft.

The states are given below, along with their category, brief description, and allowed value lists. Many states allow for either true or false, and when "undefined" is chosen it means the state is not applicable to the current element.

List of ARIA states

State (links to WAI-ARIA 1.1 specs)CategoryDescriptionAllowed Values (default values bolded)
aria-busyLive region attributesThe element is currently being updatedfalse, true
aria-checkedWidget attributesThe input item is checkedundefined, false, mixed, true
aria-currentWidget attributesIndicates the element that represents the current item within a container or set of related elementspage, step, location, date, time, true, false
aria-disabledWidget attributesThe element is visible but not interactivefalse, true
aria-expandedWidget attributesThe element is expandedundefined, false, true
aria-grabbedDrag-and-Drop attributesDeprecated The element is selected for draggingundefined, false, true
aria-hiddenWidget attributesThe element is invisible to all users (including assistive technologies)false, true
aria-invalidWidget attributesThe element contains a value that doesn't match the expected formatfalse, grammar, spelling, true
aria-pressedWidget attributesThe button is pressedundefined, false, mixed, true
aria-selectedWidget attributesThe element is selectedundefined, false, true

Collection: Introduction to ARIA

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